Remove React Router's useNavigate dependency

app/scripts/components/common/catalog/controls/hooks/use-filters-with-query.ts

@@ -8,7 +8,7 @@ import { FilterActions, FilterAction, onFilterAction } from '../../utils';
 export interface UseFiltersWithQueryResult {
   search: string;
   taxonomies: Record<string, string[]> | Record<string, never>;
-  onAction: FilterAction
+  onAction: FilterAction;
 }
 
 // @TECH-DEBT: We have diverged ways of dealing with query parameters and need to consolidate them.
@@ -28,19 +28,26 @@ export function useFiltersWithURLAtom(): UseFiltersWithQueryResult {
   return {
     search,
     taxonomies,
-    onAction,
+    onAction
   };
 }
 
-  export function useFiltersWithQS({
-    navigate
-  }: {
-    navigate: any
-  }): UseFiltersWithQueryResult {
-
-    const useQsState = useQsStateCreator({
-      commit: navigate
-    });
+export function useFiltersWithQS(): UseFiltersWithQueryResult {
+  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(
     {
@@ -60,16 +67,16 @@ export function useFiltersWithURLAtom(): UseFiltersWithQueryResult {
     []
   );
 
-
   const onAction = useCallback<FilterAction>(
     (action, value) => {
-      onFilterAction(action, value, taxonomies, setSearch, setTaxonomies);},
+      onFilterAction(action, value, taxonomies, setSearch, setTaxonomies);
+    },
     [setSearch, setTaxonomies, taxonomies]
   );
 
   return {
-    search: search?? '',
-    taxonomies: taxonomies?? {},
-    onAction,
+    search: search ?? '',
+    taxonomies: taxonomies ?? {},
+    onAction
   };
-}
+}

app/scripts/components/data-catalog/container.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useNavigate, useLocation } from 'react-router';
+import { useLocation } from 'react-router';
 import { getString } from 'veda';
 import { getAllDatasetsProps } from '$utils/veda-data';
 import CatalogView from '$components/common/catalog';
@@ -21,13 +21,18 @@ import SmartLink from '$components/common/smart-link';
 export default function DataCatalogContainer() {
   const allDatasets = getAllDatasetsProps(veda_faux_module_datasets);
   const pathname = useLocation().pathname;
-  const navigate = useNavigate();
-  const controlVars = useFiltersWithQS({navigate: navigate});
+  const controlVars = useFiltersWithQS();
 
   return (
     <PageMainContent>
-      <LayoutProps title='Data Catalog' description={getString('dataCatalogBanner').other} />
-      <PageHero title='Data Catalog' description={getString('dataCatalogBanner').other} />
+      <LayoutProps
+        title='Data Catalog'
+        description={getString('dataCatalogBanner').other}
+      />
+      <PageHero
+        title='Data Catalog'
+        description={getString('dataCatalogBanner').other}
+      />
       <FeaturedDatasets />
       <CatalogView
         datasets={allDatasets}
@@ -40,4 +45,4 @@ export default function DataCatalogContainer() {
       />
     </PageMainContent>
   );
-}
+}

app/scripts/components/stories/hub/container.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { useNavigate } from 'react-router';
 
 import { stories, getString } from 'veda';
 import HubContent from './hub-content';
@@ -19,10 +18,13 @@ import {
 
 import SmartLink from '$components/common/smart-link';
 
-const allStories = Object.values(stories).map((d) => d!.data).filter(d => !d.isHidden).map((d) => ({ ...d, path: getStoryPath(d)}));
+const allStories = Object.values(stories)
+  .map((d) => d!.data)
+  .filter((d) => !d.isHidden)
+  .map((d) => ({ ...d, path: getStoryPath(d) }));
 
 function StoriesHubContainer() {
-  const controlVars = useFiltersWithQS({navigate: useNavigate()});
+  const controlVars = useFiltersWithQS();
   return (
     <PageMainContent>
       <LayoutProps
@@ -40,13 +42,19 @@ function StoriesHubContainer() {
         <HubContent
           allStories={allStories}
           onFilterchanges={() => controlVars}
-          linkProperties={{ LinkElement: SmartLink, pathAttributeKeyName: 'to'}}
+          linkProperties={{
+            LinkElement: SmartLink,
+            pathAttributeKeyName: 'to'
+          }}
           pathname={STORIES_PATH}
-          storiesString={{one: getString('stories').one,other: getString('stories').other}}
+          storiesString={{
+            one: getString('stories').one,
+            other: getString('stories').other
+          }}
         />
       </ContentOverride>
     </PageMainContent>
   );
 }
 
-export default StoriesHubContainer;
+export default StoriesHubContainer;

app/scripts/components/stories/hub/hub-content.tsx

@@ -21,7 +21,11 @@ import {
 } from '$components/common/fold';
 import { useSlidingStickyHeaderProps } from '$components/common/layout-root/useSlidingStickyHeaderProps';
 import { Card } from '$components/common/card';
-import { CardListGrid, CardMeta, CardTopicsList } from '$components/common/card/styles';
+import {
+  CardListGrid,
+  CardMeta,
+  CardTopicsList
+} from '$components/common/card/styles';
 import EmptyHub from '$components/common/empty-hub';
 import { prepareDatasets } from '$components/common/catalog/prepare-datasets';
 
@@ -183,7 +187,7 @@ export default function HubContent(props: HubContentProps) {
                   linkLabel='View more'
                   linkProperties={{
                     ...linkProperties,
-                    linkTo: `${d.asLink?.url ?? d.path}`,
+                    linkTo: `${d.asLink?.url ?? d.path}`
                   }}
                   title={
                     <TextHighlight value={search} disabled={search.length < 3}>