✨ Introduce pagination in items (#1239)

frontend/src/routes/_layout/items.tsx

@@ -1,4 +1,6 @@
+import { z } from "zod"
 import {
+  Button,
   Container,
   Flex,
   Heading,
@@ -11,44 +13,60 @@ import {
   Thead,
   Tr,
 } from "@chakra-ui/react"
-import { useSuspenseQuery } from "@tanstack/react-query"
+import { useQuery, useQueryClient } from "@tanstack/react-query"
-import { createFileRoute } from "@tanstack/react-router"
+import { createFileRoute, useNavigate } from "@tanstack/react-router"
 
-import { Suspense } from "react"
+import { useEffect } from "react"
-import { ErrorBoundary } from "react-error-boundary"
 import { ItemsService } from "../../client"
 import ActionsMenu from "../../components/Common/ActionsMenu"
 import Navbar from "../../components/Common/Navbar"
 
+const itemsSearchSchema = z.object({
+  page: z.number().catch(1),
+})
+
 export const Route = createFileRoute("/_layout/items")({
   component: Items,
+  validateSearch: (search) => itemsSearchSchema.parse(search),
 })
 
-function ItemsTableBody() {
+const PER_PAGE = 5
-  const { data: items } = useSuspenseQuery({
-    queryKey: ["items"],
-    queryFn: () => ItemsService.readItems({}),
-  })
 
-  return (
+function getItemsQueryOptions({ page }: { page: number }) {
-    <Tbody>
+  return {
-      {items.data.map((item) => (
+    queryFn: () =>
-        <Tr key={item.id}>
+      ItemsService.readItems({ skip: (page - 1) * PER_PAGE, limit: PER_PAGE }),
-          <Td>{item.id}</Td>
+    queryKey: ["items", { page }],
-          <Td>{item.title}</Td>
-          <Td color={!item.description ? "ui.dim" : "inherit"}>
-            {item.description || "N/A"}
-          </Td>
-          <Td>
-            <ActionsMenu type={"Item"} value={item} />
-          </Td>
-        </Tr>
-      ))}
-    </Tbody>
-  )
   }
+}
+
 function ItemsTable() {
+  const queryClient = useQueryClient()
+  const { page } = Route.useSearch()
+  const navigate = useNavigate({ from: Route.fullPath })
+  const setPage = (page: number) =>
+    navigate({ search: (prev) => ({ ...prev, page }) })
+
+  const {
+    data: items,
+    isPending,
+    isPlaceholderData,
+  } = useQuery({
+    ...getItemsQueryOptions({ page }),
+    placeholderData: (prevData) => prevData,
+  })
+
+  const hasNextPage = !isPlaceholderData && items?.data.length === PER_PAGE
+  const hasPreviousPage = page > 1
+
+  useEffect(() => {
+    if (hasNextPage) {
+      queryClient.prefetchQuery(getItemsQueryOptions({ page: page + 1 }))
+    }
+  }, [page, queryClient])
+
   return (
+    <>
       <TableContainer>
         <Table size={{ base: "sm", md: "md" }}>
           <Thead>
@@ -59,17 +77,7 @@ function ItemsTable() {
               <Th>Actions</Th>
             </Tr>
           </Thead>
-        <ErrorBoundary
+          {isPending ? (
-          fallbackRender={({ error }) => (
-            <Tbody>
-              <Tr>
-                <Td colSpan={4}>Something went wrong: {error.message}</Td>
-              </Tr>
-            </Tbody>
-          )}
-        >
-          <Suspense
-            fallback={
             <Tbody>
               {new Array(5).fill(null).map((_, index) => (
                 <Tr key={index}>
@@ -83,13 +91,40 @@ function ItemsTable() {
                 </Tr>
               ))}
             </Tbody>
-            }
+          ) : (
-          >
+            <Tbody>
-            <ItemsTableBody />
+              {items?.data.map((item) => (
-          </Suspense>
+                <Tr key={item.id} opacity={isPlaceholderData ? 0.5 : 1}>
-        </ErrorBoundary>
+                  <Td>{item.id}</Td>
+                  <Td>{item.title}</Td>
+                  <Td color={!item.description ? "ui.dim" : "inherit"}>
+                    {item.description || "N/A"}
+                  </Td>
+                  <Td>
+                    <ActionsMenu type={"Item"} value={item} />
+                  </Td>
+                </Tr>
+              ))}
+            </Tbody>
+          )}
         </Table>
       </TableContainer>
+      <Flex
+        gap={4}
+        alignItems="center"
+        mt={4}
+        direction="row"
+        justifyContent="flex-end"
+      >
+        <Button onClick={() => setPage(page - 1)} isDisabled={!hasPreviousPage}>
+          Previous
+        </Button>
+        <span>Page {page}</span>
+        <Button isDisabled={!hasNextPage} onClick={() => setPage(page + 1)}>
+          Next
+        </Button>
+      </Flex>
+    </>
   )
 }