From 34d878f44cec13464fd1e087173fed010d60eed3 Mon Sep 17 00:00:00 2001 From: Vitor George Date: Thu, 21 Nov 2024 13:38:43 +0000 Subject: [PATCH] Add custom function to commit search params using API that also works for NextJS --- .../controls/hooks/use-filters-with-query.ts | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/app/scripts/components/common/catalog/controls/hooks/use-filters-with-query.ts b/app/scripts/components/common/catalog/controls/hooks/use-filters-with-query.ts index cffefdc1a..1d6f1bd75 100644 --- a/app/scripts/components/common/catalog/controls/hooks/use-filters-with-query.ts +++ b/app/scripts/components/common/catalog/controls/hooks/use-filters-with-query.ts @@ -33,7 +33,21 @@ export function useFiltersWithURLAtom(): UseFiltersWithQueryResult { } export function useFiltersWithQS(): UseFiltersWithQueryResult { - const useQsState = useQsStateCreator(); + const useQsState = useQsStateCreator({ + commit: ({ search }) => { + if (typeof window !== 'undefined') { + const currentUrl = new URL(window.location.href); + const searchParams = search.startsWith('?') ? search.slice(1) : search; + currentUrl.search = searchParams; + window.history.pushState({}, '', currentUrl.toString()); + } else { + // eslint-disable-next-line no-console + console.log( + 'useFiltersWithQS: window is undefined, query string will update.' + ); + } + } + }); const [search, setSearch] = useQsState.memo( {