Add pagination to eCR Viewer homepage (#1889)

* add pagination element and CSS class

* update number of items per page, update snapshot tests, add pagination unit tests

* fix spacing between table and pagination

* update snapshot test

containers/ecr-viewer/src/app/ListEcrViewer.tsx

@@ -1,5 +1,9 @@
+"use client";
+
 import { Table } from "@trussworks/react-uswds";
 import { ListEcr } from "@/app/api/services/listEcrDataService";
+import { useState } from "react";
+import { Pagination } from "@trussworks/react-uswds";
 
 interface ListEcrViewerProps {
   listFhirData: ListEcr;
@@ -15,8 +19,24 @@ export default function ListECRViewer({
   listFhirData,
 }: ListEcrViewerProps): JSX.Element {
   const header = ["eCR ID", "Stored Date"];
+  const [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 25;
+  const totalPages = Math.ceil(listFhirData.length / itemsPerPage);
+
+  const handlePageChange = (pageNumber: number) => {
+    setCurrentPage(pageNumber);
+    renderPage(pageNumber);
+  };
+
+  const renderPage = (pageNumber: number) => {
+    const startIndex = (pageNumber - 1) * itemsPerPage;
+    const endIndex = startIndex + itemsPerPage;
+    const pageData = listFhirData.slice(startIndex, endIndex);
+    return renderListEcrTableData(pageData);
+  };
+
   return (
-    <div className="content-wrapper">
+    <div className="homepage-wrapper">
       <Table
         bordered={false}
         fullWidth={true}
@@ -32,8 +52,21 @@ export default function ListECRViewer({
             ))}
           </tr>
         </thead>
-        <tbody>{renderListEcrTableData(listFhirData)}</tbody>
+        <tbody>{renderPage(currentPage)}</tbody>
       </Table>
+      <Pagination
+        currentPage={currentPage}
+        totalPages={totalPages}
+        pathname={""}
+        onClickNext={() => handlePageChange(currentPage + 1)}
+        onClickPrevious={() => handlePageChange(currentPage - 1)}
+        onClickPageNumber={(
+          _event: React.MouseEvent<HTMLButtonElement>,
+          page: number,
+        ) => {
+          handlePageChange(page);
+        }}
+      />
     </div>
   );
 }

containers/ecr-viewer/src/app/tests/components/ListEcrViewer.test.tsx

@@ -1,4 +1,4 @@
-import { render } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { axe } from "jest-axe";
 import ListECRViewer from "@/app/ListEcrViewer";
 
@@ -28,3 +28,50 @@ describe("Home Page, ListECRViewer", () => {
     expect(await axe(container)).toHaveNoViolations();
   });
 });
+
+describe("Pagination for home page", () => {
+  const listFhirData = Array.from({ length: 51 }, (_, i) => ({
+    ecrId: `id-${i + 1}`,
+    dateModified: `2021-01-0${(i % 9) + 1}`,
+  }));
+  beforeEach(() => {
+    render(<ListECRViewer listFhirData={listFhirData} />);
+  });
+
+  it("should render first page correctly", () => {
+    const rows = screen.getAllByRole("row");
+    expect(rows).toHaveLength(26); // 25 data rows + 1 header row
+  });
+
+  it("should navigate to the next page correctly using the Next button", () => {
+    const nextButton = screen.getByTestId("pagination-next");
+    fireEvent.click(nextButton);
+
+    const rows = screen.getAllByRole("row");
+    expect(rows).toHaveLength(26);
+    expect(screen.getByText("id-26")).toBeInTheDocument();
+    expect(screen.getByText("id-50")).toBeInTheDocument();
+  });
+
+  it("should navigate to the previous page correctly using the Previous button", () => {
+    const nextButton = screen.getByTestId("pagination-next");
+    fireEvent.click(nextButton); // Must navigate past 1st page so Previous button can display
+
+    const previousButton = screen.getByTestId("pagination-previous");
+    fireEvent.click(previousButton);
+
+    const rows = screen.getAllByRole("row");
+    expect(rows).toHaveLength(26);
+    expect(screen.getByText("id-1")).toBeInTheDocument();
+    expect(screen.getByText("id-25")).toBeInTheDocument();
+  });
+
+  it("should navigate to a specific page correctly when clicking page button", () => {
+    const page3Button = screen.getByText("3", { selector: "button" });
+    fireEvent.click(page3Button);
+
+    const rows = screen.getAllByRole("row");
+    expect(rows).toHaveLength(2);
+    expect(screen.getByText("id-51")).toBeInTheDocument();
+  });
+});

containers/ecr-viewer/src/app/tests/components/__snapshots__/ListEcrViewer.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Home Page, ListECRViewer should match snapshot 1`] = `
 <div>
   <div
-    class="content-wrapper"
+    class="homepage-wrapper"
   >
     <table
       class="usa-table usa-table--borderless width-full table-homepage-list"
@@ -62,6 +62,28 @@ exports[`Home Page, ListECRViewer should match snapshot 1`] = `
         </tr>
       </tbody>
     </table>
+    <nav
+      aria-label="Pagination"
+      class="usa-pagination"
+    >
+      <ul
+        class="usa-pagination__list"
+      >
+        <li
+          class="usa-pagination__item usa-pagination__page-no"
+        >
+          <button
+            aria-current="page"
+            aria-label="Page 1"
+            class="usa-button usa-button--unstyled usa-pagination__button usa-current"
+            data-testid="pagination-page-number"
+            type="button"
+          >
+            1
+          </button>
+        </li>
+      </ul>
+    </nav>
   </div>
 </div>
 `;

containers/ecr-viewer/src/styles/custom-styles.scss

@@ -199,6 +199,24 @@ td {
   font-weight: bold;
 }
 
+.homepage-wrapper {
+  display: flex;
+  max-width: 1440px;
+  gap: 48px;
+  overflow: visible;
+  align-items: center;
+  flex-wrap: wrap;
+  flex-direction: column;
+
+  .usa-table {
+    margin-bottom: 0 !important;
+  }
+
+  .usa-pagination {
+    margin-top: 0 !important;
+  }
+}
+
 .main-container {
   display: flex;
   justify-content: center;