Cookies for storing pagination settings (#2899)

* Add page to userPref * fix * updoot tests * fix compile issue * pr change
CDCgov · Nov 14, 2024 · 86b63e1 · 86b63e1
1 parent e4bba13
commit 86b63e1
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 21 deletions.
diff --git a/containers/ecr-viewer/src/app/components/EcrPaginationWrapper.tsx b/containers/ecr-viewer/src/app/components/EcrPaginationWrapper.tsx
@@ -12,10 +12,12 @@ interface EcrPaginationWrapperProps {
 
 interface UserPreferences {
   itemsPerPage: number;
+  page: number;
 }
 
 const defaultPreferences = {
   itemsPerPage: 25,
+  page: 1,
 };
 
 /**
@@ -47,6 +49,7 @@ const EcrPaginationWrapper = ({
   useEffect(() => {
     const current = new URLSearchParams(Array.from(searchParams.entries()));
     current.set("itemsPerPage", userPreferences.itemsPerPage.toString());
+    current.set("page", userPreferences.page.toString());
     const search = current.toString();
     const query = search ? `?${search}` : "";
     router.push(`${pathname}${query}`);
@@ -76,6 +79,17 @@ const EcrPaginationWrapper = ({
           maxSlots={6}
           pathname={""}
           className={"flex-1"}
+          onClickPageNumber={(e, page) => {
+            const updatedUserPreferences: UserPreferences = {
+              ...userPreferences,
+              page,
+            };
+            setUserPreferences(updatedUserPreferences);
+            localStorage.setItem(
+              "userPreferences",
+              JSON.stringify(updatedUserPreferences),
+            );
+          }}
         />
         <div
           className={"display-flex flex-align-center flex-1 flex-justify-end"}

diff --git a/containers/ecr-viewer/src/app/tests/components/EcrPaginationWrapper.test.tsx b/containers/ecr-viewer/src/app/tests/components/EcrPaginationWrapper.test.tsx
@@ -62,7 +62,7 @@ describe("Pagination for EcrPaginationWrapper", () => {
         <br />
       </EcrPaginationWrapper>,
     );
-    expect(mockPush).toHaveBeenCalledExactlyOnceWith("?itemsPerPage=25");
+    expect(mockPush).toHaveBeenCalledExactlyOnceWith("?itemsPerPage=25&page=1");
   });
 
   it("should display 50 per page when items per page is set to 50", async () => {
@@ -78,7 +78,7 @@ describe("Pagination for EcrPaginationWrapper", () => {
     expect(screen.getByText("1"));
     expect(screen.getByText("2"));
     expect(screen.getByText("Showing 1-50 of 100 eCRs"));
-    expect(mockPush).toHaveBeenLastCalledWith("?itemsPerPage=50");
+    expect(mockPush).toHaveBeenLastCalledWith("?itemsPerPage=50&page=1");
   });
 
   it("should update local storage when items per page is set to 50", async () => {
@@ -93,14 +93,14 @@ describe("Pagination for EcrPaginationWrapper", () => {
 
     expect(localStorage.setItem).toHaveBeenCalledWith(
       "userPreferences",
-      JSON.stringify({ itemsPerPage: 50 }),
+      JSON.stringify({ itemsPerPage: 50, page: 1 }),
     );
   });
 
   it("should load 50 items per page if 50 was previously set", () => {
     const spyLocalStorage = jest.spyOn(Storage.prototype, "getItem");
     spyLocalStorage.mockImplementationOnce(() =>
-      JSON.stringify({ itemsPerPage: 50 }),
+      JSON.stringify({ itemsPerPage: 50, page: 1 }),
     );
     render(
       <EcrPaginationWrapper totalCount={100}>
@@ -109,7 +109,7 @@ describe("Pagination for EcrPaginationWrapper", () => {
     );
 
     expect(screen.getByText("Showing 1-50 of 100 eCRs")).toBeInTheDocument();
-    expect(mockPush).toHaveBeenLastCalledWith("?itemsPerPage=50");
+    expect(mockPush).toHaveBeenLastCalledWith("?itemsPerPage=50&page=1");
   });
 
   it("should display 51-51 on third page", async () => {

diff --git a/...ners/ecr-viewer/src/app/tests/components/__snapshots__/EcrPaginationWrapper.test.tsx.snap b/...ners/ecr-viewer/src/app/tests/components/__snapshots__/EcrPaginationWrapper.test.tsx.snap
@@ -60,47 +60,51 @@ exports[`EcrPaginationWrapper should match snapshot 1`] = `
           <li
             class="usa-pagination__item usa-pagination__page-no"
           >
-            <a
+            <button
               aria-current="page"
               aria-label="Page 1"
-              class="usa-pagination__button text-bold usa-current"
-              href="?page=1"
+              class="usa-button usa-button--unstyled usa-pagination__button text-bold usa-current"
+              data-testid="pagination-page-number"
+              type="button"
             >
               1
-            </a>
+            </button>
           </li>
           <li
             class="usa-pagination__item usa-pagination__page-no"
           >
-            <a
+            <button
               aria-label="Page 2"
-              class="usa-pagination__button text-bold"
-              href="?page=2"
+              class="usa-button usa-button--unstyled usa-pagination__button text-bold"
+              data-testid="pagination-page-number"
+              type="button"
             >
               2
-            </a>
+            </button>
           </li>
           <li
             class="usa-pagination__item usa-pagination__page-no"
           >
-            <a
+            <button
               aria-label="Page 3"
-              class="usa-pagination__button text-bold"
-              href="?page=3"
+              class="usa-button usa-button--unstyled usa-pagination__button text-bold"
+              data-testid="pagination-page-number"
+              type="button"
             >
               3
-            </a>
+            </button>
           </li>
           <li
             class="usa-pagination__item usa-pagination__page-no"
           >
-            <a
+            <button
               aria-label="Page 4"
-              class="usa-pagination__button text-bold"
-              href="?page=4"
+              class="usa-button usa-button--unstyled usa-pagination__button text-bold"
+              data-testid="pagination-page-number"
+              type="button"
             >
               4
-            </a>
+            </button>
           </li>
           <li
             class="usa-pagination__item usa-pagination__arrow"