save to session storage on name click, apply to back button

CDCgov · Jan 8, 2025 · ac01ce0 · ac01ce0
1 parent 2d2ef9d
commit ac01ce0
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 23 deletions.
diff --git a/containers/ecr-viewer/src/app/components/BaseFilter.tsx b/containers/ecr-viewer/src/app/components/BaseFilter.tsx
@@ -9,7 +9,6 @@ import React, {
 import { Button } from "@trussworks/react-uswds";
 import { useRouter, usePathname, useSearchParams } from "next/navigation";
 import { FILTER_CLOSED, FILTER_SUBMITTED, FilterOpenContext } from "./Filters";
-import { saveToSessionStorage } from "./helpers";
 
 /**
  * Custom hook to manage query parameters in the URL (set, delete, and update). Hook always resets page back to 1.
@@ -62,7 +61,6 @@ export const useQueryParam = () => {
 
     // Update query params
     if (searchParams.get(key) !== updatedParams.get(key)) {
-      saveToSessionStorage("urlParams", updatedParams.toString());
       router.push(pathname + "?" + updatedParams.toString());
     }
   };

diff --git a/containers/ecr-viewer/src/app/components/EcrTableClient.tsx b/containers/ecr-viewer/src/app/components/EcrTableClient.tsx
@@ -8,7 +8,7 @@ import { usePathname, useSearchParams, useRouter } from "next/navigation";
 import { range } from "../view-data/utils/utils";
 import classNames from "classnames";
 import Link from "next/link";
-import { retrieveFromSessionStorage } from "./helpers";
+import { saveToSessionStorage } from "./helpers";
 
 type EcrTableClientProps = {
   data: EcrDisplay[];
@@ -67,7 +67,7 @@ const initialHeaders = [
   {
     id: "reportable_condition",
     value: "Reportable Condition",
-    className: "library-condition-colum",
+    className: "library-condition-column",
     dataSortable: false,
     sortDirection: "",
   },
@@ -107,18 +107,12 @@ export const EcrTableClient: React.FC<EcrTableClientProps> = ({
    * Updates the URL with the current sort preferences.
    */
   useEffect(() => {
-    const sessionUrlParams = retrieveFromSessionStorage("urlParams");
-    console.log("Retrieved session params: ", sessionUrlParams);
-    if (sessionUrlParams) {
-      router.push(`${pathname}?${sessionUrlParams}`);
-    } else {
-      const current = new URLSearchParams(Array.from(searchParams.entries()));
-      current.set("columnId", sortPreferences.columnId.toString());
-      current.set("direction", sortPreferences.direction.toString());
-      const search = current.toString();
-      const query = search ? `?${search}` : "";
-      router.push(`${pathname}${query}`);
-    }
+    const current = new URLSearchParams(Array.from(searchParams.entries()));
+    current.set("columnId", sortPreferences.columnId.toString());
+    current.set("direction", sortPreferences.direction.toString());
+    const search = current.toString();
+    const query = search ? `?${search}` : "";
+    router.push(`${pathname}${query}`);
   }, [sortPreferences]);
 
   /**
@@ -290,6 +284,8 @@ const DataRow = ({ item }: { item: EcrDisplay }) => {
   const patientReportDate = formatDate(patientReportDateObj);
   const patientReportTime = formatTime(patientReportDateObj);
 
+  const searchParams = useSearchParams();
+
   const conditionsList = (
     <ul className="ecr-table-list">
       {item.reportable_conditions.map((rc, index) => (
@@ -305,11 +301,14 @@ const DataRow = ({ item }: { item: EcrDisplay }) => {
       ))}
     </ul>
   );
+  const saveUrl = () => {
+    saveToSessionStorage("urlParams", searchParams.toString());
+  };
 
   return (
     <tr>
       <td>
-        <Link href={`/view-data?id=${item.ecrId}`}>
+        <Link onClick={saveUrl} href={`/view-data?id=${item.ecrId}`}>
           {patient_first_name} {patient_last_name}
         </Link>
         <br />

diff --git a/containers/ecr-viewer/src/app/components/LibrarySearch.tsx b/containers/ecr-viewer/src/app/components/LibrarySearch.tsx
@@ -3,7 +3,6 @@
 import { Search } from "@trussworks/react-uswds";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useCallback } from "react";
-import { saveToSessionStorage } from "./helpers";
 
 interface LibrarySearchProps {
   className?: string;
@@ -40,10 +39,6 @@ const LibrarySearch = ({ className, textBoxClassName }: LibrarySearchProps) => {
           e.currentTarget.elements.namedItem("search-field") as HTMLInputElement
         )?.value;
         if (searchParams.get("search") !== searchTerm) {
-          saveToSessionStorage(
-            "urlParams",
-            createQueryString("search", searchTerm),
-          );
           router.push(pathname + "?" + createQueryString("search", searchTerm));
         }
       }}

diff --git a/containers/ecr-viewer/src/app/view-data/components/BackButton.tsx b/containers/ecr-viewer/src/app/view-data/components/BackButton.tsx
@@ -3,6 +3,7 @@ import { Icon } from "@trussworks/react-uswds";
 import Link from "next/link";
 import classNames from "classnames";
 import { env } from "next-runtime-env";
+import { retrieveFromSessionStorage } from "../../components/helpers";
 
 interface BackButtonProps {
   className?: string;
@@ -19,11 +20,14 @@ interface BackButtonProps {
 export const BackButton = ({ className, iconClassName }: BackButtonProps) => {
   const isNonIntegratedViewer =
     env("NEXT_PUBLIC_NON_INTEGRATED_VIEWER") === "true";
+
+  const savedUrlParams = retrieveFromSessionStorage("urlParams");
+
   return (
     <>
       {isNonIntegratedViewer ? (
         <Link
-          href={"/"}
+          href={savedUrlParams ? `/?${savedUrlParams}` : "/"}
           className={classNames("display-inline-block", className)}
         >
           <Icon.ArrowBack