From 503ba0071cf1b8fedc3a990f2532cf2beea67c03 Mon Sep 17 00:00:00 2001
From: erikaas24 <erikaaslopez@gmail.com>
Date: Thu, 7 Nov 2024 17:10:42 +0100
Subject: [PATCH] Add button so that you can navigate directly to first page of
 table

---
 .../components/pages/organization/OrgShop.tsx |  2 +-
 .../components/pages/orgs/TableStepper.tsx    | 20 +++++++++++--------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/pages/organization/OrgShop.tsx b/frontend/src/components/pages/organization/OrgShop.tsx
index e206fe8ba..f6404a007 100644
--- a/frontend/src/components/pages/organization/OrgShop.tsx
+++ b/frontend/src/components/pages/organization/OrgShop.tsx
@@ -13,7 +13,7 @@ type Props = {
 };
 export const OrgProducts: React.FC<Props> = ({ organization }) => {
   const theme = useTheme();
-  const limit = 100;
+  const limit = 5;
   const [page, setPage] = useState(0);
 
   const handlePageChange = (newValue: number) => {
diff --git a/frontend/src/components/pages/orgs/TableStepper.tsx b/frontend/src/components/pages/orgs/TableStepper.tsx
index 5c85d43db..1c84a2074 100644
--- a/frontend/src/components/pages/orgs/TableStepper.tsx
+++ b/frontend/src/components/pages/orgs/TableStepper.tsx
@@ -1,4 +1,4 @@
-import { KeyboardArrowLeft, KeyboardArrowRight } from "@mui/icons-material";
+import { KeyboardArrowLeft, KeyboardArrowRight, KeyboardDoubleArrowLeft, KeyboardDoubleArrowRight } from "@mui/icons-material";
 import { Button, Typography, Stack } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 import React from "react";
@@ -13,18 +13,22 @@ export const TableStepper: React.FC<Props> = ({ hasNextPage, page, handlePageCha
   const theme = useTheme();
   const nextPage = () => handlePageChange(page + 1);
   const prevPage = () => handlePageChange(page > 0 ? page - 1 : 0);
-
-  // Check if there is a next page (if we received less than `limit` items)
-  //const hasNextPage = (data?.paginatedShopOrders && data.paginatedShopOrders.length < limit) ?? false;
+  const resetPage = () => handlePageChange(0)
 
   return (
     <Stack
       sx={{ maxWidth: 300, flexGrow: 1, position: "static", flexDirection: "row", justifyContent: "space-between" }}
     >
-      <Button size="small" onClick={prevPage} disabled={page === 0}>
-        {theme.direction === "rtl" ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
-        Back
-      </Button>
+      <Stack sx ={{flexDirection: "row"}}>
+        <Button size="small" onClick={resetPage} disabled={page === 0}>
+          {theme.direction === "rtl" ? <KeyboardDoubleArrowRight /> : <KeyboardDoubleArrowLeft />}
+          First
+        </Button>
+        <Button size="small" onClick={prevPage} disabled={page === 0}>
+          {theme.direction === "rtl" ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
+          Back
+        </Button>
+      </Stack>
 
       <Typography>{page + 1}</Typography>