Flatten File Structure (In Progress)

.gitignore

@@ -31,6 +31,7 @@ lib-cov
 
 # Coverage directory used by tools like istanbul
 coverage
+/coverage
 
 # nyc test coverage
 .nyc_output
@@ -46,9 +47,13 @@ bower_components
 
 # Compiled binary addons (http://nodejs.org/api/addons.html)
 build/Release
+/build
+.vercel
 
 # Dependency directories
 node_modules/
+/.pnp
+.pnp.js
 
 # Optional npm cache directory
 .npm
@@ -65,9 +70,16 @@ node_modules/
 # Yarn Integrity file
 .yarn-integrity
 
+# next.js
+/.next/
+/out/
+
+# typescript
+*.tsbuildinfo
+
 # dotenv environment variables file
 .env
 
-.vercel
-
-.DS_Store
+# misc
+.DS_Store
+*.pem

web/components/Icons/LeftChevronIcon copy.tsx → components/Icons/LeftChevronIcon copy.tsx

@@ -10,16 +10,16 @@ const ArrowUpIcon = () => {
       <path
         d="M15 23.75V6.25"
         stroke="white"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
       <path
         d="M6.25 15L15 6.25L23.75 15"
         stroke="white"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
     </svg>
   );

web/components/Icons/RightChevronIcon.tsx → components/Icons/RightChevronIcon.tsx

@@ -10,9 +10,9 @@ const RightChevronIcon = () => {
       <path
         d="M2.25 2.5L9.75 10L2.25 17.5"
         stroke="white"
-        stroke-width="3"
-        stroke-linecap="square"
-        stroke-linejoin="round"
+        strokeWidth="3"
+        strokeLinecap="square"
+        strokeLinejoin="round"
       />
     </svg>
   );

web/components/molecules/Pagination/Pagination.tsx → components/molecules/Pagination/Pagination.tsx

@@ -6,23 +6,39 @@ const pageSize = PAGINATION_PAGE_SIZE;
 const getFirstRecordOnPage = (currPage: number) =>
   (currPage - 1) * pageSize + 1;
 
-const getLastRecordOnPage = (
-  firstRecordOnPage: number,
-  totalRecords: number
-) => Math.min(firstRecordOnPage + pageSize - 1, totalRecords);
+const getLastRecordOnPage = (firstRecordOnPage: number, totalRecords: number) =>
+  Math.min(firstRecordOnPage + pageSize - 1, totalRecords);
 
 const isValidPage = (firstRecordOnPage: number, totalRecords: number) =>
   firstRecordOnPage > 0 && firstRecordOnPage <= totalRecords;
 
 const LeftArrow = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-    <path d="M15.1599 7.41L10.5799 12L15.1599 16.59L13.7499 18L7.74991 12L13.7499 6L15.1599 7.41Z" fill="currentColor"/>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+  >
+    <path
+      d="M15.1599 7.41L10.5799 12L15.1599 16.59L13.7499 18L7.74991 12L13.7499 6L15.1599 7.41Z"
+      fill="currentColor"
+    />
   </svg>
 );
 
 const RightArrow = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-    <path d="M8.84009 7.41L13.4201 12L8.84009 16.59L10.2501 18L16.2501 12L10.2501 6L8.84009 7.41Z" fill="currentColor"/>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+  >
+    <path
+      d="M8.84009 7.41L13.4201 12L8.84009 16.59L10.2501 18L16.2501 12L10.2501 6L8.84009 7.41Z"
+      fill="currentColor"
+    />
   </svg>
 );
 
@@ -33,22 +49,32 @@ const getArrows = (
   onNextPage: any,
   onPrevPage: any
 ) => [
-  { symbol: <LeftArrow/>, disabled: firstRecordOnPage <= pageSize, onClick: onPrevPage },
-  { symbol: <RightArrow/>, disabled: totalRecords <= currPage * pageSize, onClick: onNextPage },
+  {
+    symbol: <LeftArrow />,
+    disabled: firstRecordOnPage <= pageSize,
+    onClick: onPrevPage,
+  },
+  {
+    symbol: <RightArrow />,
+    disabled: totalRecords <= currPage * pageSize,
+    onClick: onNextPage,
+  },
 ];
 
 const ArrowButton = ({
   symbol,
   disabled,
-  onClick
+  onClick,
 }: {
   symbol: JSX.Element;
   disabled: boolean;
   onClick: () => void;
 }) => (
   <div
     className={`w-8 h-8 rounded border flex justify-center items-center font-bold text-xl ${
-      disabled ? "text-gray-300 cursor-not-allowed" : "text-black cursor-pointer"
+      disabled
+        ? "text-gray-300 cursor-not-allowed"
+        : "text-black cursor-pointer"
     }`}
     onClick={!disabled ? onClick : undefined}
   >
@@ -60,24 +86,27 @@ function Pagination({
   totalRecords,
   currPage,
   onNextPage,
-  onPrevPage
+  onPrevPage,
 }: {
   totalRecords: number;
   currPage: number;
   onNextPage: any;
   onPrevPage: any;
 }) {
   const firstRecordOnPage = getFirstRecordOnPage(currPage);
-  const lastRecordOnPage = getLastRecordOnPage(
-    firstRecordOnPage,
-    totalRecords
-  );
+  const lastRecordOnPage = getLastRecordOnPage(firstRecordOnPage, totalRecords);
 
   if (!isValidPage(firstRecordOnPage, totalRecords)) {
     return null;
   }
 
-  const arrows = getArrows(firstRecordOnPage, totalRecords, currPage, onNextPage, onPrevPage);
+  const arrows = getArrows(
+    firstRecordOnPage,
+    totalRecords,
+    currPage,
+    onNextPage,
+    onPrevPage
+  );
 
   return (
     <div className="flex items-center gap-3 justify-end">
@@ -86,7 +115,12 @@ function Pagination({
       </h1>
       <div className="flex items-center gap-2">
         {arrows.map(({ symbol, disabled, onClick }, index) => (
-          <ArrowButton key={index} symbol={symbol} disabled={disabled} onClick={onClick} />
+          <ArrowButton
+            key={index}
+            symbol={symbol}
+            disabled={disabled}
+            onClick={onClick}
+          />
         ))}
       </div>
     </div>

components/molecules/Pagination/PaginationHooks.ts

@@ -0,0 +1,65 @@
+import { CollectionPath } from "@lib/types/db";
+import { getTotalRecords } from "db/firebase/getSize";
+import { useEffect, useState } from "react";
+
+export function usePaginatedData<T>(
+  fetchPage: (
+    page: number,
+    paginationReferences: Map<number, any>
+  ) => Promise<{ data: T[]; paginationInfo: any }>,
+  type: CollectionPath
+) {
+  const [paginationReferences, setPaginationReferences] = useState<
+    Map<number, any>
+  >(new Map());
+  const [currPage, setCurrPage] = useState(1);
+  const [data, setData] = useState<T[]>([]);
+  const [totalRecords, setTotalRecords] = useState<number>(0);
+  const [refreshKey, setRefreshKey] = useState<number>(0);
+
+  const fetchTotalRecords = async () => {
+    try {
+      const numRecords = await getTotalRecords(type);
+      if (numRecords) {
+        setTotalRecords(numRecords);
+      }
+    } catch (error) {
+      console.error("Error fetching records.");
+    }
+  };
+
+  const updatePaginationReferences = async (paginationInfo: any) => {
+    setPaginationReferences((prev) => {
+      const newRefs = new Map(prev);
+      newRefs.set(currPage, paginationInfo);
+      return newRefs;
+    });
+  };
+
+  const fetchPageData = async () => {
+    const newPageData = await fetchPage(currPage, paginationReferences);
+    setData(newPageData.data);
+    updatePaginationReferences(newPageData.paginationInfo);
+  };
+
+  useEffect(() => {
+    fetchPageData();
+    fetchTotalRecords();
+  }, [currPage]);
+
+  useEffect(() => {
+    setCurrPage(1);
+    fetchPageData();
+    fetchTotalRecords();
+  }, [refreshKey]);
+
+  return {
+    data,
+    totalRecords,
+    currPage,
+    setCurrPage,
+    onNextPage: () => setCurrPage((prev) => prev + 1),
+    onPrevPage: () => setCurrPage((prev) => prev - 1),
+    refresh: () => setRefreshKey((prev) => prev + 1),
+  };
+}

components/tables/PaginatedTable.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import Pagination from "@components/molecules/Pagination/Pagination";
+import CaretakerTable from "@components/tables/CaretakerTable";
+import BabiesTable from "@components/tables/BabiesTable";
+import { BABIES_TAB, CAREGIVERS_TAB } from "@lib/utils/consts";
+
+export default function PaginatedTable({
+  type,
+  tableProps,
+  paginatedProps,
+  onNextPage,
+  onPrevPage,
+}: any) {
+  return (
+    <div className="flex flex-col gap-4 mb-3 w-[65vw]">
+      <div className="overflow-auto h-[70vh]">
+        {type == BABIES_TAB ? (
+          <BabiesTable props={tableProps} />
+        ) : type == CAREGIVERS_TAB ? (
+          <CaretakerTable props={tableProps} />
+        ) : (
+          <></>
+        )}
+      </div>
+      <div>
+        <Pagination
+          totalRecords={paginatedProps.totalRecords}
+          currPage={paginatedProps.pageNumber}
+          onNextPage={onNextPage}
+          onPrevPage={onPrevPage}
+        />
+      </div>
+    </div>
+  );
+}