refactor(catalog): remove onCardNavigate callback from Catalog (#1374)

NASA-IMPACT · Jan 14, 2025 · 2f741b7 · 2f741b7
2 parents 5fb17b9 + bc20466
commit 2f741b7
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 31 deletions.
diff --git a/app/scripts/components/common/catalog/catalog-card.tsx b/app/scripts/components/common/catalog/catalog-card.tsx
@@ -1,14 +1,23 @@
-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';
+import { DATASETS_PATH } from '$utils/routes';
 
 interface CatalogCardProps {
   dataset: DatasetData;
@@ -89,14 +98,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);
@@ -113,14 +116,18 @@ export const CatalogCard = (props: CatalogCardProps) => {
     }
   };
 
+  const interactionProps = selectable
+    ? { onClick: handleClick }
+    : { to: `${DATASETS_PATH}/${dataset.id}` };
+
   return (
     <CardSelectable
       cardType='horizontal-info'
       checked={selectable ? selected : undefined}
       selectable={selectable}
       tagLabels={allTaxonomyValues}
       linkLabel='View dataset'
-      onClick={handleClick}
+      {...interactionProps}
       title={
         <TextHighlight value={searchTerm} disabled={searchTerm.length < 3}>
           {title}

diff --git 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<string, string[]>;
   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<string | null>(null);
   const isSelectable = selectedIds !== undefined;
@@ -278,7 +276,6 @@ function CatalogContent({
                   <CatalogCard
                     dataset={d}
                     searchTerm={search}
-                    {...(onCardNavigate && {onDatasetClick: () => onCardNavigate(getDatasetPath(d, pathname))})}
                   />
                 </li>
               ))}

diff --git 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<string, string[]> | Record<string, never>,
     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}
       />
     </CatalogWrapper>
   );

diff --git 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 (
     <PageMainContent>
@@ -40,7 +35,6 @@ export default function DataCatalogContainer() {
       <CatalogView
         datasets={allDatasets}
         onFilterChanges={() => controlVars}
-        onCardNavigate={handleCardNavigation}
       />
     </PageMainContent>
   );