Merge pull request #3540 from HHS/OPS-3524/can_list_pagination_fix

fix: fixed can list table pagination bug

frontend/cypress/e2e/canList.cy.js

@@ -76,6 +76,16 @@ describe("CAN List", () => {
             .find("svg")
             .should("have.attr", "aria-hidden", "true");
 
+        // switch fiscal year to 2025
+        cy.get("#fiscal-year-select").select("2025");
+        cy.wait(500);
+        cy.get("tbody").find("tr").should("have.length", 4);
+
+        // switch fiscal year to 2023
+        cy.get("#fiscal-year-select").select("2023");
+        cy.wait(500);
+        cy.get("li").should("have.class", "usa-pagination__item").contains("2").click();
+
         // go back to the first page
         cy.get("li").should("have.class", "usa-pagination__item").contains("1").click();
         cy.get("button").should("have.class", "usa-current").contains("1");

frontend/src/components/CANs/CANBudgetLineTable/CANBudgetLineTable.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { calculatePercent, formatDateNeeded } from "../../../helpers/utils";
 import Table from "../../UI/Table";
 import { CAN_HEADERS, PORTFOLIO_HEADERS } from "./CABBudgetLineTable.constants";
@@ -12,6 +12,7 @@ import PaginationNav from "../../UI/PaginationNav";
  * @typedef {Object} CANBudgetLineTableProps
  * @property {BudgetLine[]} budgetLines
  * @property {number} totalFunding
+ * @property {number} fiscalYear
  * @property {'portfolio' | 'can'} [tableType]
  */
 
@@ -20,12 +21,16 @@ import PaginationNav from "../../UI/PaginationNav";
  * @param {CANBudgetLineTableProps} props
  * @returns  {JSX.Element} - The component JSX.
  */
-const CANBudgetLineTable = ({ budgetLines, totalFunding, tableType = "can" }) => {
+const CANBudgetLineTable = ({ budgetLines, totalFunding, fiscalYear, tableType = "can" }) => {
     const ITEMS_PER_PAGE = import.meta.env.MODE === "production" ? 25 : 3;
     const [currentPage, setCurrentPage] = React.useState(1);
     let visibleBudgetLines = [...budgetLines];
     visibleBudgetLines = visibleBudgetLines.slice((currentPage - 1) * ITEMS_PER_PAGE, currentPage * ITEMS_PER_PAGE);
 
+    useEffect(() => {
+        setCurrentPage(1);
+    }, [fiscalYear]);
+
     if (budgetLines.length === 0) {
         return <p className="text-center">No budget lines have been added to this CAN.</p>;
     }

frontend/src/components/CANs/CANTable/CANTable.jsx

@@ -1,5 +1,5 @@
 import PropTypes from "prop-types";
-import React from "react";
+import React, { useEffect } from "react";
 import { NO_DATA } from "../../../constants";
 import PaginationNav from "../../UI/PaginationNav";
 import { findFundingBudgetBudgetByFiscalYear, formatObligateBy } from "./CANTable.helpers";
@@ -22,6 +22,10 @@ const CANTable = ({ cans, fiscalYear }) => {
     let cansPerPage = [...cans];
     cansPerPage = cansPerPage.slice((currentPage - 1) * CANS_PER_PAGE, currentPage * CANS_PER_PAGE);
 
+    useEffect(() => {
+        setCurrentPage(1);
+    }, [fiscalYear]);
+
     if (cans.length === 0) {
         return <p className="text-center">No CANs found</p>;
     }

frontend/src/components/Portfolios/PortfolioSpending/PortfolioSpending.jsx

@@ -90,6 +90,7 @@ const PortfolioSpending = () => {
             <CANBudgetLineTable
                 budgetLines={budgetLineItems}
                 totalFunding={totalFunding}
+                fiscalYear={fiscalYear}
                 tableType="portfolio"
             />
         </>

frontend/src/pages/cans/detail/CanSpending.jsx

@@ -106,6 +106,7 @@ const CanSpending = ({
             <CANBudgetLineTable
                 budgetLines={budgetLines}
                 totalFunding={totalFunding}
+                fiscalYear={fiscalYear}
             />
         </article>
     );