diff --git a/dev-client/src/components/links/ExternalLink.tsx b/dev-client/src/components/links/ExternalLink.tsx index b6b2af408..26a1cc3a4 100644 --- a/dev-client/src/components/links/ExternalLink.tsx +++ b/dev-client/src/components/links/ExternalLink.tsx @@ -15,7 +15,7 @@ * along with this program. If not, see https://www.gnu.org/licenses/. */ -import React from 'react'; +import React, {useCallback, useMemo} from 'react'; import {Linking, Pressable, StyleSheet, View} from 'react-native'; import {IconButton as NativeIconButton} from 'native-base'; @@ -26,6 +26,7 @@ import { Row, Text, } from 'terraso-mobile-client/components/NativeBaseAdapters'; +import {validateUrl} from 'terraso-mobile-client/util'; export type ExternalLinkProps = { label: string; @@ -38,23 +39,28 @@ export const ExternalLink = React.forwardRef( } /> ); + const isValidUrl = useMemo(() => validateUrl(url), [url]); + const openUrl = useCallback(() => Linking.openURL(url), [url]); + return ( - - Linking.openURL(url)}> - - - - {label} - - {icon} - - - - + isValidUrl && ( + + + + + + {label} + + {icon} + + + + + ) ); }, ); diff --git a/dev-client/src/components/links/InternalLink.tsx b/dev-client/src/components/links/InternalLink.tsx index 674d7b826..07050c901 100644 --- a/dev-client/src/components/links/InternalLink.tsx +++ b/dev-client/src/components/links/InternalLink.tsx @@ -15,31 +15,32 @@ * along with this program. If not, see https://www.gnu.org/licenses/. */ -import {useCallback} from 'react'; +import {useCallback, useMemo} from 'react'; import {Linking} from 'react-native'; import {Link} from 'native-base'; import {InterfaceLinkProps} from 'native-base/lib/typescript/components/primitives/Link/types'; +import {validateUrl} from 'terraso-mobile-client/util'; + type InternalLinkProps = { label: string; onPress?: InterfaceLinkProps['onPress']; - url?: string; + url: string; }; export default function InternalLink({label, onPress, url}: InternalLinkProps) { - const openUrl = useCallback(() => { - if (url !== undefined) { - Linking.openURL(url); - } - }, [url]); + const isValidUrl = useMemo(() => validateUrl(url), [url]); + const openUrl = useCallback(() => Linking.openURL(url), [url]); return ( - - {label} - + isValidUrl && ( + + {label} + + ) ); } diff --git a/dev-client/src/screens/LocationScreens/components/soilInfo/SoilInfoDisplay.tsx b/dev-client/src/screens/LocationScreens/components/soilInfo/SoilInfoDisplay.tsx index 114effcfa..b88b48117 100644 --- a/dev-client/src/screens/LocationScreens/components/soilInfo/SoilInfoDisplay.tsx +++ b/dev-client/src/screens/LocationScreens/components/soilInfo/SoilInfoDisplay.tsx @@ -15,7 +15,6 @@ * along with this program. If not, see https://www.gnu.org/licenses/. */ -import {useMemo} from 'react'; import {useTranslation} from 'react-i18next'; import {SoilInfo} from 'terraso-client-shared/graphqlSchema/graphql'; @@ -28,7 +27,6 @@ import { Heading, Text, } from 'terraso-mobile-client/components/NativeBaseAdapters'; -import {validateUrl} from 'terraso-mobile-client/util'; type SoilInfoDisplayProps = { dataSource: string; @@ -38,27 +36,16 @@ type SoilInfoDisplayProps = { export function SoilInfoDisplay({dataSource, soilInfo}: SoilInfoDisplayProps) { const {t} = useTranslation(); - const hasValidUrl = useMemo( - () => validateUrl(soilInfo.soilSeries.fullDescriptionUrl), - [soilInfo], - ); - const hasValidEsUrl = useMemo( - () => validateUrl(soilInfo.ecologicalSite?.url), - [soilInfo], - ); - return ( {soilInfo.soilSeries.taxonomySubgroup} {soilInfo.soilSeries.description} - {hasValidUrl && ( - - )} + {soilInfo.ecologicalSite && ( <> @@ -75,12 +62,10 @@ export function SoilInfoDisplay({dataSource, soilInfo}: SoilInfoDisplayProps) { }} /> - {hasValidEsUrl && ( - - )} + )}