From 7a08578d36d81dd153b5a340e0aa21dd79922078 Mon Sep 17 00:00:00 2001 From: Hanbyul Jo Date: Fri, 28 Jun 2024 16:31:28 -0400 Subject: [PATCH] Rename 'Catalog' related variables to 'Filter' --- .../common/browse-controls/index.tsx | 6 +-- .../components/common/card-sources.tsx | 4 +- .../common/catalog/catalog-content.tsx | 12 +++--- .../controls/hooks/use-filters-with-query.ts | 16 ++++---- .../common/catalog/filters-control.tsx | 6 +-- .../components/common/catalog/utils.test.ts | 40 +++++++++---------- .../components/common/catalog/utils.ts | 20 +++++----- .../components/common/content-taxonomy.tsx | 4 +- .../dataset-selector-modal/index.tsx | 6 +-- app/scripts/components/stories/hub/index.tsx | 6 +-- 10 files changed, 60 insertions(+), 60 deletions(-) diff --git a/app/scripts/components/common/browse-controls/index.tsx b/app/scripts/components/common/browse-controls/index.tsx index 4e175a9f8..96293e961 100644 --- a/app/scripts/components/common/browse-controls/index.tsx +++ b/app/scripts/components/common/browse-controls/index.tsx @@ -12,7 +12,7 @@ import { DropMenu, DropTitle } from '@devseed-ui/dropdown'; import { useFiltersWithQS } from '../catalog/controls/hooks/use-filters-with-query'; import { optionAll } from './constants'; -import { CatalogActions } from '$components/common/catalog/utils'; +import { FilterActions } from '$components/common/catalog/utils'; import DropdownScrollable from '$components/common/dropdown-scrollable'; import DropMenuItemButton from '$styles/drop-menu-item-button'; @@ -95,7 +95,7 @@ function BrowseControls(props: BrowseControlsProps) { items={[optionAll].concat(values)} currentId={(taxonomies[name]?.length ? taxonomies[name][0] as string : 'all')} onChange={(v) => { - onAction(CatalogActions.TAXONOMY, { key: name, value: v }); + onAction(FilterActions.TAXONOMY, { key: name, value: v }); }} size={isLargeUp ? 'large' : 'medium'} /> @@ -110,7 +110,7 @@ function BrowseControls(props: BrowseControlsProps) { placeholder='Title, description...' keepOpen={isLargeUp} value={search} - onChange={(v) => onAction(CatalogActions.SEARCH, v)} + onChange={(v) => onAction(FilterActions.SEARCH, v)} /> {createFilterList(taxonomiesOptions.slice(0, filterWrapConstant))} diff --git a/app/scripts/components/common/card-sources.tsx b/app/scripts/components/common/card-sources.tsx index caa05489e..b2d59c9b0 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 { CatalogActions } from '$components/common//catalog/utils'; +import { FilterActions } from '$components/common//catalog/utils'; const SourcesUl = styled.ul` ${listReset()} @@ -51,7 +51,7 @@ export function CardSourcesList(props: SourcesListProps) { {sources.map((source) => (
  • ; - onAction: (action: CatalogActions, value?: any) => void; + onAction: (action: FilterActions, value?: any) => void; } const DEFAULT_SORT_OPTION = 'asc'; @@ -82,7 +82,7 @@ function CatalogContent({ setSelectedFilters(selectedFilters.filter((selected) => selected.id !== item.id)); } - onAction(CatalogActions.TAXONOMY_MULTISELECT, { key: item.taxonomy, value: item.id }); + onAction(FilterActions.TAXONOMY_MULTISELECT, { key: item.taxonomy, value: item.id }); }, [setSelectedFilters, selectedFilters, onAction]); const handleClearTag = useCallback((item: OptionItem) => { @@ -93,12 +93,12 @@ function CatalogContent({ const handleClearTags = useCallback(() => { setSelectedFilters([]); setExclusiveSourceSelected(null); - onAction(CatalogActions.CLEAR_TAXONOMY); + onAction(FilterActions.CLEAR_TAXONOMY); }, [onAction]); useEffect(() => { if (clearedTagItem && (selectedFilters.length == prevSelectedFilters.length - 1)) { - onAction(CatalogActions.TAXONOMY_MULTISELECT, { key: clearedTagItem.taxonomy, value: clearedTagItem.id}); + onAction(FilterActions.TAXONOMY_MULTISELECT, { key: clearedTagItem.taxonomy, value: clearedTagItem.id}); setClearedTagItem(undefined); } // eslint-disable-next-line react-hooks/exhaustive-deps @@ -106,7 +106,7 @@ function CatalogContent({ useEffect(() => { if (!selectedFilters.length) { - onAction(CatalogActions.CLEAR_TAXONOMY); + onAction(FilterActions.CLEAR_TAXONOMY); } setExclusiveSourceSelected(null); 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 1cc45e261..46f6ab82d 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 @@ -4,11 +4,11 @@ import { useNavigate } from 'react-router'; import useQsStateCreator from 'qs-state-hook'; import { taxonomyAtom } from '../atoms/taxonomy-atom'; import { searchAtom } from '../atoms/search-atom'; -import { CatalogActions, CatalogViewAction, onCatalogAction } from '../../utils'; +import { FilterActions, FilterAction, onFilterAction } from '../../utils'; interface UseFiltersWithQueryResult { search: string; taxonomies: Record | Record; - onAction: CatalogViewAction + onAction: FilterAction } // @TECH-DEBT: We have diverged ways of dealing with query parameters and need to consolidate them. @@ -19,9 +19,9 @@ export function useFiltersWithURLAtom(): UseFiltersWithQueryResult { const [search, setSearch] = useAtom(searchAtom); const [taxonomies, setTaxonomies] = useAtom(taxonomyAtom); - const onAction = useCallback( + const onAction = useCallback( (action, value) => - onCatalogAction(action, value, taxonomies, setSearch, setTaxonomies), + onFilterAction(action, value, taxonomies, setSearch, setTaxonomies), [setSearch, setTaxonomies, taxonomies] ); @@ -40,7 +40,7 @@ export function useFiltersWithQS(): UseFiltersWithQueryResult { const [search, setSearch] = useQsState.memo( { - key: CatalogActions.SEARCH, + key: FilterActions.SEARCH, default: '' }, [] @@ -48,7 +48,7 @@ export function useFiltersWithQS(): UseFiltersWithQueryResult { const [taxonomies, setTaxonomies] = useQsState.memo( { - key: CatalogActions.TAXONOMY, + key: FilterActions.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 @@ -56,9 +56,9 @@ export function useFiltersWithQS(): UseFiltersWithQueryResult { [] ); - const onAction = useCallback( + const onAction = useCallback( (action, value) => - onCatalogAction(action, value, taxonomies, setSearch, setTaxonomies), + onFilterAction(action, value, taxonomies, setSearch, setTaxonomies), [setSearch, setTaxonomies, taxonomies] ); diff --git a/app/scripts/components/common/catalog/filters-control.tsx b/app/scripts/components/common/catalog/filters-control.tsx index db3092b1c..ea9fef452 100644 --- a/app/scripts/components/common/catalog/filters-control.tsx +++ b/app/scripts/components/common/catalog/filters-control.tsx @@ -1,7 +1,7 @@ import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react'; import styled from 'styled-components'; import { Taxonomy } from 'veda'; -import { CatalogActions } from './utils'; +import { FilterActions } from './utils'; import SearchField from '$components/common/search-field'; import CheckableFilters, { OptionItem } from '$components/common/form/checkable-filter'; import { useSlidingStickyHeader, HEADER_TRANSITION_DURATION } from '$utils/use-sliding-sticky-header'; @@ -16,7 +16,7 @@ const ControlsWrapper = styled.div<{ widthValue?: string; heightValue?: string; `; interface FiltersMenuProps { - onAction: (action: CatalogActions, value: any) => void; + onAction: (action: FilterActions, value: any) => void; search?: string; taxonomiesOptions: Taxonomy[]; allSelected: OptionItem[]; @@ -103,7 +103,7 @@ export default function FiltersControl(props: FiltersMenuProps) { size='large' placeholder='Search by title, description' value={search ?? ''} - onChange={(v) => onAction(CatalogActions.SEARCH, v)} + onChange={(v) => onAction(FilterActions.SEARCH, v)} /> {taxonomiesItems.map(({ title, items }) => ( { +describe('onFilterAction', () => { let setSearchMock; let setTaxonomiesMock; let taxonomies; @@ -16,8 +16,8 @@ describe('onCatalogAction', () => { }); it('should clear search and taxonomies on CLEAR action', () => { - onCatalogAction( - CatalogActions.CLEAR, + onFilterAction( + FilterActions.CLEAR, null, taxonomies, setSearchMock, @@ -29,8 +29,8 @@ describe('onCatalogAction', () => { }); it('should clear only taxonomies on CLEAR_TAXONOMY action', () => { - onCatalogAction( - CatalogActions.CLEAR_TAXONOMY, + onFilterAction( + FilterActions.CLEAR_TAXONOMY, null, taxonomies, setSearchMock, @@ -42,8 +42,8 @@ describe('onCatalogAction', () => { }); it('should clear only search on CLEAR_SEARCH action', () => { - onCatalogAction( - CatalogActions.CLEAR_SEARCH, + onFilterAction( + FilterActions.CLEAR_SEARCH, null, taxonomies, setSearchMock, @@ -55,8 +55,8 @@ describe('onCatalogAction', () => { }); it('should set search value on SEARCH action', () => { const searchValue = 'climate'; - onCatalogAction( - CatalogActions.SEARCH, + onFilterAction( + FilterActions.SEARCH, searchValue, taxonomies, setSearchMock, @@ -68,8 +68,8 @@ describe('onCatalogAction', () => { it('should add value to Topics taxonomy on TAXONOMY_MULTISELECT action', () => { const value = { key: 'Topics', value: 'pollution' }; - onCatalogAction( - CatalogActions.TAXONOMY_MULTISELECT, + onFilterAction( + FilterActions.TAXONOMY_MULTISELECT, value, taxonomies, setSearchMock, @@ -83,8 +83,8 @@ describe('onCatalogAction', () => { it('should overwrite the existing taxonomy value with TAXONOMY action', () => { const value = { key: 'Topics', value: 'climate' }; - onCatalogAction( - CatalogActions.TAXONOMY, + onFilterAction( + FilterActions.TAXONOMY, value, taxonomies, setSearchMock, @@ -98,8 +98,8 @@ describe('onCatalogAction', () => { it('should remove value from Topics taxonomy on TAXONOMY_MULTISELECT action', () => { const value = { key: 'Topics', value: 'climate' }; - onCatalogAction( - CatalogActions.TAXONOMY_MULTISELECT, + onFilterAction( + FilterActions.TAXONOMY_MULTISELECT, value, taxonomies, setSearchMock, @@ -114,8 +114,8 @@ describe('onCatalogAction', () => { it('should remove Topics key when last value is removed on TAXONOMY_MULTISELECT action', () => { const value = { key: 'Topics', value: 'climate' }; - onCatalogAction( - CatalogActions.TAXONOMY_MULTISELECT, + onFilterAction( + FilterActions.TAXONOMY_MULTISELECT, value, { Topics: ['climate'] }, setSearchMock, @@ -129,8 +129,8 @@ describe('onCatalogAction', () => { it('should initialize new taxonomy key on TAXONOMY_MULTISELECT action', () => { const value = { key: 'Regions', value: 'Europe' }; - onCatalogAction( - CatalogActions.TAXONOMY_MULTISELECT, + onFilterAction( + FilterActions.TAXONOMY_MULTISELECT, value, taxonomies, setSearchMock, diff --git a/app/scripts/components/common/catalog/utils.ts b/app/scripts/components/common/catalog/utils.ts index 652c4a560..ded96f3b6 100644 --- a/app/scripts/components/common/catalog/utils.ts +++ b/app/scripts/components/common/catalog/utils.ts @@ -1,7 +1,7 @@ import { omit, set } from 'lodash'; import { optionAll } from '$components/common/browse-controls/constants'; -export enum CatalogActions { +export enum FilterActions { TAXONOMY_MULTISELECT = 'taxonomy_multiselect', CLEAR = 'clear', SEARCH = 'search', @@ -12,34 +12,34 @@ export enum CatalogActions { CLEAR_SEARCH = 'clear_search', } -export type CatalogViewAction = (action: CatalogActions, value?: any) => void; +export type FilterAction = (action: FilterActions, value?: any) => void; -export function onCatalogAction( - action: CatalogActions, +export function onFilterAction( + action: FilterActions, value: any, taxonomies: any, setSearch: (value: string) => void, setTaxonomies: (value: any) => void ) { switch (action) { - case CatalogActions.CLEAR: { + case FilterActions.CLEAR: { setSearch(''); setTaxonomies({}); break; } - case CatalogActions.SEARCH: { + case FilterActions.SEARCH: { setSearch(value); break; } - case CatalogActions.CLEAR_TAXONOMY: { + case FilterActions.CLEAR_TAXONOMY: { setTaxonomies({}); break; } - case CatalogActions.CLEAR_SEARCH: { + case FilterActions.CLEAR_SEARCH: { setSearch(''); break; } - case CatalogActions.TAXONOMY: { + case FilterActions.TAXONOMY: { { const { key, value: val } = value; if (val === optionAll.id) { @@ -50,7 +50,7 @@ export function onCatalogAction( } break; } - case CatalogActions.TAXONOMY_MULTISELECT: { + case FilterActions.TAXONOMY_MULTISELECT: { const { key, value: val } = value; if (taxonomies && key in taxonomies) { diff --git a/app/scripts/components/common/content-taxonomy.tsx b/app/scripts/components/common/content-taxonomy.tsx index 4000ae19d..830a7aeb0 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 { CatalogActions } from '$components/common/catalog/utils'; +import { FilterActions } 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}?${CatalogActions.TAXONOMY}=${encodeURIComponent( + to={`${linkBase}?${FilterActions.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 ad6da34fd..c417f881f 100644 --- a/app/scripts/components/exploration/components/dataset-selector-modal/index.tsx +++ b/app/scripts/components/exploration/components/dataset-selector-modal/index.tsx @@ -25,7 +25,7 @@ import ModalFooterRender from './footer'; import CatalogContent from '$components/common/catalog/catalog-content'; import { DATASETS_PATH } from '$utils/routes'; import { useFiltersWithURLAtom } from '$components/common/catalog/controls/hooks/use-filters-with-query'; -import { CatalogActions } from '$components/common/catalog/utils'; +import { FilterActions } from '$components/common/catalog/utils'; const DatasetModal = styled(Modal)` z-index: ${themeVal('zIndices.modal')}; @@ -88,7 +88,7 @@ export function DatasetSelectorModal(props: DatasetSelectorModalProps) { useEffect(() => { // Reset filter when modal is hidden if(!revealed) { - onAction(CatalogActions.CLEAR); + onAction(FilterActions.CLEAR); } },[revealed, onAction]); @@ -100,7 +100,7 @@ export function DatasetSelectorModal(props: DatasetSelectorModalProps) { setTimelineDatasets( reconcileDatasets(selectedIds, datasetLayers, timelineDatasets) ); - onAction(CatalogActions.CLEAR); + onAction(FilterActions.CLEAR); close(); }, [close, selectedIds, timelineDatasets, setTimelineDatasets, onAction]); diff --git a/app/scripts/components/stories/hub/index.tsx b/app/scripts/components/stories/hub/index.tsx index 263321077..0fc22dcd2 100644 --- a/app/scripts/components/stories/hub/index.tsx +++ b/app/scripts/components/stories/hub/index.tsx @@ -10,7 +10,7 @@ import { VerticalDivider } from '@devseed-ui/toolbar'; import PublishedDate from '$components/common/pub-date'; import BrowseControls from '$components/common/browse-controls'; -import { CatalogActions } from '$components/common/catalog/utils'; +import { FilterActions } from '$components/common/catalog/utils'; import { useFiltersWithQS } from '$components/common/catalog/controls/hooks/use-filters-with-query'; import { LayoutProps, @@ -154,7 +154,7 @@ function StoriesHub() { sources={getTaxonomy(d, TAXONOMY_SOURCE)?.values} rootPath={STORIES_PATH} onSourceClick={(id) => { - onAction(CatalogActions.TAXONOMY_MULTISELECT, { + onAction(FilterActions.TAXONOMY_MULTISELECT, { key: TAXONOMY_SOURCE, value: id }); @@ -198,7 +198,7 @@ function StoriesHub() {