AOI code cleanup

app/scripts/components/common/card-sources.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Link } from 'react-router-dom';
 import { listReset } from '@devseed-ui/theme-provider';
-import { TaxonomyItem } from '$types/veda';
+import { LinkProperties, TaxonomyItem } from '$types/veda';
 import { FilterActions } from '$components/common//catalog/utils';
 
 const SourcesUl = styled.ul`
@@ -23,11 +22,12 @@ interface SourcesListProps {
   sources?: TaxonomyItem[];
   onSourceClick?: (v: string) => void;
   rootPath?: string;
+  linkProperties: LinkProperties;
 }
 
 export function CardSourcesList(props: SourcesListProps) {
-  const { sources, onSourceClick, rootPath } = props;
-
+  const { sources, onSourceClick, linkProperties, rootPath } = props;
+  const { LinkElement, pathAttributeKeyName } = linkProperties as { LinkElement: React.ElementType, pathAttributeKeyName: string };
   if (!sources?.length) return null;
 
   // No link rendering
@@ -50,19 +50,19 @@ export function CardSourcesList(props: SourcesListProps) {
       <SourcesUl>
         {sources.map((source) => (
           <li key={source.id}>
-            <Link
-              to={`${rootPath}?${FilterActions.TAXONOMY}=${encodeURIComponent(
+            <LinkElement
+              {...{[pathAttributeKeyName]:`${rootPath}?${FilterActions.TAXONOMY}=${encodeURIComponent(
                 JSON.stringify({
                   Source: source.id
                 })
-              )}`}
+              )}`}}
               onClick={(e) => {
                 e.preventDefault();
                 onSourceClick(source.id);
               }}
             >
               {source.name}
-            </Link>
+            </LinkElement>
           </li>
         ))}
       </SourcesUl>

app/scripts/components/common/card/index.tsx

@@ -1,6 +1,6 @@
-import React, { lazy, MouseEventHandler, ComponentType } from 'react';
+import React, { lazy, MouseEventHandler } from 'react';
 import styled, { css } from 'styled-components';
-import { format } from 'date-fns';
+import format from 'date-fns/format';
 import { CollecticonExpandTopRight } from '@devseed-ui/collecticons';
 import {
   glsp,
@@ -16,6 +16,7 @@ import HorizontalInfoCard, { HorizontalCardStyles } from './horizontal-info-card
 import { variableBaseType, variableGlsp } from '$styles/variable-utils';
 import { ElementInteractive } from '$components/common/element-interactive';
 import { Figure } from '$components/common/figure';
+import { LinkProperties } from '$types/veda';
 
 type CardType = 'classic' | 'cover' | 'featured' | 'horizontal-info';
 
@@ -219,12 +220,6 @@ export function ExternalLinkFlag() {
   );
 }
 
-export interface LinkProperties {
-  LinkElement: string | ComponentType<any> | undefined;
-  pathAttributeKeyName: string;
-  onLinkClick?: MouseEventHandler;
-}
-
 export interface LinkWithPathProperties extends LinkProperties {
   linkTo: string;
   isLinkExternal?: boolean;
@@ -250,7 +245,7 @@ export interface CardComponentBaseProps {
 // Specifically: https://github.com/US-GHG-Center/veda-config-ghg/blob/develop/custom-pages/news-and-events/component.tsx#L108
 export interface CardComponentPropsDeprecated extends CardComponentBaseProps {
   linkTo: string;
-  onLinkClick?: MouseEventHandler;
+  onClick?: MouseEventHandler;
   isLinkExternal?: boolean;
 }
 export interface CardComponentProps extends CardComponentBaseProps {
@@ -289,24 +284,23 @@ function CardComponent(props: CardComponentPropsType) {
     const { linkProperties: linkPropertiesProps } = props;
     linkProperties = linkPropertiesProps;
   } else {
-    const { linkTo, onLinkClick, isLinkExternal } = props;
+    const { linkTo, onClick, isLinkExternal } = props;
     linkProperties = {
       linkTo,
-      onLinkClick,
+      onClick,
       pathAttributeKeyName: 'to',
       LinkElement: SmartLink,
       isLinkExternal
     };
   }
 
   const isExternalLink = linkProperties.isLinkExternal ?? /^https?:\/\//.test(linkProperties.linkTo);
-
   return (
     <ElementInteractive
       linkProps={{
         as: linkProperties.LinkElement,
         [linkProperties.pathAttributeKeyName]: linkProperties.linkTo,
-        onLinkClick: linkProperties.onLinkClick,
+        onClick: linkProperties.onClick,
         isLinkExternal: isExternalLink
       }}
       as={CardItem}

app/scripts/components/common/catalog/catalog-card.tsx

@@ -2,12 +2,12 @@ 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, LinkProperties } from "../card";
+import { Card } from "../card";
 import { CardMeta, CardTopicsList } from "../card/styles";
 import { DatasetClassification } from "../dataset-classification";
 import { CardSourcesList } from "../card-sources";
 import TextHighlight from "../text-highlight";
+import { LinkProperties } from '$types/veda';
 import { DatasetData, DatasetLayer } from "$types/veda";
 import { getDatasetPath } from "$utils/routes";
 import { TAXONOMY_SOURCE, TAXONOMY_TOPICS, getAllTaxonomyValues, getTaxonomy } from "$utils/veda-data/taxonomies";
@@ -121,7 +121,7 @@ export const CatalogCard = (props: CatalogCardProps) => {
       overline={
         <CardMeta>
           <DatasetClassification dataset={dataset} />
-          <CardSourcesList sources={sources} />
+          <CardSourcesList sources={sources} linkProperties={linkProperties} />
         </CardMeta>
       }
       linkLabel='View dataset'
@@ -155,7 +155,7 @@ export const CatalogCard = (props: CatalogCardProps) => {
           ) : null}
         </>
       }
-      linkProperties={{...linkProperties, linkTo: linkTo, onLinkClick: handleClick}}
+      linkProperties={{...linkProperties, linkTo: linkTo, onClick: handleClick}}
     />
   );
 };

app/scripts/components/common/catalog/catalog-content.tsx

@@ -3,13 +3,13 @@ import styled from 'styled-components';
 import { glsp, themeVal } from '@devseed-ui/theme-provider';
 import TextHighlight from '../text-highlight';
 import { CollecticonDatasetLayers } from '../icons/dataset-layers';
-import { LinkProperties } from '../card';
 import { prepareDatasets } from './prepare-datasets';
 import FiltersControl from './filters-control';
 import { CatalogCard } from './catalog-card';
 import CatalogTagsContainer from './catalog-tags';
 
 import { FilterActions } from './utils';
+import { LinkProperties } from '$types/veda';
 import { DatasetData, DatasetDataWithEnhancedLayers } from '$types/veda';
 import { CardList } from '$components/common/card/styles';
 import EmptyHub from '$components/common/empty-hub';

app/scripts/components/common/catalog/index.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
 import { themeVal } from '@devseed-ui/theme-provider';
-import { LinkProperties } from '../card';
 import CatalogContent from './catalog-content';
-import { DatasetData } from '$types/veda';
+import { DatasetData, LinkProperties } from '$types/veda';
 import {
   useSlidingStickyHeaderProps
 } from '$components/common/layout-root/useSlidingStickyHeaderProps';