From ac26ef9a3e8199ec73c6dd209287cebd3e6bce39 Mon Sep 17 00:00:00 2001
From: Jane Kamata <janekamata8@gmail.com>
Date: Tue, 1 Apr 2025 23:43:20 -0400
Subject: [PATCH] Added pagination

---
 .../src/grant-info/components/GrantLabels.tsx |   2 +-
 .../src/grant-info/components/GrantList.tsx   |  85 ++++--
 .../src/grant-info/components/Pagination.tsx  | 255 ------------------
 .../components/styles/Pagination.css          |  15 --
 4 files changed, 59 insertions(+), 298 deletions(-)
 delete mode 100644 frontend/src/grant-info/components/Pagination.tsx
 delete mode 100644 frontend/src/grant-info/components/styles/Pagination.css

diff --git a/frontend/src/grant-info/components/GrantLabels.tsx b/frontend/src/grant-info/components/GrantLabels.tsx
index 94382860..2bd86d11 100644
--- a/frontend/src/grant-info/components/GrantLabels.tsx
+++ b/frontend/src/grant-info/components/GrantLabels.tsx
@@ -18,7 +18,7 @@ const GrantLabels: React.FC<{
   }
 
   return (
-    <ul className="grant-labels grid grid-cols-4 justify-stretch font-semibold pt-4">
+    <ul className="grant-labels grid grid-cols-4 justify-stretch font-semibold pt-4 px-4">
       <li className="text-center">
         <button
           className="grant-name"
diff --git a/frontend/src/grant-info/components/GrantList.tsx b/frontend/src/grant-info/components/GrantList.tsx
index a1191089..310466ca 100644
--- a/frontend/src/grant-info/components/GrantList.tsx
+++ b/frontend/src/grant-info/components/GrantList.tsx
@@ -5,16 +5,10 @@ import { fetchAllGrants } from "../../external/bcanSatchel/actions.ts";
 import { getAppStore } from "../../external/bcanSatchel/store.ts";
 import { observer } from "mobx-react-lite";
 import GrantItem from "./GrantItem";
-
-import {
-  PaginationRoot,
-  PaginationPrevTrigger,
-  PaginationNextTrigger,
-  PaginationItems,
-  PaginationPageText,
-} from "./Pagination";
 import GrantLabels from "./GrantLabels";
 import { Grant } from "../../../../middle-layer/types/Grant.ts";
+import { ButtonGroup, IconButton, Pagination } from "@chakra-ui/react";
+import { HiChevronLeft, HiChevronRight } from "react-icons/hi";
 
 // How many items to show per page
 const fetchGrants = async () => {
@@ -30,7 +24,7 @@ const fetchGrants = async () => {
     console.error("Error fetching grants:", error);
   }
 };
-const ITEMS_PER_PAGE = 3;
+const ITEMS_PER_PAGE = 5;
 
 const GrantList: React.FC = observer(() => {
   // Use MobX store for live updates to allGrants
@@ -40,9 +34,6 @@ const GrantList: React.FC = observer(() => {
     fetchGrants();
   }, []);
 
-  // Total pages calculated from the store
-  const totalPages = Math.ceil(allGrants.length / ITEMS_PER_PAGE);
-
   const [grants, setGrants] = useState<Grant[]>(allGrants);
 
   useEffect(() => {
@@ -95,6 +86,14 @@ const GrantList: React.FC = observer(() => {
     setGrants(newdata);
   }
 
+  const [currentPage, setPage] = useState(1);
+
+  const count = grants.length;
+  const startRange = (currentPage - 1) * ITEMS_PER_PAGE;
+  const endRange = startRange + ITEMS_PER_PAGE;
+
+  const visibleItems = grants.slice(startRange, endRange);
+
   return (
     <div className="paginated-grant-list">
       {/*
@@ -102,29 +101,61 @@ const GrantList: React.FC = observer(() => {
           - defaultPage can be 1
           - totalPages is calculated
       */}
-      <PaginationRoot defaultPage={1} count={totalPages}>
-        {/* Actual grants for the current page */}
-        <div className="bg-light-orange rounded-[1.2rem] pt-2">
+
+      <div className="bg-light-orange rounded-[1.2rem] pt-2">
         <GrantLabels onSort={HandleHeaderClick} />
         <div className="grant-list p-4 ">
-        {grants.map(grant => (
-          <GrantItem key={grant.grantId} grant={grant} />
-        ))}
+          {visibleItems.map((grant) => (
+            <GrantItem key={grant.grantId} grant={grant} />
+          ))}
         </div>
-        </div>
-        {/* 
+      </div>
+      {/* 
            Paging Controls:
             - Prev / Next triggers
             - Individual page items
             - PageText for "X of Y" or "X / Y"
         */}
-        <div className="pagination-controls m-4">
-          <PaginationPrevTrigger />
-          <PaginationItems />
-          <PaginationNextTrigger />
-          <PaginationPageText format="compact" />
-        </div>
-      </PaginationRoot>
+      <Pagination.Root
+      className="pt-4"
+        count={count}
+        pageSize={ITEMS_PER_PAGE}
+        page={currentPage}
+        onPageChange={(e) => setPage(e.page)}
+      >
+        <ButtonGroup variant="ghost" size="md">
+          <Pagination.PrevTrigger asChild>
+            <IconButton>
+              <HiChevronLeft />
+            </IconButton>
+          </Pagination.PrevTrigger>
+
+          <Pagination.Context>
+          {({ pages }) => 
+            pages.map((page, index) =>
+              page.type === "page" ? (
+                <IconButton
+                  key={index}
+                  className={currentPage === page.value ? "text-dark-blue underline" : "ghost"} // Conditionally set the variant based on selected page                  onClick={() => setPage(page.value)}  // Set current page on click
+                  onClick={() => setPage(page.value)}  // Set current page on click
+                  aria-label={`Go to page ${page.value}`}
+                >
+                  {page.value}
+                </IconButton>
+              ) : (
+                "..."
+              )
+            )
+          }
+        </Pagination.Context>
+
+          <Pagination.NextTrigger asChild>
+            <IconButton>
+              <HiChevronRight />
+            </IconButton>
+          </Pagination.NextTrigger>
+        </ButtonGroup>
+      </Pagination.Root>
     </div>
   );
 });
diff --git a/frontend/src/grant-info/components/Pagination.tsx b/frontend/src/grant-info/components/Pagination.tsx
deleted file mode 100644
index 24d3092d..00000000
--- a/frontend/src/grant-info/components/Pagination.tsx
+++ /dev/null
@@ -1,255 +0,0 @@
-import type { ButtonProps, TextProps } from "@chakra-ui/react"
-import {
-  Button,
-  Pagination as ChakraPagination,
-  IconButton,
-  Text,
-  createContext,
-  usePaginationContext,
-} from "@chakra-ui/react"
-import * as React from "react"
-import {
-  HiChevronLeft,
-  HiChevronRight,
-  HiMiniEllipsisHorizontal,
-} from "react-icons/hi2"
-import { LinkButton } from "./LinkButton"
-
-/**
- * Button variant types used across different pagination states.
- */
-interface ButtonVariantMap {
-  /** The variant of the pagination button when it is the current page. */
-  current: ButtonProps["variant"]
-  /** The default variant of the pagination button. */
-  default: ButtonProps["variant"]
-  /** The variant of the pagination button used to show an ellipsis. */
-  ellipsis: ButtonProps["variant"]
-}
-
-type PaginationVariant = "outline" | "solid" | "subtle"
-
-/**
- * Defines the context properties shared by all pagination components.
- */
-interface ButtonVariantContext {
-  size: ButtonProps["size"]
-   /** The mapping of pagination button states to Chakra UI variants. */
-  variantMap: ButtonVariantMap
-  /** Optional function to generate an `href` for link-based pagination. */
-  getHref?: (page: number) => string
-}
-
-const [RootPropsProvider, useRootProps] = createContext<ButtonVariantContext>({
-  name: "RootPropsProvider",
-})
-
-export interface PaginationRootProps
-  extends Omit<ChakraPagination.RootProps, "type"> {
-    /** The size of the pagination buttons. Defaults to "sm". */
-  size?: ButtonProps["size"]
-  /**
-   * The visual variant for the pagination. Could be "outline", "solid", or "subtle".
-   * Defaults to "outline".
-   */
-  variant?: PaginationVariant
-    /** Optional to generate an `href` for link-based pagination. */
-  getHref?: (page: number) => string
-}
-
-/**
- * Maps Pagination Variant to Chakra button variants,
- *  used in default, current, elipsis pagination states. */
-const variantMap: Record<PaginationVariant, ButtonVariantMap> = {
-  outline: { 
-    default: "ghost", 
-    ellipsis: "plain", 
-    current: "outline" 
-  },
-  solid: { 
-    default: "outline", 
-    ellipsis: "outline", 
-    current: "solid" 
-  },
-  subtle: { 
-    default: "ghost", 
-    ellipsis: "plain", 
-    current: "subtle" 
-  },
-}
-
-export const PaginationRoot = React.forwardRef<
-  HTMLDivElement,
-  PaginationRootProps
->(function PaginationRoot(props, ref) {
-  const { size = "sm", variant = "outline", getHref, ...rest } = props
-  return (
-    <RootPropsProvider
-      value={{ size, variantMap: variantMap[variant], getHref }}
-    >
-      <ChakraPagination.Root
-        ref={ref}
-        type={getHref ? "link" : "button"}
-        {...rest}
-      />
-    </RootPropsProvider>
-  )
-})
-
-/**
- * Represents an ellipsis item in the pagination, rendered whenever
- * there are pages omitted between visible ranges.
- */
-export const PaginationEllipsis = React.forwardRef<
-  HTMLDivElement,
-  ChakraPagination.EllipsisProps
->(function PaginationEllipsis(props, ref) {
-  const { size, variantMap } = useRootProps()
-  return (
-    <ChakraPagination.Ellipsis ref={ref} {...props} asChild>
-      <Button as="span" variant={variantMap.ellipsis} size={size}>
-        <HiMiniEllipsisHorizontal />
-      </Button>
-    </ChakraPagination.Ellipsis>
-  )
-})
-
-/**
- * Represents a single page item in the pagination.
- */
-export const PaginationItem = React.forwardRef<
-  HTMLButtonElement,
-  ChakraPagination.ItemProps
->(function PaginationItem(props, ref) {
-  const { page } = usePaginationContext()
-  const { size, variantMap, getHref } = useRootProps()
-
-  const current = page === props.value
-  const variant = current ? variantMap.current : variantMap.default
-
-  if (getHref) {
-    return (
-      <LinkButton href={getHref(props.value)} variant={variant} size={size}>
-        {props.value}
-      </LinkButton>
-    )
-  }
-
-  return (
-    <ChakraPagination.Item ref={ref} {...props} asChild>
-      <Button variant={variant} size={size}>
-        {props.value}
-      </Button>
-    </ChakraPagination.Item>
-  )
-})
-
-/**
- * The "Previous" button for pagination.
- */
-export const PaginationPrevTrigger = React.forwardRef<
-  HTMLButtonElement,
-  ChakraPagination.PrevTriggerProps
->(function PaginationPrevTrigger(props, ref) {
-  const { size, variantMap, getHref } = useRootProps()
-  const { previousPage } = usePaginationContext()
-
-  if (getHref) {
-    return (
-      <LinkButton
-        href={previousPage != null ? getHref(previousPage) : undefined}
-        variant={variantMap.default}
-        size={size}
-      >
-        <HiChevronLeft />
-      </LinkButton>
-    )
-  }
-
-  return (
-    <ChakraPagination.PrevTrigger ref={ref} asChild {...props}>
-      <IconButton variant={variantMap.default} size={size}>
-        <HiChevronLeft />
-      </IconButton>
-    </ChakraPagination.PrevTrigger>
-  )
-})
-
-export const PaginationNextTrigger = React.forwardRef<
-  HTMLButtonElement,
-  ChakraPagination.NextTriggerProps
->(function PaginationNextTrigger(props, ref) {
-  const { size, variantMap, getHref } = useRootProps()
-  const { nextPage } = usePaginationContext()
-
-  if (getHref) {
-    return (
-      <LinkButton
-        href={nextPage != null ? getHref(nextPage) : undefined}
-        variant={variantMap.default}
-        size={size}
-      >
-        <HiChevronRight />
-      </LinkButton>
-    )
-  }
-
-  return (
-    <ChakraPagination.NextTrigger ref={ref} asChild {...props}>
-      <IconButton variant={variantMap.default} size={size}>
-        <HiChevronRight />
-      </IconButton>
-    </ChakraPagination.NextTrigger>
-  )
-})
-
-export const PaginationItems = (props: React.HTMLAttributes<HTMLElement>) => {
-  return (
-    <ChakraPagination.Context>
-      {({ pages }) =>
-        pages.map((page, index) => {
-          return page.type === "ellipsis" ? (
-            <PaginationEllipsis key={index} index={index} {...props} />
-          ) : (
-            <PaginationItem
-              key={index}
-              type="page"
-              value={page.value}
-              {...props}
-            />
-          )
-        })
-      }
-    </ChakraPagination.Context>
-  )
-}
-
-interface PageTextProps extends TextProps {
-  format?: "short" | "compact" | "long"
-}
-
-/**
- * Renders the current page text in multiple possible formats:
- *
- * - **short**: e.g. `5 / 10`
- * - **compact**: e.g. `5 of 10`
- * - **long**: e.g. `41 - 50 of 100`
- */
-export const PaginationPageText = React.forwardRef<
-  HTMLParagraphElement,
-  PageTextProps
->(function PaginationPageText(props, ref) {
-  const { format = "compact", ...rest } = props
-  const { page, totalPages, pageRange, count } = usePaginationContext()
-  const content = React.useMemo(() => {
-    if (format === "short") return `${page} / ${totalPages}`
-    if (format === "compact") return `${page} of ${totalPages}`
-    return `${pageRange.start + 1} - ${pageRange.end} of ${count}`
-  }, [format, page, totalPages, pageRange, count])
-
-  return (
-    <Text fontWeight="medium" ref={ref} {...rest}>
-      {content}
-    </Text>
-  )
-})
\ No newline at end of file
diff --git a/frontend/src/grant-info/components/styles/Pagination.css b/frontend/src/grant-info/components/styles/Pagination.css
deleted file mode 100644
index f97ac39a..00000000
--- a/frontend/src/grant-info/components/styles/Pagination.css
+++ /dev/null
@@ -1,15 +0,0 @@
-.pagination {
-
-}
-
-.add-grant-button {
-    background: #F26624; /* Removes the default background */
-    display: flex; /* centering the + */
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    border-radius: 1rem;
-    font-size: 3rem;
-    height: 3rem;
-    width: 5rem;
-}
\ No newline at end of file