♻️ Add PaginationFooter component (#1381)

fastapi · Oct 3, 2024 · 8d52d01 · 8d52d01
1 parent 88e1a60
commit 8d52d01
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 34 deletions.
diff --git a/frontend/src/components/Common/PaginationFooter.tsx b/frontend/src/components/Common/PaginationFooter.tsx
@@ -0,0 +1,36 @@
+import { Button, Flex } from "@chakra-ui/react"
+
+type PaginationFooterProps = {
+  hasNextPage?: boolean
+  hasPreviousPage?: boolean
+  onChangePage: (newPage: number) => void
+  page: number
+}
+
+export function PaginationFooter({
+  hasNextPage,
+  hasPreviousPage,
+  onChangePage,
+  page,
+}: PaginationFooterProps) {
+  return (
+    <Flex
+      gap={4}
+      alignItems="center"
+      mt={4}
+      direction="row"
+      justifyContent="flex-end"
+    >
+      <Button
+        onClick={() => onChangePage(page - 1)}
+        isDisabled={!hasPreviousPage || page <= 1}
+      >
+        Previous
+      </Button>
+      <span>Page {page}</span>
+      <Button isDisabled={!hasNextPage} onClick={() => onChangePage(page + 1)}>
+        Next
+      </Button>
+    </Flex>
+  )
+}
diff --git a/frontend/src/routes/_layout/admin.tsx b/frontend/src/routes/_layout/admin.tsx
@@ -1,7 +1,6 @@
 import {
   Badge,
   Box,
-  Button,
   Container,
   Flex,
   Heading,
@@ -23,6 +22,7 @@ import { type UserPublic, UsersService } from "../../client"
 import AddUser from "../../components/Admin/AddUser"
 import ActionsMenu from "../../components/Common/ActionsMenu"
 import Navbar from "../../components/Common/Navbar"
+import { PaginationFooter } from "../../components/Common/PaginationFooter.tsx"
 
 const usersSearchSchema = z.object({
   page: z.number().catch(1),
@@ -128,7 +128,7 @@ function UsersTable() {
                     <ActionsMenu
                       type="User"
                       value={user}
-                      disabled={currentUser?.id === user.id ? true : false}
+                      disabled={currentUser?.id === user.id}
                     />
                   </Td>
                 </Tr>
@@ -137,21 +137,12 @@ function UsersTable() {
           )}
         </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>
+      <PaginationFooter
+        onChangePage={setPage}
+        page={page}
+        hasNextPage={hasNextPage}
+        hasPreviousPage={hasPreviousPage}
+      />
     </>
   )
 }

diff --git a/frontend/src/routes/_layout/items.tsx b/frontend/src/routes/_layout/items.tsx
@@ -1,7 +1,5 @@
 import {
-  Button,
   Container,
-  Flex,
   Heading,
   SkeletonText,
   Table,
@@ -21,6 +19,7 @@ import { ItemsService } from "../../client"
 import ActionsMenu from "../../components/Common/ActionsMenu"
 import Navbar from "../../components/Common/Navbar"
 import AddItem from "../../components/Items/AddItem"
+import { PaginationFooter } from "../../components/Common/PaginationFooter.tsx"
 
 const itemsSearchSchema = z.object({
   page: z.number().catch(1),
@@ -112,21 +111,12 @@ function ItemsTable() {
           )}
         </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>
+      <PaginationFooter
+        page={page}
+        onChangePage={setPage}
+        hasNextPage={hasNextPage}
+        hasPreviousPage={hasPreviousPage}
+      />
     </>
   )
 }