From 4b3105be18d3a5e5c51718988d8c4b793e02cd70 Mon Sep 17 00:00:00 2001 From: Vitor George Date: Tue, 14 Jan 2025 12:13:16 +0000 Subject: [PATCH 1/2] refactor(catalog): format CatalogCard component --- .../common/catalog/catalog-card.tsx | 38 ++++++++++--------- 1 file changed, 20 insertions(+), 18 deletions(-) diff --git a/app/scripts/components/common/catalog/catalog-card.tsx b/app/scripts/components/common/catalog/catalog-card.tsx index 779aa4b2c..098bb04f0 100644 --- a/app/scripts/components/common/catalog/catalog-card.tsx +++ b/app/scripts/components/common/catalog/catalog-card.tsx @@ -1,14 +1,22 @@ -import React from "react"; -import styled, { css } from "styled-components"; -import { CollecticonPlus, CollecticonTickSmall, iconDataURI } from "@devseed-ui/collecticons"; -import { glsp, themeVal } from "@devseed-ui/theme-provider"; -import { Card } from "../card"; -import { CardTopicsList } from "../card/styles"; -import TextHighlight from "../text-highlight"; +import React from 'react'; +import styled, { css } from 'styled-components'; +import { + CollecticonPlus, + CollecticonTickSmall, + iconDataURI +} from '@devseed-ui/collecticons'; +import { glsp, themeVal } from '@devseed-ui/theme-provider'; +import { Card } from '../card'; +import { CardTopicsList } from '../card/styles'; +import TextHighlight from '../text-highlight'; import { getDatasetDescription, getMediaProperty } from './utils'; -import { DatasetData, DatasetLayer } from "$types/veda"; -import { TAXONOMY_TOPICS, getAllTaxonomyValues, getTaxonomy } from "$utils/veda-data/taxonomies"; -import { Pill } from "$styles/pill"; +import { DatasetData, DatasetLayer } from '$types/veda'; +import { + TAXONOMY_TOPICS, + getAllTaxonomyValues, + getTaxonomy +} from '$utils/veda-data/taxonomies'; +import { Pill } from '$styles/pill'; interface CatalogCardProps { dataset: DatasetData; @@ -89,14 +97,8 @@ const CardSelectable = styled(Card)<{ `; export const CatalogCard = (props: CatalogCardProps) => { - const { - dataset, - layer, - searchTerm, - selectable, - selected, - onDatasetClick - } = props; + const { dataset, layer, searchTerm, selectable, selected, onDatasetClick } = + props; const topics = getTaxonomy(dataset, TAXONOMY_TOPICS)?.values; const allTaxonomyValues = getAllTaxonomyValues(dataset).map((v) => v.name); From bc20466c9de5de915fecb232005ce00b84c24115 Mon Sep 17 00:00:00 2001 From: Vitor George Date: Tue, 14 Jan 2025 12:54:52 +0000 Subject: [PATCH 2/2] refactor(catalog): Remove onCardNavigate from Catalog, use new 'to' property --- app/scripts/components/common/catalog/catalog-card.tsx | 7 ++++++- app/scripts/components/common/catalog/catalog-content.tsx | 3 --- app/scripts/components/common/catalog/index.tsx | 3 --- app/scripts/components/data-catalog/container.tsx | 6 ------ 4 files changed, 6 insertions(+), 13 deletions(-) diff --git a/app/scripts/components/common/catalog/catalog-card.tsx b/app/scripts/components/common/catalog/catalog-card.tsx index 098bb04f0..264ba5f6c 100644 --- a/app/scripts/components/common/catalog/catalog-card.tsx +++ b/app/scripts/components/common/catalog/catalog-card.tsx @@ -17,6 +17,7 @@ import { getTaxonomy } from '$utils/veda-data/taxonomies'; import { Pill } from '$styles/pill'; +import { DATASETS_PATH } from '$utils/routes'; interface CatalogCardProps { dataset: DatasetData; @@ -115,6 +116,10 @@ export const CatalogCard = (props: CatalogCardProps) => { } }; + const interactionProps = selectable + ? { onClick: handleClick } + : { to: `${DATASETS_PATH}/${dataset.id}` }; + return ( { selectable={selectable} tagLabels={allTaxonomyValues} linkLabel='View dataset' - onClick={handleClick} + {...interactionProps} title={ {title} diff --git a/app/scripts/components/common/catalog/catalog-content.tsx b/app/scripts/components/common/catalog/catalog-content.tsx index d48f947da..b875ab490 100644 --- a/app/scripts/components/common/catalog/catalog-content.tsx +++ b/app/scripts/components/common/catalog/catalog-content.tsx @@ -35,7 +35,6 @@ export interface CatalogContentProps { search: string; taxonomies: Record; onAction: (action: FilterActions, value?: any) => void; - onCardNavigate?: (path: string) => void; } const DEFAULT_SORT_OPTION = 'asc'; @@ -72,7 +71,6 @@ function CatalogContent({ search, taxonomies, onAction, - onCardNavigate }: CatalogContentProps) { const [exclusiveSourceSelected, setExclusiveSourceSelected] = useState(null); const isSelectable = selectedIds !== undefined; @@ -278,7 +276,6 @@ function CatalogContent({ onCardNavigate(getDatasetPath(d, pathname))})} /> ))} diff --git a/app/scripts/components/common/catalog/index.tsx b/app/scripts/components/common/catalog/index.tsx index a78e029a2..8882811b7 100644 --- a/app/scripts/components/common/catalog/index.tsx +++ b/app/scripts/components/common/catalog/index.tsx @@ -41,13 +41,11 @@ export interface CatalogViewProps { taxonomies: Record | Record, onAction: () => void, } | any; - onCardNavigate?: (path: string) => void; } function CatalogView({ datasets, onFilterChanges, - onCardNavigate }: CatalogViewProps) { const { headerHeight } = useSlidingStickyHeaderProps(); @@ -70,7 +68,6 @@ function CatalogView({ search={search} taxonomies={taxonomies} onAction={onAction} - onCardNavigate={onCardNavigate} /> ); diff --git a/app/scripts/components/data-catalog/container.tsx b/app/scripts/components/data-catalog/container.tsx index f3f88585d..ca6cc16ff 100644 --- a/app/scripts/components/data-catalog/container.tsx +++ b/app/scripts/components/data-catalog/container.tsx @@ -20,11 +20,6 @@ import { useFiltersWithQS } from '$components/common/catalog/controls/hooks/use- export default function DataCatalogContainer() { const allDatasets = getAllDatasetsProps(veda_faux_module_datasets); const controlVars = useFiltersWithQS(); - const navigate = useNavigate(); - - const handleCardNavigation = (path: string) => { - navigate(path); - }; return ( @@ -40,7 +35,6 @@ export default function DataCatalogContainer() { controlVars} - onCardNavigate={handleCardNavigation} /> );