wip, refactoring param update functions

CDCgov · Jan 9, 2025 · 22d56d1 · 22d56d1
1 parent 343c944
commit 22d56d1
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 14 deletions.
diff --git a/containers/ecr-viewer/src/app/components/BaseFilter.tsx b/containers/ecr-viewer/src/app/components/BaseFilter.tsx
@@ -37,8 +37,6 @@ export const useQueryParam = () => {
     (params: URLSearchParams, key: string) => {
       params.set("page", "1");
       params.delete(key);
-
-      pushQueryUpdate(params, [key]);
       return params;
     },
     [searchParams],
@@ -65,8 +63,8 @@ export const useQueryParam = () => {
     const updatedParams = isDefault
       ? deleteQueryParam(params, key)
       : setQueryParam(params, key, value);
-    // Update query params
-    pushQueryUpdate(updatedParams, [key]);
+
+    return updatedParams;
   };
 
   return { searchParams, deleteQueryParam, updateQueryParam, pushQueryUpdate };

diff --git a/containers/ecr-viewer/src/app/components/Filters.tsx b/containers/ecr-viewer/src/app/components/Filters.tsx
@@ -135,7 +135,7 @@ const Filters = () => {
  * - Updates the browser's query string when the filter is applied.
  */
 const FilterReportableConditions = () => {
-  const { searchParams, updateQueryParam } = useQueryParam();
+  const { searchParams, updateQueryParam, pushQueryUpdate } = useQueryParam();
   const params = new URLSearchParams(searchParams.toString());
   const [filterConditions, setFilterConditions] = useState<{
     [key: string]: boolean;
@@ -223,14 +223,15 @@ const FilterReportableConditions = () => {
           (key) => filterConditions[key] === true,
         ).length || "0"
       }
-      submitHandler={() =>
-        updateQueryParam(
+      submitHandler={() => {
+        const updatedParams = updateQueryParam(
           params,
           ParamName.Condition,
           filterConditions,
           isAllSelected,
-        )
-      }
+        );
+        pushQueryUpdate(updatedParams, [ParamName.Condition]);
+      }}
     >
       {/* Select All checkbox */}
       <div className="display-flex flex-column">
@@ -289,7 +290,8 @@ const FilterReportableConditions = () => {
  * - Updates the browser's query string when the filter is applied.
  */
 const FilterByDate = () => {
-  const { searchParams, deleteQueryParam, updateQueryParam } = useQueryParam();
+  const { searchParams, deleteQueryParam, updateQueryParam, pushQueryUpdate } =
+    useQueryParam();
 
   const [filterDateOption, setFilterDateOption] =
     useState<string>(DEFAULT_DATE_RANGE);
@@ -368,21 +370,30 @@ const FilterByDate = () => {
         return;
       }
       const datesParam = `${startDate}|${endDate}`;
-      updateQueryParam(
+      let updatedParams: URLSearchParams;
+      updatedParams = updateQueryParam(
         params,
         ParamName.DateRange,
         filterDateOption,
         isFilterDateDefault,
       );
-      updateQueryParam(params, ParamName.Dates, datesParam, false);
+      updatedParams = updateQueryParam(
+        updatedParams,
+        ParamName.Dates,
+        datesParam,
+        false,
+      );
+      pushQueryUpdate(updatedParams, [ParamName.DateRange, ParamName.Dates]);
     } else {
-      updateQueryParam(
+      let updatedParams: URLSearchParams;
+      updatedParams = updateQueryParam(
         params,
         ParamName.DateRange,
         filterDateOption,
         isFilterDateDefault,
       );
-      deleteQueryParam(params, ParamName.Dates);
+      updatedParams = deleteQueryParam(updatedParams, ParamName.Dates);
+      pushQueryUpdate(updatedParams, [ParamName.DateRange, ParamName.Dates]);
       setStartDate("");
       setEndDate("");
     }