fix: validate soil id urls before allowing users to navigate to them

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

Hide file tree

Showing 2 changed files with 32 additions and 8 deletions.
diff --git a/dev-client/src/screens/LocationScreens/components/soilInfo/SoilInfoDisplay.tsx b/dev-client/src/screens/LocationScreens/components/soilInfo/SoilInfoDisplay.tsx
@@ -15,6 +15,7 @@
  * 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';
@@ -27,6 +28,7 @@ import {
   Heading,
   Text,
 } from 'terraso-mobile-client/components/NativeBaseAdapters';
+import {validateUrl} from 'terraso-mobile-client/util';
 
 type SoilInfoDisplayProps = {
   dataSource: string;
@@ -35,16 +37,28 @@ 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>
-      <InternalLink
-        label={t('site.soil_id.soil_info.series_descr_url')}
-        url={soilInfo.soilSeries.fullDescriptionUrl}
-      />
+      {hasValidUrl && (
+        <InternalLink
+          label={t('site.soil_id.soil_info.series_descr_url')}
+          url={soilInfo.soilSeries.fullDescriptionUrl}
+        />
+      )}
       {soilInfo.ecologicalSite && (
         <>
           <Box>
@@ -61,10 +75,12 @@ export function SoilInfoDisplay({dataSource, soilInfo}: SoilInfoDisplayProps) {
               }}
             />
           </Box>
-          <InternalLink
-            label={t('site.soil_id.soil_info.eco_descr_url')}
-            url={soilInfo.ecologicalSite.url}
-          />
+          {hasValidEsUrl && (
+            <InternalLink
+              label={t('site.soil_id.soil_info.eco_descr_url')}
+              url={soilInfo.ecologicalSite.url}
+            />
+          )}
         </>
       )}
       <Box>

diff --git a/dev-client/src/util.ts b/dev-client/src/util.ts
@@ -164,3 +164,11 @@ export const isSiteManager = matchesRole([
 export const getSoilWebUrl = (coords: Coords) => {
   return `https://casoilresource.lawr.ucdavis.edu/gmap/?loc=${coords.latitude},${coords.longitude}`;
 };
+
+export const validateUrl = (url?: string): URL | false => {
+  try {
+    return url ? new URL(url) : false;
+  } catch {
+    return false;
+  }
+};