From f3f68cf93cf311746e82df4309a52f45435a5797 Mon Sep 17 00:00:00 2001 From: Hanbyul Jo Date: Tue, 17 Sep 2024 12:56:17 -0400 Subject: [PATCH 1/3] Mark the taxonomy can be null --- app/scripts/components/common/browse-controls/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/scripts/components/common/browse-controls/index.tsx b/app/scripts/components/common/browse-controls/index.tsx index 2275de899..2914f677c 100644 --- a/app/scripts/components/common/browse-controls/index.tsx +++ b/app/scripts/components/common/browse-controls/index.tsx @@ -93,7 +93,7 @@ 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] as string[] | null)?.length ? taxonomies[name][0] as string : 'all'} onChange={(v) => { onAction(FilterActions.TAXONOMY, { key: name, value: v }); }} From 7c31074e5640bfa7b82af64c2f955626ca7bfb81 Mon Sep 17 00:00:00 2001 From: Hanbyul Jo Date: Tue, 17 Sep 2024 13:08:56 -0400 Subject: [PATCH 2/3] Add old props of Card to be compatible, no push option for usefilterswithQS --- app/scripts/components/common/card/index.tsx | 30 +++++++++++++++---- .../controls/hooks/use-filters-with-query.ts | 19 ++++-------- 2 files changed, 30 insertions(+), 19 deletions(-) diff --git a/app/scripts/components/common/card/index.tsx b/app/scripts/components/common/card/index.tsx index d9d45801c..1125ad60b 100644 --- a/app/scripts/components/common/card/index.tsx +++ b/app/scripts/components/common/card/index.tsx @@ -11,6 +11,7 @@ import { themeVal, listReset, } from '@devseed-ui/theme-provider'; +import SmartLink from '../smart-link'; import { CardBody, CardBlank, CardHeader, CardHeadline, CardTitle, CardOverline } from './styles'; import HorizontalInfoCard, { HorizontalCardStyles } from './horizontal-info-card'; import { variableBaseType, variableGlsp } from '$styles/variable-utils'; @@ -225,11 +226,9 @@ export interface LinkProperties { onLinkClick?: MouseEventHandler; } -export interface CardComponentProps { +export interface CardComponentBaseProps { title: JSX.Element | string; - linkProperties: { - linkTo: string, - } & LinkProperties; + linkLabel?: string; className?: string; cardType?: CardType; @@ -244,7 +243,19 @@ export interface CardComponentProps { onCardClickCapture?: MouseEventHandler; } -function CardComponent(props: CardComponentProps) { +// @TODO: Consolidate these props when the instance adapts the new syntax +export interface CardComponentPropsDeprecated extends CardComponentBaseProps { + linkTo: string; + onLinkClick: MouseEventHandler; +} +export interface CardComponentProps extends CardComponentBaseProps { + linkProperties: { + linkTo: string, + } & LinkProperties; + +} + +function CardComponent(props: (CardComponentProps & CardComponentPropsDeprecated)) { const { className, title, @@ -258,8 +269,15 @@ function CardComponent(props: CardComponentProps) { tagLabels, parentTo, footerContent, + linkTo, + onLinkClick, onCardClickCapture, - linkProperties + linkProperties = { + LinkElement: SmartLink, + pathAttributeKeyName: 'to', + linkTo, + onLinkClick + } } = props; const isExternalLink = /^https?:\/\//.test(linkProperties.linkTo); 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 f519366d3..de077fc4c 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 @@ -33,21 +33,13 @@ export function useFiltersWithURLAtom(): UseFiltersWithQueryResult { } export function useFiltersWithQS({ - navigate, - push=false + navigate }: { - navigate: any, - push?: boolean, + navigate: any }): UseFiltersWithQueryResult { - let navCommit = navigate; - - if (push) { - navCommit = ({ search }) => navigate.push(`?${search}`); - } - const useQsState = useQsStateCreator({ - commit: navCommit + commit: navigate }); const [search, setSearch] = useQsState.memo( @@ -68,9 +60,10 @@ export function useFiltersWithURLAtom(): UseFiltersWithQueryResult { [] ); + const onAction = useCallback( - (action, value) => - onFilterAction(action, value, taxonomies, setSearch, setTaxonomies), + (action, value) => { + onFilterAction(action, value, taxonomies, setSearch, setTaxonomies);}, [setSearch, setTaxonomies, taxonomies] ); From f69bb33aab47abf08e4fde5cbf95490130bd6ae0 Mon Sep 17 00:00:00 2001 From: Hanbyul Jo Date: Tue, 17 Sep 2024 15:56:05 -0400 Subject: [PATCH 3/3] Put type guard --- app/scripts/components/common/card/index.tsx | 34 ++++++++++++++------ 1 file changed, 24 insertions(+), 10 deletions(-) diff --git a/app/scripts/components/common/card/index.tsx b/app/scripts/components/common/card/index.tsx index 1125ad60b..770fcd54f 100644 --- a/app/scripts/components/common/card/index.tsx +++ b/app/scripts/components/common/card/index.tsx @@ -246,16 +246,22 @@ export interface CardComponentBaseProps { // @TODO: Consolidate these props when the instance adapts the new syntax export interface CardComponentPropsDeprecated extends CardComponentBaseProps { linkTo: string; - onLinkClick: MouseEventHandler; + onLinkClick?: MouseEventHandler; } export interface CardComponentProps extends CardComponentBaseProps { linkProperties: { linkTo: string, } & LinkProperties; +} +type CardComponentPropsType = CardComponentProps | CardComponentPropsDeprecated; + +// Type guard to check if props has linkProperties +function hasLinkProperties(props: CardComponentPropsType): props is CardComponentProps { + return !!((props as CardComponentProps).linkProperties); } -function CardComponent(props: (CardComponentProps & CardComponentPropsDeprecated)) { +function CardComponent(props: CardComponentPropsType) { const { className, title, @@ -269,16 +275,24 @@ function CardComponent(props: (CardComponentProps & CardComponentPropsDeprecated tagLabels, parentTo, footerContent, - linkTo, - onLinkClick, - onCardClickCapture, + onCardClickCapture + } = props; + + let linkProperties; + + if (hasLinkProperties(props)) { + // Handle new props with linkProperties + const { linkProperties: linkPropertiesProps } = props; + linkProperties = linkPropertiesProps; + } else { + const { linkTo, onLinkClick, } = props; linkProperties = { - LinkElement: SmartLink, + to: linkTo, + onLinkClick, pathAttributeKeyName: 'to', - linkTo, - onLinkClick - } - } = props; + linkComponent: SmartLink + }; + } const isExternalLink = /^https?:\/\//.test(linkProperties.linkTo);