diff --git a/containers/ecr-viewer/src/app/components/EcrPaginationWrapper.tsx b/containers/ecr-viewer/src/app/components/EcrPaginationWrapper.tsx index a5df4c90af..71daf387ab 100644 --- 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), + ); + }} />
{
, ); - 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( @@ -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/containers/ecr-viewer/src/app/tests/components/__snapshots__/EcrPaginationWrapper.test.tsx.snap b/containers/ecr-viewer/src/app/tests/components/__snapshots__/EcrPaginationWrapper.test.tsx.snap index c3b324a21d..3a7533bb4b 100644 --- a/containers/ecr-viewer/src/app/tests/components/__snapshots__/EcrPaginationWrapper.test.tsx.snap +++ b/containers/ecr-viewer/src/app/tests/components/__snapshots__/EcrPaginationWrapper.test.tsx.snap @@ -60,47 +60,51 @@ exports[`EcrPaginationWrapper should match snapshot 1`] = `
  • - 1 - +
  • - 2 - +
  • - 3 - +
  • - 4 - +