feat/developer search paginate

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?.spacing ? HStackStyles.spacing : 4}
+      justifyContent="center"
+      mt={HStackStyles?.mt ? HStackStyles.mt : "10%"}
+    >
       <Button
         onClick={() => debouncedHandlePageChange(pageInfo.page - 1)}
         isDisabled={pageInfo.page === 1}

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

@@ -12,9 +12,12 @@ import {
   TableContainer,
   TableHead,
   TableRow,
+  OutlinedInput,
 } from "@mui/material";
 import EditIcon from "@mui/icons-material/Edit";
-import React from "react";
+import { useState, ChangeEvent, MouseEvent } from "react";
+import { ChakraProvider, Flex } from "@chakra-ui/react";
+import { Pagination } from "../../components/Pagination/Pagination";
 
 type DataTypeKey = "categories" | "subjects" | "types";
 
@@ -33,23 +36,75 @@ export const TabContent = ({
   handleAdd,
   type,
 }: TabContentProps) => {
+  const [query, setQuery] = useState<string>("");
+  const [page, setPage] = useState<number>(0);
+  const [chunkSize, setChunkSize] = useState<number>(10);
+
   const handleEditClick = (id: number) => {
     handleEdit(id, type);
   };
 
+  const handleFilterContent = () => {
+    let validData: Array<CategoryType | SubjectType | DocumentType> =
+      data.filter((option) => {
+        return option.name.toLowerCase().includes(query.toLowerCase());
+      });
+    return validData;
+  };
+
+  const handlePaging = () => {
+    let pagedData: Array<Array<CategoryType | SubjectType | DocumentType>> = [];
+    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>{title}</TableCell>
+            <TableCell>
+              <OutlinedInput
+                sx={{ width: "120%" }}
+                placeholder={`Search for ${title}`}
+                onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                  setQuery(event.target.value);
+                  //go back to first page to prevent overflow
+                  setPage(0);
+                  handleFilterContent();
+                }}
+              />
+            </TableCell>
+
             <TableCell align="right">
-              <Button onClick={handleAdd}>+</Button>
+              <Button onClick={handleAdd}>+ {title}</Button>
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell colSpan={2}>
+              <ChakraProvider>
+                <Pagination
+                  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>
         </TableHead>
         <TableBody>
-          {data.map((item) => (
+          {(handlePaging()[page] || []).map((item) => (
             <TableRow key={item.id}>
               <TableCell component="th" scope="row">
                 {item.name}