refactor: change API for useSearchParamsKey

coder · Parkreiner · Mar 8, 2024 · Feb 19, 2024 · Feb 19, 2024 · Feb 19, 2024
commit afffb269cdebed820bf2f9cb8d46d7448226965d
@@ -13,7 +13,7 @@ import { act, waitFor } from "@testing-library/react";
 describe(useSearchParamsKey.name, () => {
   it("Returns out a default value of an empty string if the key does not exist in URL", async () => {
     const { result } = await renderHookWithAuth(
-      () => useSearchParamsKey("blah"),
+      () => useSearchParamsKey({ key: "blah" }),
       { routingOptions: { route: `/` } },
     );
 
@@ -23,7 +23,7 @@ describe(useSearchParamsKey.name, () => {
   it("Uses the 'defaultValue' config override if provided", async () => {
     const defaultValue = "dogs";
     const { result } = await renderHookWithAuth(
-      () => useSearchParamsKey("blah", { defaultValue }),
+      () => useSearchParamsKey({ key: "blah", defaultValue }),
       { routingOptions: { route: `/` } },
     );
 
@@ -34,11 +34,12 @@ describe(useSearchParamsKey.name, () => {
     const key = "blah";
     const value = "cats";
 
-    const { result } = await renderHookWithAuth(() => useSearchParamsKey(key), {
-      routingOptions: {
-        route: `/?${key}=${value}`,
+    const { result } = await renderHookWithAuth(
+      () => useSearchParamsKey({ key }),
+      {
+        routingOptions: { route: `/?${key}=${value}` },
       },
-    });
+    );
 
     expect(result.current.value).toEqual(value);
   });
@@ -48,7 +49,7 @@ describe(useSearchParamsKey.name, () => {
     const initialValue = "cats";
 
     const { result, getLocationSnapshot } = await renderHookWithAuth(
-      () => useSearchParamsKey(key),
+      () => useSearchParamsKey({ key }),
       {
         routingOptions: {
           route: `/?${key}=${initialValue}`,
@@ -69,7 +70,7 @@ describe(useSearchParamsKey.name, () => {
     const initialValue = "cats";
 
     const { result, getLocationSnapshot } = await renderHookWithAuth(
-      () => useSearchParamsKey(key),
+      () => useSearchParamsKey({ key }),
       {
         routingOptions: {
           route: `/?${key}=${initialValue}`,
@@ -91,7 +92,7 @@ describe(useSearchParamsKey.name, () => {
     const initialMutableValue = "mutable";
 
     const { result, rerender, getLocationSnapshot } = await renderHookWithAuth(
-      ({ key }) => useSearchParamsKey(key),
+      ({ key }) => useSearchParamsKey({ key }),
       {
         routingOptions: {
           route: `/?${readonlyKey}=${initialReadonlyValue}&${mutableKey}=${initialMutableValue}`,
@@ -105,7 +106,7 @@ describe(useSearchParamsKey.name, () => {
 
     const swapValue = "dogs";
     rerender({ key: mutableKey });
-    act(() => result.current.onValueChange(swapValue));
+    void act(() => result.current.onValueChange(swapValue));
     await waitFor(() => expect(result.current.value).toEqual(swapValue));
 
     const { search } = getLocationSnapshot();

@@ -1,8 +1,8 @@
-import { useCallback } from "react";
 import { useSearchParams } from "react-router-dom";
-import { useEffectEvent } from "./hookPolyfills";
 
-export type UseSearchParamKeyConfig = Readonly<{
+export type UseSearchParamsKeyConfig = Readonly<{
+  key: string;
+  searchParams?: URLSearchParams;
   defaultValue?: string;
   replace?: boolean;
 }>;
@@ -14,39 +14,28 @@ export type UseSearchParamKeyResult = Readonly<{
 }>;
 
 export const useSearchParamsKey = (
-  key: string,
-  config: UseSearchParamKeyConfig = {},
+  config: UseSearchParamsKeyConfig,
 ): UseSearchParamKeyResult => {
-  const { defaultValue = "", replace = true } = config;
-  const [searchParams, setSearchParams] = useSearchParams();
-  const stableSetSearchParams = useEffectEvent(setSearchParams);
+  // Cannot use function update form for setSearchParams, because by default, it
+  // will always be linked to innerSearchParams, ignoring the config's params
+  const [innerSearchParams, setSearchParams] = useSearchParams();
 
-  const onValueChange = useCallback(
-    (newValue: string) => {
-      stableSetSearchParams(
-        (currentParams) => {
-          currentParams.set(key, newValue);
-          return currentParams;
-        },
-        { replace },
-      );
-    },
-    [stableSetSearchParams, key, replace],
-  );
-
-  const removeValue = useCallback(() => {
-    stableSetSearchParams(
-      (currentParams) => {
-        currentParams.delete(key);
-        return currentParams;
-      },
-      { replace },
-    );
-  }, [stableSetSearchParams, key, replace]);
+  const {
+    key,
+    searchParams = innerSearchParams,
+    defaultValue = "",
+    replace = true,
+  } = config;
 
   return {
     value: searchParams.get(key) ?? defaultValue,
-    onValueChange,
-    removeValue,
+    onValueChange: (newValue) => {
+      searchParams.set(key, newValue);
+      setSearchParams(searchParams, { replace });
+    },
+    removeValue: () => {
+      searchParams.delete(key);
+      setSearchParams(searchParams, { replace: true });
+    },
   };
 };
@@ -89,7 +89,7 @@ export const Workspace: FC<WorkspaceProps> = ({
   const transitionStats =
     template !== undefined ? ActiveTransition(template, workspace) : undefined;
 
-  const sidebarOption = useSearchParamsKey("sidebar");
+  const sidebarOption = useSearchParamsKey({ key: "sidebar" });
   const setSidebarOption = (newOption: string) => {
     if (sidebarOption.value === newOption) {
       sidebarOption.removeValue();

@@ -14,7 +14,7 @@ export const resourceOptionValue = (resource: WorkspaceResource) => {
 // refactoring. Consider revisiting this solution in the future for a more
 // robust implementation.
 export const useResourcesNav = (resources: WorkspaceResource[]) => {
-  const resourcesNav = useSearchParamsKey("resources");
+  const resourcesNav = useSearchParamsKey({ key: "resources" });
   const isSelected = useCallback(
     (resource: WorkspaceResource) => {
       return resourceOptionValue(resource) === resourcesNav.value;