From ba5b9db3cedd6b691dcb5360a5ac253df470c984 Mon Sep 17 00:00:00 2001 From: Hanbyul Jo Date: Thu, 27 Jun 2024 14:01:56 -0400 Subject: [PATCH] Deprecate useBrowserControl --- .../common/browse-controls/constant.js | 6 + .../common/browse-controls/index.tsx | 24 ++-- .../browse-controls/use-browse-controls.ts | 112 +----------------- .../components/common/card-sources.tsx | 6 +- .../common/catalog/catalog-content.tsx | 2 +- .../controls/hooks/use-catalog-view.ts | 37 +++--- .../components/common/catalog/index.tsx | 10 +- .../common/catalog/prepare-datasets.ts | 2 +- .../components/common/content-taxonomy.tsx | 4 +- .../dataset-selector-modal/index.tsx | 4 +- app/scripts/components/stories/hub/index.tsx | 13 +- 11 files changed, 60 insertions(+), 160 deletions(-) create mode 100644 app/scripts/components/common/browse-controls/constant.js diff --git a/app/scripts/components/common/browse-controls/constant.js b/app/scripts/components/common/browse-controls/constant.js new file mode 100644 index 000000000..87818a2fb --- /dev/null +++ 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 index 78e6fd6fd..4aaf1d0a2 100644 --- a/app/scripts/components/common/browse-controls/index.tsx +++ b/app/scripts/components/common/browse-controls/index.tsx @@ -10,12 +10,9 @@ 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'; @@ -23,6 +20,11 @@ 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 { +interface BrowseControlsProps extends ReturnType { 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)} /> {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 index 0fe7a5a2b..bafe00fd7 100644 --- 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', @@ -11,108 +8,3 @@ export enum Actions { CLEAR_TAXONOMY = 'clear_taxonomy', CLEAR_SEARCH = 'clear_search', } - -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 - >( - { - 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( - (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 index 55151834f..b5c68ca85 100644 --- 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) => (
  • + >a {source.name}
    • diff --git a/app/scripts/components/common/catalog/catalog-content.tsx b/app/scripts/components/common/catalog/catalog-content.tsx index 1e5683fe9..fae0a7883 100644 --- 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 | null; + taxonomies: Record; 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 index c099ca9cf..b2fc8fd24 100644 --- 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 | Record; + onAction: CatalogViewAction +} + +export function useCatalogView(): UseCatalogViewResult { const [search, setSearch] = useAtom(searchAtom); const [taxonomies, setTaxonomies] = useAtom(taxonomyAtom); - const onCatalogViewAction = useCallback( + const onAction = useCallback( (action, value) => onCatalogAction(action, value, taxonomies, setSearch, setTaxonomies), [setSearch, setTaxonomies, taxonomies] @@ -19,17 +25,18 @@ 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: '' @@ -37,9 +44,7 @@ export function useCatalogViewQS() { [] ); - const [qsTaxonomies, setQsTaxonomies] = useQsState.memo< - Record - >( + const [taxonomies, setTaxonomies] = useQsState.memo( { key: CatalogActions.TAXONOMY, default: {}, @@ -49,15 +54,15 @@ export function useCatalogViewQS() { [] ); - const onBrowserControlAction = useCallback( + const onAction = useCallback( (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, }; } \ No newline at end of file diff --git a/app/scripts/components/common/catalog/index.tsx b/app/scripts/components/common/catalog/index.tsx index afdfdd88a..534f86104 100644 --- 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 ( @@ -62,9 +60,9 @@ function CatalogView({ ); diff --git a/app/scripts/components/common/catalog/prepare-datasets.ts b/app/scripts/components/common/catalog/prepare-datasets.ts index be5bf5bdd..a221f0894 100644 --- 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 index bec14f610..4000ae19d 100644 --- 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 index a33d96ca1..e7024e5b3 100644 --- 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={ <> diff --git a/app/scripts/components/stories/hub/index.tsx b/app/scripts/components/stories/hub/index.tsx index 4f237c2cc..ec546431a 100644 --- a/app/scripts/components/stories/hub/index.tsx +++ b/app/scripts/components/stories/hub/index.tsx @@ -10,11 +10,8 @@ import { VerticalDivider } from '@devseed-ui/toolbar'; import PublishedDate from '$components/common/pub-date'; import BrowseControls from '$components/common/browse-controls'; -import { - Actions, - useBrowserControls -} from '$components/common/browse-controls/use-browse-controls'; -import { useCatalogView, useCatalogViewQS } from '$components/common/catalog/controls/hooks/use-catalog-view'; +import { CatalogActions } from '$components/common/catalog/utils'; +import { useCatalogViewQS } from '$components/common/catalog/controls/hooks/use-catalog-view'; import { LayoutProps, useSlidingStickyHeaderProps @@ -72,7 +69,7 @@ const FoldWithTopMargin = styled(Fold)` function StoriesHub() { const controlVars = useCatalogViewQS(); - const { qsSearch, qsTaxonomies: taxonomies, onBrowserControlAction: onAction } = controlVars; + const { search: qsSearch, taxonomies, onAction } = controlVars; const search = qsSearch ?? ''; const displayStories = useMemo( @@ -157,7 +154,7 @@ function StoriesHub() { sources={getTaxonomy(d, TAXONOMY_SOURCE)?.values} rootPath={STORIES_PATH} onSourceClick={(id) => { - onAction(Actions.TAXONOMY_MULTISELECT, { + onAction(CatalogActions.TAXONOMY_MULTISELECT, { key: TAXONOMY_SOURCE, value: id }); @@ -201,7 +198,7 @@ function StoriesHub() {