Boban/refactor qp

containers/ecr-viewer/e2e/ecr-library.spec.ts

@@ -20,7 +20,7 @@ test.describe("eCR Library Filtering", () => {
   const totalNumOfConditions = "24";
   test("Set reportable condition filter to anthrax", async ({ page }) => {
     await page.goto("/ecr-viewer");
-    await page.waitForURL("/ecr-viewer?columnId=date_created&direction=DESC");
+    await page.waitForURL("/ecr-viewer?itemsPerPage=25");
     await expect(page.getByTestId("filter-tag")).toContainText(
       totalNumOfConditions,
     );
@@ -38,7 +38,7 @@ test.describe("eCR Library Filtering", () => {
 
   test("Search should filter results ", async ({ page }) => {
     await page.goto("/ecr-viewer");
-    await page.waitForURL("/ecr-viewer?columnId=date_created&direction=DESC");
+    await page.waitForURL("/ecr-viewer?itemsPerPage=25");
     await expect(page.getByTestId("filter-tag")).toContainText(
       totalNumOfConditions,
     );
@@ -59,7 +59,7 @@ test.describe("eCR Library Filtering", () => {
     page,
   }) => {
     await page.goto("/ecr-viewer");
-    await page.waitForURL("/ecr-viewer?columnId=date_created&direction=DESC");
+    await page.waitForURL("/ecr-viewer?itemsPerPage=25");
     await expect(page.getByTestId("filter-tag")).toContainText(
       totalNumOfConditions,
     );
@@ -83,8 +83,8 @@ test.describe("eCR Library Filtering", () => {
 
   // BUG: When selecting eCRs per page so quickly after load the table doesn't get updated
   test.skip("Set 100 results per page", async ({ page }) => {
-    await page.goto("/ecr-viewer?columnId=date_created&direction=DESC");
-    await page.waitForURL("/ecr-viewer?columnId=date_created&direction=DESC");
+    await page.goto("/ecr-viewer?itemsPerPage=25");
+    await page.waitForURL("/ecr-viewer?itemsPerPage=25");
     await expect(page.getByTestId("filter-tag")).toContainText(
       totalNumOfConditions,
     );
@@ -104,7 +104,7 @@ test.describe("eCR Library Filtering", () => {
     page,
   }) => {
     await page.goto(
-      "/ecr-viewer?columnId=date_created&direction=DESC&itemsPerPage=100&page=1&condition=Anthrax+%28disorder%29&search=Cutla",
+      "/ecr-viewer?itemsPerPage=25&itemsPerPage=100&page=1&condition=Anthrax+%28disorder%29&search=Cutla",
     );
     await expect(page.getByTestId("textInput")).toHaveValue("Cutla");
     await expect(page.getByTestId("Select")).toHaveValue("100");

containers/ecr-viewer/package.json

@@ -61,6 +61,7 @@
     "next-auth": "^4.24.7",
     "next-router-mock": "^0.9.13",
     "next-runtime-env": "^3.2.2",
+    "nuqs": "^2.3.0",
     "pg-promise": "^11.6.0",
     "react": "^18",
     "react-dom": "^18",

containers/ecr-viewer/src/app/components/EcrPaginationWrapper.tsx

@@ -1,25 +1,15 @@
 "use client";
 
 import { Label, Select } from "@trussworks/react-uswds";
-import React, { ReactNode, useEffect, useState } from "react";
+import React, { ReactNode, useEffect } from "react";
 import { Pagination } from "@/app/components/Pagination";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { parseAsInteger, useQueryState } from "nuqs";
 
 interface EcrPaginationWrapperProps {
   totalCount: number;
   children: ReactNode;
 }
 
-interface UserPreferences {
-  itemsPerPage: number;
-  page: number;
-}
-
-const defaultPreferences = {
-  itemsPerPage: 25,
-  page: 1,
-};
-
 /**
  * Renders a list of eCR data with viewer.
  * @param props - The properties passed to the component.
@@ -31,41 +21,35 @@ const EcrPaginationWrapper = ({
   totalCount,
   children,
 }: EcrPaginationWrapperProps) => {
-  const searchParams = useSearchParams();
-  const router = useRouter();
-  const pathname = usePathname();
-
-  const currentPage = Number(searchParams.get("page")) || 1;
-  const [userPreferences, setUserPreferences] =
-    useState<UserPreferences>(defaultPreferences);
+  const [currentPage, setCurrentPage] = useQueryState(
+    "page",
+    parseAsInteger.withDefault(1),
+  );
+  const [itemsPerPage, setItemsPerPage] = useQueryState(
+    "itemsPerPage",
+    // Shallow = false to force server components to also reload
+    parseAsInteger.withOptions({ shallow: false }),
+  );
 
   useEffect(() => {
-    const userPreferencesString = localStorage.getItem("userPreferences");
-    if (userPreferencesString) {
-      const storedPrefs = JSON.parse(userPreferencesString);
-      setUserPreferences({ ...defaultPreferences, ...storedPrefs });
+    // if query parameter is not set, get from local storage
+    // otherwise save query paramerter value for next visit
+    if (!itemsPerPage) {
+      const localStorageItemsPerPage =
+        localStorage.getItem("itemsPerPage") ?? "25";
+      setItemsPerPage(Number(localStorageItemsPerPage));
+    } else {
+      localStorage.setItem("itemsPerPage", itemsPerPage.toString());
     }
   }, []);
 
-  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}`);
-  }, [userPreferences]);
-
   const totalPages =
-    totalCount > 0 ? Math.ceil(totalCount / userPreferences.itemsPerPage) : 1;
+    totalCount > 0 ? Math.ceil(totalCount / (itemsPerPage ?? 25)) : 1;
 
   const startIndex =
-    totalCount > 0 ? (currentPage - 1) * userPreferences.itemsPerPage + 1 : 0;
+    totalCount > 0 ? (currentPage - 1) * (itemsPerPage ?? 25) + 1 : 0;
 
-  const endIndex = Math.min(
-    currentPage * userPreferences.itemsPerPage,
-    totalCount,
-  );
+  const endIndex = Math.min(currentPage * (itemsPerPage ?? 25), totalCount);
 
   return (
     <div className="main-container height-ecrLibrary flex-column flex-align-center">
@@ -80,17 +64,6 @@ 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"}
@@ -104,18 +77,16 @@ const EcrPaginationWrapper = ({
           <Select
             id="input-select"
             name="input-select"
-            value={userPreferences.itemsPerPage}
+            value={itemsPerPage ?? 25}
             className={"styled width-11075 margin-top-0"}
             onChange={(e) => {
-              const updatedUserPreferences: UserPreferences = {
-                ...userPreferences,
-                itemsPerPage: +e.target.value,
-              };
-              setUserPreferences(updatedUserPreferences);
+              const updatedItemsPerPage = +e.target.value;
               localStorage.setItem(
-                "userPreferences",
-                JSON.stringify(updatedUserPreferences),
+                "itemsPerPage",
+                updatedItemsPerPage.toString(),
               );
+              setItemsPerPage(updatedItemsPerPage);
+              setCurrentPage(1);
             }}
           >
             <React.Fragment>