@@ -60,7 +86,7 @@ function Pagination({
totalRecords,
currPage,
onNextPage,
- onPrevPage
+ onPrevPage,
}: {
totalRecords: number;
currPage: number;
@@ -68,16 +94,19 @@ function Pagination({
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 (
@@ -86,7 +115,12 @@ function Pagination({
{arrows.map(({ symbol, disabled, onClick }, index) => (
-
+
))}
diff --git a/components/molecules/Pagination/PaginationHooks.ts b/components/molecules/Pagination/PaginationHooks.ts
new file mode 100644
index 00000000..efbdee09
--- /dev/null
+++ b/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
(
+ fetchPage: (
+ page: number,
+ paginationReferences: Map
+ ) => Promise<{ data: T[]; paginationInfo: any }>,
+ type: CollectionPath
+) {
+ const [paginationReferences, setPaginationReferences] = useState<
+ Map
+ >(new Map());
+ const [currPage, setCurrPage] = useState(1);
+ const [data, setData] = useState([]);
+ const [totalRecords, setTotalRecords] = useState(0);
+ const [refreshKey, setRefreshKey] = useState(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),
+ };
+}
diff --git a/web/components/resources/FAQ.tsx b/components/resources/FAQ.tsx
similarity index 100%
rename from web/components/resources/FAQ.tsx
rename to components/resources/FAQ.tsx
diff --git a/web/components/resources/Links.tsx b/components/resources/Links.tsx
similarity index 100%
rename from web/components/resources/Links.tsx
rename to components/resources/Links.tsx
diff --git a/web/components/resources/Research.tsx b/components/resources/Research.tsx
similarity index 100%
rename from web/components/resources/Research.tsx
rename to components/resources/Research.tsx
diff --git a/web/components/settings/LiabilityWaver.tsx b/components/settings/LiabilityWaver.tsx
similarity index 100%
rename from web/components/settings/LiabilityWaver.tsx
rename to components/settings/LiabilityWaver.tsx
diff --git a/web/components/tables/BabiesTable.tsx b/components/tables/BabiesTable.tsx
similarity index 100%
rename from web/components/tables/BabiesTable.tsx
rename to components/tables/BabiesTable.tsx
diff --git a/web/components/tables/CaretakerTable.tsx b/components/tables/CaretakerTable.tsx
similarity index 100%
rename from web/components/tables/CaretakerTable.tsx
rename to components/tables/CaretakerTable.tsx
diff --git a/components/tables/PaginatedTable.tsx b/components/tables/PaginatedTable.tsx
new file mode 100644
index 00000000..21ed76b6
--- /dev/null
+++ b/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 (
+
+
+ {type == BABIES_TAB ? (
+
+ ) : type == CAREGIVERS_TAB ? (
+
+ ) : (
+ <>
+ )}
+
+
+
-
- {(type == BABIES_TAB) ? :
- (type == CAREGIVERS_TAB)? : <>}
-
-
-