From 8d52d018b412953f15b0de804ec42577d97af22f Mon Sep 17 00:00:00 2001
From: Saltie <saltie@protonmail.com>
Date: Thu, 3 Oct 2024 20:32:46 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Add=20PaginationFooter=20c?=
 =?UTF-8?q?omponent=20(#1381)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Common/PaginationFooter.tsx    | 36 +++++++++++++++++++
 frontend/src/routes/_layout/admin.tsx         | 25 +++++--------
 frontend/src/routes/_layout/items.tsx         | 24 ++++---------
 3 files changed, 51 insertions(+), 34 deletions(-)
 create mode 100644 frontend/src/components/Common/PaginationFooter.tsx

diff --git a/frontend/src/components/Common/PaginationFooter.tsx b/frontend/src/components/Common/PaginationFooter.tsx
new file mode 100644
index 0000000000..788246399f
--- /dev/null
+++ 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
index 644653ff79..b96fbc3799 100644
--- 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
index 174fa83c9b..9216d3cbb4 100644
--- 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}
+      />
     </>
   )
 }