fix: fix pr comments

holy-grail-frontend/src/components/Pagination/Pagination.tsx

@@ -1,16 +1,29 @@
 import { Button, HStack, Text } from "@chakra-ui/react";
 import debounce from "lodash/debounce";
 
+interface HStackStyles {
+  spacing?: number;
+  mt?: string;
+}
 interface PaginationProps {
   pageInfo: { page: number; size: number; total: number; pages: number };
   handlePageChange: (newPage: number) => void;
+  HStackStyles?: HStackStyles;
 }
 
-export const Pagination = ({ pageInfo, handlePageChange }: PaginationProps) => {
+export const Pagination = ({
+  pageInfo,
+  handlePageChange,
+  HStackStyles,
+}: PaginationProps) => {
   const debouncedHandlePageChange = debounce(handlePageChange, 100);
 
   return (
-    <HStack spacing={4} justifyContent="center" mt="10%">
+    <HStack
+      spacing={HStackStyles ? HStackStyles?.spacing : 4}
+      justifyContent="center"
+      mt={HStackStyles ? HStackStyles?.mt : "10%"}
+    >
       <Button
         onClick={() => debouncedHandlePageChange(pageInfo.page - 1)}
         isDisabled={pageInfo.page === 1}

holy-grail-frontend/src/features/Developer/TabContent.tsx

@@ -16,8 +16,9 @@ import {
   TablePagination,
 } from "@mui/material";
 import EditIcon from "@mui/icons-material/Edit";
-import React from "react";
-import { Tab } from "@chakra-ui/react";
+import React, { useState, ChangeEvent, MouseEvent } from "react";
+import { ChakraProvider, Flex } from "@chakra-ui/react";
+import { Pagination } from "../../components/Pagination/Pagination";
 
 type DataTypeKey = "categories" | "subjects" | "types";
 
@@ -36,82 +37,76 @@ export const TabContent = ({
   handleAdd,
   type,
 }: TabContentProps) => {
-  const [query, setQuery] = React.useState<string>('');
-  const [page, setPage] = React.useState<number>(0);
-  const [chunkSize, setChunkSize] = React.useState<number>(10);
+  const [query, setQuery] = useState<string>("");
+  const [page, setPage] = useState<number>(0);
+  const [chunkSize, setChunkSize] = useState<number>(10);
 
   const handleEditClick = (id: number) => {
     handleEdit(id, type);
   };
 
-  //filter data based on query
-  const handleValidData = () => {
-    let validData: Array<CategoryType | SubjectType | DocumentType> = data.filter((option) => {
-      return option.name.toLowerCase().includes(query.toLowerCase());
-    });
+  const handleFilterContent = () => {
+    let validData: Array<CategoryType | SubjectType | DocumentType> =
+      data.filter((option) => {
+        return option.name.toLowerCase().includes(query.toLowerCase());
+      });
     return validData;
-  }
+  };
 
   //paginate data into chunks
-  const handlePaging = () =>{
+  const handlePaging = () => {
     let pagedData: Array<Array<CategoryType | SubjectType | DocumentType>> = [];
-    let validData: Array<CategoryType | SubjectType | DocumentType> = handleValidData();
-    for (let i = 0; i < validData.length; i += chunkSize ) {
-      pagedData.push(
-        validData.slice(i, i + chunkSize)
-      );
-    };
+    let validData: Array<CategoryType | SubjectType | DocumentType> =
+      handleFilterContent();
+    for (let i = 0; i < validData.length; i += chunkSize) {
+      pagedData.push(validData.slice(i, i + chunkSize));
+    }
     return pagedData;
-  }
-
-
-
-
-
+  };
 
   return (
     <TableContainer component={Paper}>
       <Table>
         <TableHead>
           <TableRow>
-
             <TableCell>
               <OutlinedInput
-                sx={{ width: '120%' }}
+                sx={{ width: "120%" }}
                 placeholder={`Search for ${title}`}
-                onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                onChange={(event: ChangeEvent<HTMLInputElement>) => {
                   setQuery(event.target.value);
                   //go back to first page to prevent overflow
                   setPage(0);
-                  handleValidData();
-
+                  handleFilterContent();
                 }}
               />
-
             </TableCell>
-            
+
             <TableCell align="right">
-                <Button onClick={handleAdd}>+ {title}</Button>
+              <Button onClick={handleAdd}>+ {title}</Button>
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell colSpan={2}>
+              <ChakraProvider>
+                <Pagination
+                  // page is 0 indexed, but Pagination component is 1 indexed
+                  pageInfo={{
+                    page: page + 1,
+                    size: chunkSize,
+                    total: handleFilterContent().length,
+                    pages: handlePaging().length,
+                  }}
+                  handlePageChange={(newPage: number) => {
+                    setPage(newPage - 1);
+                  }}
+                  HStackStyles={{ spacing: 10, mt: "0%" }}
+                />
+              </ChakraProvider>
             </TableCell>
           </TableRow>
-          <TablePagination 
-            count={handleValidData().length}
-            onPageChange={(event: React.MouseEvent<HTMLButtonElement> | null, page: number) =>{
-              setPage(page);
-            }}
-            page={page}
-            rowsPerPage={chunkSize}
-            rowsPerPageOptions={[5,10,15,20]}
-            onRowsPerPageChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-              setChunkSize(parseInt(event.target.value));
-              //go back to first page to prevent overflow
-              setPage(0);
-              handlePaging();
-            }}
-          /> 
         </TableHead>
         <TableBody>
-
           {(handlePaging()[page] || []).map((item) => (
             <TableRow key={item.id}>
               <TableCell component="th" scope="row">
@@ -128,10 +123,7 @@ export const TabContent = ({
             </TableRow>
           ))}
         </TableBody>
-
       </Table>
-
     </TableContainer>
-
   );
 };