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 && (
-
- )}
+
>
)}