fix(edge-stacks): various custom template issues [BE-11414] (#189)

app/react/hooks/useParamState.ts

@@ -1,5 +1,6 @@
 import { useCurrentStateAndParams, useRouter } from '@uirouter/react';
 
+/** Only use when you need to use/update a single param at a time. Using this to update multiple params will cause the state to get out of sync. */
 export function useParamState<T>(
   param: string,
   parseParam: (param: string | undefined) => T | undefined = (param) =>
@@ -18,3 +19,36 @@ export function useParamState<T>(
     },
   ] as const;
 }
+
+/** Use this when you need to use/update multiple params at once. */
+export function useParamsState<T extends Record<string, unknown>>(
+  params: string[],
+  parseParams: (params: Record<string, string | undefined>) => T
+) {
+  const { params: stateParams } = useCurrentStateAndParams();
+  const router = useRouter();
+
+  const state = parseParams(
+    params.reduce(
+      (acc, param) => {
+        acc[param] = stateParams[param];
+        return acc;
+      },
+      {} as Record<string, string | undefined>
+    )
+  );
+
+  function setState(newState: Partial<T>) {
+    const newStateParams = Object.entries(newState).reduce(
+      (acc, [key, value]) => {
+        acc[key] = value;
+        return acc;
+      },
+      {} as Record<string, unknown>
+    );
+
+    router.stateService.go('.', newStateParams, { reload: false });
+  }
+
+  return [state, setState] as const;
+}