From 51e61c0d72cae5ea213028609ad510c4f8abb674 Mon Sep 17 00:00:00 2001 From: angelathe Date: Tue, 21 May 2024 14:31:20 -0700 Subject: [PATCH 1/4] add pagination element and CSS class --- .../ecr-viewer/src/app/ListEcrViewer.tsx | 37 ++++++++++++++++++- .../ecr-viewer/src/styles/custom-styles.scss | 10 +++++ 2 files changed, 45 insertions(+), 2 deletions(-) diff --git a/containers/ecr-viewer/src/app/ListEcrViewer.tsx b/containers/ecr-viewer/src/app/ListEcrViewer.tsx index 814f539832..7c88d09b86 100644 --- a/containers/ecr-viewer/src/app/ListEcrViewer.tsx +++ b/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 = 5; // TODO: Change number of items per page + 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 ( -
+
- {renderListEcrTableData(listFhirData)} + {renderPage(currentPage)}{" "}
+ handlePageChange(currentPage + 1)} + onClickPrevious={() => handlePageChange(currentPage - 1)} + onClickPageNumber={( + _event: React.MouseEvent, + page: number, + ) => { + handlePageChange(page); + }} + />
); } diff --git a/containers/ecr-viewer/src/styles/custom-styles.scss b/containers/ecr-viewer/src/styles/custom-styles.scss index 4c9a96e030..aa64cb554d 100644 --- a/containers/ecr-viewer/src/styles/custom-styles.scss +++ b/containers/ecr-viewer/src/styles/custom-styles.scss @@ -199,6 +199,16 @@ td { font-weight: bold; } +.homepage-wrapper { + display: flex; + max-width: 1440px; + gap: 48px; + overflow: visible; + align-items: center; + flex-wrap: wrap; + flex-direction: column; +} + .main-container { display: flex; justify-content: center; From f0646d902345a7bee025d826ff1922cca20b7c5b Mon Sep 17 00:00:00 2001 From: angelathe Date: Wed, 22 May 2024 12:10:55 -0700 Subject: [PATCH 2/4] update number of items per page, update snapshot tests, add pagination unit tests --- .../ecr-viewer/src/app/ListEcrViewer.tsx | 2 +- .../tests/components/ListEcrViewer.test.tsx | 49 ++++++++++++++++++- .../__snapshots__/ListEcrViewer.test.tsx.snap | 25 +++++++++- 3 files changed, 73 insertions(+), 3 deletions(-) diff --git a/containers/ecr-viewer/src/app/ListEcrViewer.tsx b/containers/ecr-viewer/src/app/ListEcrViewer.tsx index 7c88d09b86..b51c6d5f33 100644 --- a/containers/ecr-viewer/src/app/ListEcrViewer.tsx +++ b/containers/ecr-viewer/src/app/ListEcrViewer.tsx @@ -20,7 +20,7 @@ export default function ListECRViewer({ }: ListEcrViewerProps): JSX.Element { const header = ["eCR ID", "Stored Date"]; const [currentPage, setCurrentPage] = useState(1); - const itemsPerPage = 5; // TODO: Change number of items per page + const itemsPerPage = 25; const totalPages = Math.ceil(listFhirData.length / itemsPerPage); const handlePageChange = (pageNumber: number) => { diff --git a/containers/ecr-viewer/src/app/tests/components/ListEcrViewer.test.tsx b/containers/ecr-viewer/src/app/tests/components/ListEcrViewer.test.tsx index d52b777487..64802b11b9 100644 --- a/containers/ecr-viewer/src/app/tests/components/ListEcrViewer.test.tsx +++ b/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(); + }); + + 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(); + }); +}); diff --git a/containers/ecr-viewer/src/app/tests/components/__snapshots__/ListEcrViewer.test.tsx.snap b/containers/ecr-viewer/src/app/tests/components/__snapshots__/ListEcrViewer.test.tsx.snap index 52d1abc502..03e0c1dcb1 100644 --- a/containers/ecr-viewer/src/app/tests/components/__snapshots__/ListEcrViewer.test.tsx.snap +++ b/containers/ecr-viewer/src/app/tests/components/__snapshots__/ListEcrViewer.test.tsx.snap @@ -3,7 +3,7 @@ exports[`Home Page, ListECRViewer should match snapshot 1`] = `
+
+
`; From b753baf0c42b84782a9b7a4cfc2631193f98dd81 Mon Sep 17 00:00:00 2001 From: angelathe Date: Wed, 22 May 2024 14:58:00 -0700 Subject: [PATCH 3/4] fix spacing between table and pagination --- containers/ecr-viewer/src/app/ListEcrViewer.tsx | 2 +- containers/ecr-viewer/src/styles/custom-styles.scss | 8 ++++++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/containers/ecr-viewer/src/app/ListEcrViewer.tsx b/containers/ecr-viewer/src/app/ListEcrViewer.tsx index b51c6d5f33..e02159d217 100644 --- a/containers/ecr-viewer/src/app/ListEcrViewer.tsx +++ b/containers/ecr-viewer/src/app/ListEcrViewer.tsx @@ -52,7 +52,7 @@ export default function ListECRViewer({ ))} - {renderPage(currentPage)}{" "} + {renderPage(currentPage)} Date: Wed, 22 May 2024 22:00:25 -0700 Subject: [PATCH 4/4] update snapshot test --- .../tests/components/__snapshots__/ListEcrViewer.test.tsx.snap | 1 - 1 file changed, 1 deletion(-) diff --git a/containers/ecr-viewer/src/app/tests/components/__snapshots__/ListEcrViewer.test.tsx.snap b/containers/ecr-viewer/src/app/tests/components/__snapshots__/ListEcrViewer.test.tsx.snap index 03e0c1dcb1..f8992b3146 100644 --- a/containers/ecr-viewer/src/app/tests/components/__snapshots__/ListEcrViewer.test.tsx.snap +++ b/containers/ecr-viewer/src/app/tests/components/__snapshots__/ListEcrViewer.test.tsx.snap @@ -61,7 +61,6 @@ exports[`Home Page, ListECRViewer should match snapshot 1`] = ` -