Combine hooks to hopefully deprecate useBrowserControls (#1022)

@hanbyul-here it might be cleaner to just still use the `useCatalogView`
hook. Just moved the qs-state logic over here instead and exposed it
from this hook since Actions are the exact same, it can reference the
same action logic `onCatalogAction`.

We can actually start deprecating and removing all `useBrowserControl`
logic, right now `stories/hub` is still using it but we can probably
port it over. This way we have one hook managing separate states and
exposing them which I think is better than having duplicated logic. We
could create a separate hook though to make it more explicit but both
can use the same actions logic `onCatalogAction`.

I know we probably dont want to use qs-state-hook. We can probably work
on updating that logic later or in this PR whichever you see fit.

Feel free to fix naming.. naming isn't great here, was just trying to
combine and see if this is better

app/scripts/components/common/catalog/controls/hooks/use-catalog-view.ts

@@ -1,14 +1,16 @@
 import { useAtom } from 'jotai';
 import { useCallback } from 'react';
+import { useNavigate } from 'react-router';
+import useQsStateCreator from 'qs-state-hook';
 import { taxonomyAtom } from '../atoms/taxonomy-atom';
 import { searchAtom } from '../atoms/search-atom';
-import { CatalogViewAction, onCatalogAction } from '../../utils';
+import { CatalogActions, CatalogViewAction, onCatalogAction } from '../../utils';
 
 export function useCatalogView() {
   const [search, setSearch] = useAtom(searchAtom);
   const [taxonomies, setTaxonomies] = useAtom(taxonomyAtom);
 
-  const onAction = useCallback<CatalogViewAction>(
+  const onCatalogViewAction = useCallback<CatalogViewAction>(
     (action, value) =>
       onCatalogAction(action, value, taxonomies, setSearch, setTaxonomies),
     [setSearch, setTaxonomies, taxonomies]
@@ -17,8 +19,45 @@ export function useCatalogView() {
   return {
     search,
     taxonomies,
-    setSearch,
-    setTaxonomies,
-    onAction
+    onCatalogViewAction,
   };
 }
+
+export function useCatalogViewQS() {
+  const navigate = useNavigate();
+  const useQsState = useQsStateCreator({
+    commit: navigate
+  });
+
+  const [qsSearch, setQsSearch] = useQsState.memo(
+    {
+      key: CatalogActions.SEARCH,
+      default: ''
+    },
+    []
+  );
+
+  const [qsTaxonomies, setQsTaxonomies] = useQsState.memo<
+    Record<string, string | string[]>
+  >(
+    {
+      key: CatalogActions.TAXONOMY,
+      default: {},
+      dehydrator: (v) => JSON.stringify(v), // dehydrator defines how a value is stored in the url
+      hydrator: (v) => (v ? JSON.parse(v) : {}) // hydrator defines how a value is read from the url
+    },
+    []
+  );
+
+  const onBrowserControlAction = useCallback<CatalogViewAction>(
+    (action, value) =>
+      onCatalogAction(action, value, qsTaxonomies, setQsSearch, setQsTaxonomies),
+    [setQsSearch, setQsTaxonomies, qsTaxonomies]
+  );
+
+  return {
+    qsSearch,
+    qsTaxonomies,
+    onBrowserControlAction,
+  };
+}

app/scripts/components/common/catalog/index.tsx

@@ -2,9 +2,8 @@ import React from 'react';
 import styled from 'styled-components';
 import { DatasetData } from 'veda';
 import { themeVal } from '@devseed-ui/theme-provider';
-import { useBrowserControls } from '../browse-controls/use-browse-controls';
 import CatalogContent from './catalog-content';
-
+import { useCatalogViewQS } from './controls/hooks/use-catalog-view';
 import {
   useSlidingStickyHeaderProps
 } from '$components/common/layout-root';
@@ -48,7 +47,7 @@ function CatalogView({
   const { headerHeight } = useSlidingStickyHeaderProps();
   // Use QS State for query parameter manipulation on data catalog page
   // to make cross-page navigation smooth
-  const { search, taxonomies, onAction } = useBrowserControls();
+  const { qsSearch, qsTaxonomies , onBrowserControlAction } = useCatalogViewQS();
 
   return (
     <CatalogWrapper>
@@ -63,9 +62,9 @@ function CatalogView({
       </CatalogFoldHeader>
       <CatalogContent
         datasets={datasets}
-        search={search}
-        taxonomies={taxonomies}
-        onAction={onAction}
+        search={qsSearch}
+        taxonomies={qsTaxonomies}
+        onAction={onBrowserControlAction}
       />
     </CatalogWrapper>
   );

app/scripts/components/exploration/components/dataset-selector-modal/index.tsx

@@ -82,7 +82,7 @@ export function DatasetSelectorModal(props: DatasetSelectorModalProps) {
   );
 
   // Use Jotai controlled atoms for query parameter manipulation on new E&A page 
-  const {search: searchTerm, taxonomies, onAction } = useCatalogView();
+  const {search: searchTerm, taxonomies, onCatalogViewAction } = useCatalogView();
 
   useEffect(() => {
     setSelectedIds(timelineDatasets.map((dataset) => dataset.data.id));
@@ -112,7 +112,7 @@ export function DatasetSelectorModal(props: DatasetSelectorModalProps) {
           taxonomies={taxonomies}
           selectedIds={selectedIds}
           setSelectedIds={setSelectedIds}
-          onAction={onAction}
+          onAction={onCatalogViewAction}
           filterLayers={true}
           emptyStateContent={
             <>