From 74dd60ea702d67f7a2c43147c821efd1bb70cd17 Mon Sep 17 00:00:00 2001
From: Uma <63426041+uma-anand@users.noreply.github.com>
Date: Tue, 24 Sep 2024 17:05:52 -0400
Subject: [PATCH] Adding Pagination to the Babies and Caregivers Tables (#136)
* feat: pagination component
* feat: pagination backend and adding to component, creating pagination component
* fix: page size and svg arrow symbols
* Move consts to utils to fix build error
---
.../molecules/Pagination/Pagination.tsx | 96 ++
.../molecules/Pagination/PaginationHooks.ts | 49 +
web/components/{ => tables}/BabiesTable.tsx | 15 +-
.../{ => tables}/CaretakerTable.tsx | 12 +-
web/components/tables/PaginatedTable.tsx | 23 +
web/db/actions/admin/Baby.ts | 53 +-
web/db/actions/admin/Caregiver.ts | 51 +-
web/db/consts.ts | 11 +
web/db/firebase/getSize.ts | 19 +
web/lib/consts.ts | 10 +
web/lib/exceptions/DatabaseExceptions.ts | 21 +
web/lib/types/common.ts | 12 +-
web/lib/types/db.ts | 6 +
web/lib/utils/baby.ts | 32 +
web/lib/utils/caregiver.ts | 34 +
web/lib/utils/consts.ts | 2 +
web/lib/utils/contactInfo.ts | 2 +-
web/lib/utils/pagination.ts | 19 +
web/package-lock.json | 1027 ++++++++++++-----
web/package.json | 2 +-
web/pages/admin/babies.tsx | 101 +-
web/pages/admin/caregivers.tsx | 142 +--
22 files changed, 1235 insertions(+), 504 deletions(-)
create mode 100644 web/components/molecules/Pagination/Pagination.tsx
create mode 100644 web/components/molecules/Pagination/PaginationHooks.ts
rename web/components/{ => tables}/BabiesTable.tsx (94%)
rename web/components/{ => tables}/CaretakerTable.tsx (97%)
create mode 100644 web/components/tables/PaginatedTable.tsx
create mode 100644 web/db/consts.ts
create mode 100644 web/db/firebase/getSize.ts
create mode 100644 web/lib/consts.ts
create mode 100644 web/lib/exceptions/DatabaseExceptions.ts
create mode 100644 web/lib/types/db.ts
create mode 100644 web/lib/utils/baby.ts
create mode 100644 web/lib/utils/caregiver.ts
create mode 100644 web/lib/utils/consts.ts
create mode 100644 web/lib/utils/pagination.ts
diff --git a/web/components/molecules/Pagination/Pagination.tsx b/web/components/molecules/Pagination/Pagination.tsx
new file mode 100644
index 0000000..6935a70
--- /dev/null
+++ b/web/components/molecules/Pagination/Pagination.tsx
@@ -0,0 +1,96 @@
+import { PAGINATION_PAGE_SIZE } from "db/consts";
+import React from "react";
+
+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 isValidPage = (firstRecordOnPage: number, totalRecords: number) =>
+ firstRecordOnPage > 0 && firstRecordOnPage <= totalRecords;
+
+const LeftArrow = () => (
+
+);
+
+const RightArrow = () => (
+
+);
+
+const getArrows = (
+ firstRecordOnPage: number,
+ totalRecords: number,
+ currPage: number,
+ onNextPage: any,
+ onPrevPage: any
+) => [
+ { symbol: , disabled: firstRecordOnPage <= pageSize, onClick: onPrevPage },
+ { symbol: , disabled: totalRecords <= currPage * pageSize, onClick: onNextPage },
+];
+
+const ArrowButton = ({
+ symbol,
+ disabled,
+ onClick
+}: {
+ symbol: JSX.Element;
+ disabled: boolean;
+ onClick: () => void;
+}) => (
+
+ {symbol}
+
+);
+
+function Pagination({
+ totalRecords,
+ currPage,
+ onNextPage,
+ onPrevPage
+}: {
+ totalRecords: number;
+ currPage: number;
+ onNextPage: any;
+ onPrevPage: any;
+}) {
+ const firstRecordOnPage = getFirstRecordOnPage(currPage);
+ const lastRecordOnPage = getLastRecordOnPage(
+ firstRecordOnPage,
+ totalRecords
+ );
+
+ if (!isValidPage(firstRecordOnPage, totalRecords)) {
+ return null;
+ }
+
+ const arrows = getArrows(firstRecordOnPage, totalRecords, currPage, onNextPage, onPrevPage);
+
+ return (
+
+
+ {firstRecordOnPage} - {lastRecordOnPage} of {totalRecords}
+
+
+ {arrows.map(({ symbol, disabled, onClick }, index) => (
+
+ ))}
+
+
+ );
+}
+
+export default Pagination;
diff --git a/web/components/molecules/Pagination/PaginationHooks.ts b/web/components/molecules/Pagination/PaginationHooks.ts
new file mode 100644
index 0000000..4661b21
--- /dev/null
+++ b/web/components/molecules/Pagination/PaginationHooks.ts
@@ -0,0 +1,49 @@
+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