refactor: hide all invalid links

techmatters · Jul 5, 2024 · c7c9e7d · c7c9e7d
1 parent de997cd
commit c7c9e7d
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 53 deletions.
diff --git 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(
       <NativeIconButton ref={ref} icon={<Icon name="open-in-new" />} />
     );
 
+    const isValidUrl = useMemo(() => validateUrl(url), [url]);
+    const openUrl = useCallback(() => Linking.openURL(url), [url]);
+
     return (
-      <View style={styles.container}>
-        <Pressable onPress={() => Linking.openURL(url)}>
-          <Box>
-            <Row alignItems="center">
-              <Text
-                color="primary.main"
-                fontSize="md"
-                textTransform="uppercase"
-                style={styles.label}>
-                {label}
-              </Text>
-              {icon}
-            </Row>
-          </Box>
-        </Pressable>
-      </View>
+      isValidUrl && (
+        <View style={styles.container}>
+          <Pressable onPress={openUrl}>
+            <Box>
+              <Row alignItems="center">
+                <Text
+                  color="primary.main"
+                  fontSize="md"
+                  textTransform="uppercase"
+                  style={styles.label}>
+                  {label}
+                </Text>
+                {icon}
+              </Row>
+            </Box>
+          </Pressable>
+        </View>
+      )
     );
   },
 );

diff --git 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 (
-    <Link
-      _text={{color: 'primary.main'}}
-      isUnderlined={true}
-      onPress={onPress ? onPress : openUrl}>
-      {label}
-    </Link>
+    isValidUrl && (
+      <Link
+        _text={{color: 'primary.main'}}
+        isUnderlined={true}
+        onPress={onPress ? onPress : openUrl}>
+        {label}
+      </Link>
+    )
   );
 }
diff --git 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 (
     <Column space={3}>
       <Heading variant="h6" fontStyle="italic" pb="10px">
         {soilInfo.soilSeries.taxonomySubgroup}
       </Heading>
       <Text variant="body1">{soilInfo.soilSeries.description}</Text>
-      {hasValidUrl && (
-        <InternalLink
-          label={t('site.soil_id.soil_info.series_descr_url')}
-          url={soilInfo.soilSeries.fullDescriptionUrl}
-        />
-      )}
+      <InternalLink
+        label={t('site.soil_id.soil_info.series_descr_url')}
+        url={soilInfo.soilSeries.fullDescriptionUrl}
+      />
       {soilInfo.ecologicalSite && (
         <>
           <Box>
@@ -75,12 +62,10 @@ export function SoilInfoDisplay({dataSource, soilInfo}: SoilInfoDisplayProps) {
               }}
             />
           </Box>
-          {hasValidEsUrl && (
-            <InternalLink
-              label={t('site.soil_id.soil_info.eco_descr_url')}
-              url={soilInfo.ecologicalSite.url}
-            />
-          )}
+          <InternalLink
+            label={t('site.soil_id.soil_info.eco_descr_url')}
+            url={soilInfo.ecologicalSite.url}
+          />
         </>
       )}
       <Box>