Deprecate useBrowserControl

NASA-IMPACT · Jun 27, 2024 · 3627d39 · 3627d39
1 parent 1e64b51
commit 3627d39
Show file tree

Hide file tree

Showing 11 changed files with 60 additions and 152 deletions.
diff --git a/app/scripts/components/common/browse-controls/constant.js b/app/scripts/components/common/browse-controls/constant.js
@@ -0,0 +1,6 @@
+export const optionAll = {
+  id: 'all',
+  name: 'All'
+};
+
+export const minSearchLength = 3;
diff --git a/app/scripts/components/common/browse-controls/index.tsx b/app/scripts/components/common/browse-controls/index.tsx
@@ -10,19 +10,21 @@ import {
 import { glsp, truncated } from '@devseed-ui/theme-provider';
 import { DropMenu, DropTitle } from '@devseed-ui/dropdown';
 
-import {
-  Actions,
-  FilterOption,
-  optionAll,
-  useBrowserControls
-} from './use-browse-controls';
+import { useCatalogViewQS } from '../catalog/controls/hooks/use-catalog-view';
+import { optionAll } from './constant';
+import { CatalogActions } from '$components/common/catalog/utils';
 
 import DropdownScrollable from '$components/common/dropdown-scrollable';
 import DropMenuItemButton from '$styles/drop-menu-item-button';
 import { variableGlsp } from '$styles/variable-utils';
 import SearchField from '$components/common/search-field';
 import { useMediaQuery } from '$utils/use-media-query';
 
+export interface FilterOption {
+  id: string;
+  name: string;
+}
+
 const BrowseControlsWrapper = styled.div`
   display: flex;
   flex-flow: column;
@@ -67,7 +69,7 @@ const ButtonPrefix = styled(Overline).attrs({ as: 'small' })`
   white-space: nowrap;
 `;
 
-interface BrowseControlsProps extends ReturnType<typeof useBrowserControls> {
+interface BrowseControlsProps extends ReturnType<typeof useCatalogViewQS> {
   taxonomiesOptions: Taxonomy[];
 }
 
@@ -91,9 +93,9 @@ function BrowseControls(props: BrowseControlsProps) {
         key={name}
         prefix={name}
         items={[optionAll].concat(values)}
-        currentId={(taxonomies?.[name]?.length ? taxonomies[name][0] as string : 'all')}
+        currentId={(taxonomies[name]?.length ? taxonomies[name][0] as string : 'all')}
         onChange={(v) => {
-          onAction(Actions.TAXONOMY_MULTISELECT, { key: name, value: v });
+          onAction(CatalogActions.TAXONOMY_MULTISELECT, { key: name, value: v });
         }}
         size={isLargeUp ? 'large' : 'medium'}
       />
@@ -107,8 +109,8 @@ function BrowseControls(props: BrowseControlsProps) {
           size={isLargeUp ? 'large' : 'medium'}
           placeholder='Title, description...'
           keepOpen={isLargeUp}
-          value={search ?? ''}
-          onChange={(v) => onAction(Actions.SEARCH, v)}
+          value={search}
+          onChange={(v) => onAction(CatalogActions.SEARCH, v)}
         />
         <FilterOptionsWrapper>
           {createFilterList(taxonomiesOptions.slice(0, filterWrapConstant))}

diff --git a/app/scripts/components/common/browse-controls/use-browse-controls.ts b/app/scripts/components/common/browse-controls/use-browse-controls.ts
@@ -1,8 +1,5 @@
-import { useCallback } from 'react';
-import { useNavigate } from 'react-router';
-import useQsStateCreator from 'qs-state-hook';
-import { set, omit } from 'lodash';
-
+// @DEPRECATE it when ghg instance doesn't point this anymore
+// https://github.com/US-GHG-Center/veda-config-ghg/blob/develop/overrides/home/keypoints.tsx#L11
 export enum Actions {
   CLEAR = 'clear',
   SEARCH = 'search',
@@ -14,105 +11,8 @@ export enum Actions {
 
 export type BrowserControlsAction = (action: Actions, value?: any) => void;
 
-export interface FilterOption {
-  id: string;
-  name: string;
-}
-
 export interface TaxonomyFilterOption {
   taxonomyType: string;
   value: string;
   exclusion?: string;
 }
-
-
-export const optionAll = {
-  id: 'all',
-  name: 'All'
-};
-
-export const minSearchLength = 3;
-
-// This hook is only used for the Stories Hub to manage browsing controls
-// such as search, sort, and taxonomy filters.
-export function useBrowserControls() {
-  // Setup Qs State to store data in the url's query string
-  // react-router function to get the navigation.
-  const navigate = useNavigate();
-  const useQsState = useQsStateCreator({
-    commit: navigate
-  });
-
-  const [search, setSearch] = useQsState.memo(
-    {
-      key: Actions.SEARCH,
-      default: '',
-      dehydrator: (v) => v!,
-      hydrator: (v) => {
-        return (v ?? '');
-      }
-    },
-    []
-  );
-
-  const [taxonomies, setTaxonomies] = useQsState.memo<
-    Record<string, string | string[]>
-  >(
-    {
-      key: Actions.TAXONOMY,
-      default: {},
-      dehydrator: (v) => JSON.stringify(v), // dehydrator defines how a value is stored in the url
-      hydrator: (v) => {
-        return (v ? JSON.parse(v) : {});
-      } // hydrator defines how a value is read from the url
-    },
-    []
-  );
-
-  const onAction = useCallback<BrowserControlsAction>(
-    (action, value) => {
-      switch (action) {
-        case Actions.CLEAR:
-          setSearch('');
-          setTaxonomies({});
-          break;
-        case Actions.CLEAR_TAXONOMY:
-          setTaxonomies({});
-          break;
-        case Actions.CLEAR_SEARCH:
-          setSearch('');
-          break;
-        case Actions.SEARCH:
-          setSearch(value);
-          break;
-        case Actions.TAXONOMY_MULTISELECT:
-          {
-            const { key, value: val } = value;
-            if (val === optionAll.id) {
-              setTaxonomies(omit(taxonomies, key));
-            } else {
-              setTaxonomies(set({ ...taxonomies }, key, val));
-            }
-          }
-          break;
-        case Actions.TAXONOMY:
-          {
-            const { key, value: val } = value;
-            if (val === optionAll.id) {
-              setTaxonomies(omit(taxonomies, key));
-            } else {
-              setTaxonomies(set({ ...taxonomies }, key, val));
-            }
-          }
-          break;
-      }
-    },
-    [taxonomies, setTaxonomies, setSearch]
-  );
-
-  return {
-    search,
-    taxonomies,
-    onAction
-  };
-}
diff --git a/app/scripts/components/common/card-sources.tsx b/app/scripts/components/common/card-sources.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { TaxonomyItem } from 'veda';
 import { Link } from 'react-router-dom';
 import { listReset } from '@devseed-ui/theme-provider';
-import { Actions } from '$components/common/browse-controls/use-browse-controls';
+import { CatalogActions } from '$components/common//catalog/utils';
 
 const SourcesUl = styled.ul`
   ${listReset()}
@@ -51,7 +51,7 @@ export function CardSourcesList(props: SourcesListProps) {
         {sources.map((source) => (
           <li key={source.id}>
             <Link
-              to={`${rootPath}?${Actions.TAXONOMY}=${encodeURIComponent(
+              to={`${rootPath}?${CatalogActions.TAXONOMY}=${encodeURIComponent(
                 JSON.stringify({
                   Source: source.id
                 })
@@ -60,7 +60,7 @@ export function CardSourcesList(props: SourcesListProps) {
                 e.preventDefault();
                 onSourceClick(source.id);
               }}
-            >
+            ><span>a</span>
               {source.name}
             </Link>
           </li>

diff --git a/app/scripts/components/common/catalog/catalog-content.tsx b/app/scripts/components/common/catalog/catalog-content.tsx
@@ -34,7 +34,7 @@ export interface CatalogContentProps {
   filterLayers?: boolean;
   emptyStateContent?: React.ReactNode;
   search: string;
-  taxonomies: Record<string, string[]> | null;
+  taxonomies: Record<string, string[]>;
   onAction: (action: CatalogActions, value?: any) => void;
 }
 

diff --git a/app/scripts/components/common/catalog/controls/hooks/use-catalog-view.ts b/app/scripts/components/common/catalog/controls/hooks/use-catalog-view.ts
@@ -6,11 +6,17 @@ import { taxonomyAtom } from '../atoms/taxonomy-atom';
 import { searchAtom } from '../atoms/search-atom';
 import { CatalogActions, CatalogViewAction, onCatalogAction } from '../../utils';
 
-export function useCatalogView() {
+interface UseCatalogViewResult {
+  search: string;
+  taxonomies: Record<string, string[]> | Record<string, never>;
+  onAction: CatalogViewAction
+}
+
+export function useCatalogView(): UseCatalogViewResult {
   const [search, setSearch] = useAtom(searchAtom);
   const [taxonomies, setTaxonomies] = useAtom(taxonomyAtom);
 
-  const onCatalogViewAction = useCallback<CatalogViewAction>(
+  const onAction = useCallback<CatalogViewAction>(
     (action, value) =>
       onCatalogAction(action, value, taxonomies, setSearch, setTaxonomies),
     [setSearch, setTaxonomies, taxonomies]
@@ -19,27 +25,26 @@ export function useCatalogView() {
   return {
     search,
     taxonomies,
-    onCatalogViewAction,
+    onAction,
   };
-}
-
-export function useCatalogViewQS() {
+} 
+// @NOTE: A hook using qs-state for query parameter management for cross-page navigation
+// Details: https://github.com/NASA-IMPACT/veda-ui/pull/1021
+export function useCatalogViewQS(): UseCatalogViewResult {
   const navigate = useNavigate();
   const useQsState = useQsStateCreator({
     commit: navigate
   });
 
-  const [qsSearch, setQsSearch] = useQsState.memo(
+  const [search, setSearch] = useQsState.memo(
     {
       key: CatalogActions.SEARCH,
       default: ''
     },
     []
   );
 
-  const [qsTaxonomies, setQsTaxonomies] = useQsState.memo<
-    Record<string, string | string[]>
-  >(
+  const [taxonomies, setTaxonomies] = useQsState.memo(
     {
       key: CatalogActions.TAXONOMY,
       default: {},
@@ -49,15 +54,15 @@ export function useCatalogViewQS() {
     []
   );
 
-  const onBrowserControlAction = useCallback<CatalogViewAction>(
+  const onAction = useCallback<CatalogViewAction>(
     (action, value) =>
-      onCatalogAction(action, value, qsTaxonomies, setQsSearch, setQsTaxonomies),
-    [setQsSearch, setQsTaxonomies, qsTaxonomies]
+      onCatalogAction(action, value, taxonomies, setSearch, setTaxonomies),
+    [setSearch, setTaxonomies, taxonomies]
   );
 
   return {
-    qsSearch,
-    qsTaxonomies,
-    onBrowserControlAction,
+    search: search?? '',
+    taxonomies: taxonomies?? {},
+    onAction,
   };
 }
diff --git a/app/scripts/components/common/catalog/index.tsx b/app/scripts/components/common/catalog/index.tsx
@@ -45,9 +45,7 @@ function CatalogView({
 }: CatalogViewProps) {
 
   const { headerHeight } = useSlidingStickyHeaderProps();
-  // Use QS State for query parameter manipulation on data catalog page
-  // to make cross-page navigation smooth
-  const { qsSearch, qsTaxonomies , onBrowserControlAction } = useCatalogViewQS();
+  const { search, taxonomies , onAction } = useCatalogViewQS();
 
   return (
     <CatalogWrapper>
@@ -62,9 +60,9 @@ function CatalogView({
       </CatalogFoldHeader>
       <CatalogContent
         datasets={datasets}
-        search={qsSearch}
-        taxonomies={qsTaxonomies}
-        onAction={onBrowserControlAction}
+        search={search}
+        taxonomies={taxonomies}
+        onAction={onAction}
       />
     </CatalogWrapper>
   );

diff --git a/app/scripts/components/common/catalog/prepare-datasets.ts b/app/scripts/components/common/catalog/prepare-datasets.ts
@@ -1,5 +1,5 @@
 import { DatasetData, StoryData } from 'veda';
-import { optionAll } from '$components/common/browse-controls/use-browse-controls';
+import { optionAll } from '$components/common/browse-controls/constant';
 import { TAXONOMY_TOPICS } from '$utils/veda-data';
 
 const isDatasetData = (data: DatasetData | StoryData): data is DatasetData => {

diff --git a/app/scripts/components/common/content-taxonomy.tsx b/app/scripts/components/common/content-taxonomy.tsx
@@ -5,7 +5,7 @@ import { Link } from 'react-router-dom';
 import { glsp, themeVal } from '@devseed-ui/theme-provider';
 import { Heading, Overline } from '@devseed-ui/typography';
 
-import { Actions } from './browse-controls/use-browse-controls';
+import { CatalogActions } from '$components/common/catalog/utils';
 
 import { variableGlsp } from '$styles/variable-utils';
 import { Pill } from '$styles/pill';
@@ -60,7 +60,7 @@ export function ContentTaxonomy(props: ContentTaxonomyProps) {
                   variation='achromic'
                   key={t.id}
                   as={Link}
-                  to={`${linkBase}?${Actions.TAXONOMY}=${encodeURIComponent(
+                  to={`${linkBase}?${CatalogActions.TAXONOMY}=${encodeURIComponent(
                     JSON.stringify({ [name]: [t.id] })
                   )}`}
                 >

diff --git a/app/scripts/components/exploration/components/dataset-selector-modal/index.tsx b/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, onCatalogViewAction } = useCatalogView();
+  const {search: searchTerm, taxonomies, onAction } = 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={onCatalogViewAction}
+          onAction={onAction}
           filterLayers={true}
           emptyStateContent={
             <>