Done: Project Lazy Spa

base-blog-em/package.json

@@ -8,7 +8,7 @@
     "@testing-library/user-event": "^12.8.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-query": "^3.13.5",
+    "react-query": "^3.34.16",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.1.1"
   },

base-blog-em/src/App.jsx

@@ -1,13 +1,21 @@
 import { Posts } from "./Posts";
 import "./App.css";
 
+import { QueryClient, QueryClientProvider } from "react-query";
+import { ReactQueryDevtools } from "react-query/devtools";
+
+const queryClient = new QueryClient();
+
 function App() {
   return (
     // provide React Query client to App
-    <div className="App">
-      <h1>Blog Posts</h1>
-      <Posts />
-    </div>
+    <QueryClientProvider client={queryClient}>
+      <div className="App">
+        <h1>Blog Posts</h1>
+        <Posts />
+      </div>
+      <ReactQueryDevtools />
+    </QueryClientProvider>
   );
 }
 

base-blog-em/src/PostDetail.jsx

@@ -1,3 +1,5 @@
+import { useQuery, useMutation } from "react-query";
+
 async function fetchComments(postId) {
   const response = await fetch(
     `https://jsonplaceholder.typicode.com/comments?postId=${postId}`
@@ -23,12 +25,49 @@ async function updatePost(postId) {
 
 export function PostDetail({ post }) {
   // replace with useQuery
-  const data = [];
+  const { data, isError, error, isLoading } = useQuery(
+    ["comments", post.id],
+    fetchComments.bind(null, post.id)
+  );
+
+  const deleteMutation = useMutation((postId) => deletePost(postId));
+  const updateMutation = useMutation((postId) => updatePost(postId));
+
+  if (isLoading) return <h3>Loading...</h3>;
+
+  if (isError)
+    return (
+      <>
+        <h3>Oops, something went wrong</h3>
+        <p>{error.toString()}</p>
+      </>
+    );
 
   return (
     <>
       <h3 style={{ color: "blue" }}>{post.title}</h3>
-      <button>Delete</button> <button>Update title</button>
+      <button onClick={() => deleteMutation.mutate(post.id)}>Delete</button>
+      <button onClick={() => updateMutation.mutate(post.id)}>
+        Update title
+      </button>
+      {deleteMutation.isError && (
+        <p style={{ color: "red" }}>Error deleting the post</p>
+      )}
+      {deleteMutation.isLoading && (
+        <p style={{ color: "purple" }}>Deleting the post</p>
+      )}
+      {deleteMutation.isSuccess && (
+        <p style={{ color: "green" }}>Post has (not) been deleted</p>
+      )}
+      {updateMutation.isError && (
+        <p style={{ color: "red" }}>Error updating the post</p>
+      )}
+      {updateMutation.isLoading && (
+        <p style={{ color: "purple" }}>Updating the post</p>
+      )}
+      {updateMutation.isSuccess && (
+        <p style={{ color: "green" }}>Post has (not) been updated</p>
+      )}
       <p>{post.body}</p>
       <h4>Comments</h4>
       {data.map((comment) => (

base-blog-em/src/Posts.jsx

@@ -1,21 +1,51 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { useQuery, useQueryClient } from "react-query";
 
 import { PostDetail } from "./PostDetail";
 const maxPostPage = 10;
 
-async function fetchPosts() {
+async function fetchPosts(pageNum) {
   const response = await fetch(
-    "https://jsonplaceholder.typicode.com/posts?_limit=10&_page=0"
+    `https://jsonplaceholder.typicode.com/posts?_limit=10&_page=0${pageNum}`
   );
   return response.json();
 }
 
 export function Posts() {
-  const [currentPage, setCurrentPage] = useState(0);
+  const [currentPage, setCurrentPage] = useState(1);
   const [selectedPost, setSelectedPost] = useState(null);
 
+  const queryClient = useQueryClient();
+
+  useEffect(() => {
+    if (currentPage >= maxPostPage) return;
+
+    const nextPage = currentPage + 1;
+
+    queryClient.prefetchQuery(
+      ["posts", nextPage],
+      fetchPosts.bind(null, nextPage)
+    );
+  }, [currentPage, queryClient]);
+
   // replace with useQuery
-  const data = [];
+  const { data, isError, error, isLoading } = useQuery(
+    ["posts", currentPage],
+    fetchPosts.bind(null, currentPage),
+    {
+      staleTime: 2000,
+      keepPreviousData: true,
+    }
+  );
+  if (isLoading) return <h3>Loading...</h3>;
+
+  if (isError)
+    return (
+      <>
+        <h3>Oops, something went wrong</h3>
+        <p>{error.toString()}</p>
+      </>
+    );
 
   return (
     <>
@@ -31,11 +61,21 @@ export function Posts() {
         ))}
       </ul>
       <div className="pages">
-        <button disabled onClick={() => {}}>
+        <button
+          disabled={currentPage <= 1}
+          onClick={() => {
+            setCurrentPage((prevValue) => prevValue - 1);
+          }}
+        >
           Previous page
         </button>
-        <span>Page {currentPage + 1}</span>
-        <button disabled onClick={() => {}}>
+        <span>Page {currentPage}</span>
+        <button
+          disabled={currentPage >= maxPostPage}
+          onClick={() => {
+            setCurrentPage((prevValue) => prevValue + 1);
+          }}
+        >
           Next page
         </button>
       </div>