refactor: encapsulate elevation data usage in callout

dev-client/src/hooks/useElevationData.ts

@@ -0,0 +1,35 @@
+/*
+ * Copyright © 2024 Technology Matters
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published
+ * by the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see https://www.gnu.org/licenses/.
+ */
+
+import {useMemo, useState} from 'react';
+
+import {Coords} from 'terraso-client-shared/types';
+
+import {getElevation} from 'terraso-mobile-client/services';
+
+export const useElevationData = (coords: Coords): number => {
+  const [siteElevationValue, setSiteElevationValue] = useState(0);
+
+  useMemo(async () => {
+    const elevation = await getElevation(coords.latitude, coords.longitude);
+    if (elevation !== undefined) {
+      setSiteElevationValue(elevation);
+    }
+  }, [coords]);
+
+  return siteElevationValue;
+};

dev-client/src/screens/HomeScreen/components/TemporaryLocationCallout.tsx

@@ -15,7 +15,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import {useCallback, useMemo, useState} from 'react';
+import {useCallback, useMemo} from 'react';
 import {useTranslation} from 'react-i18next';
 import {ActivityIndicator} from 'react-native-paper';
 
@@ -32,11 +32,11 @@ import {
 } from 'terraso-mobile-client/components/NativeBaseAdapters';
 import {renderElevation} from 'terraso-mobile-client/components/util/site';
 import {useSoilIdData} from 'terraso-mobile-client/hooks/soilIdHooks';
+import {useElevationData} from 'terraso-mobile-client/hooks/useElevationData';
 import {getTopMatch} from 'terraso-mobile-client/model/soilId/soilIdRanking';
 import {useNavigation} from 'terraso-mobile-client/navigation/hooks/useNavigation';
 import {CalloutDetail} from 'terraso-mobile-client/screens/HomeScreen/components/CalloutDetail';
 import {LatLngDetail} from 'terraso-mobile-client/screens/HomeScreen/components/LatLngDetail';
-import {getElevation} from 'terraso-mobile-client/services';
 
 type Props = {
   coords: Coords;
@@ -52,25 +52,18 @@ export const TemporaryLocationCallout = ({
   const {t} = useTranslation();
   const navigation = useNavigation();
 
-  const [siteElevationValue, setSiteElevationValue] = useState(0);
-  useMemo(async () => {
-    const elevation = await getElevation(coords.latitude, coords.longitude);
-    if (elevation !== undefined) {
-      setSiteElevationValue(elevation);
-    }
-  }, [coords]);
-
+  const elevation = useElevationData(coords);
   const soilIdData = useSoilIdData(coords);
   const isSoilIdReady = soilIdData.status === 'ready';
   const topSoilMatch = useMemo(() => getTopMatch(soilIdData), [soilIdData]);
 
   const onCreate = useCallback(() => {
     navigation.navigate('CREATE_SITE', {
       coords,
-      elevation: siteElevationValue,
+      elevation: elevation,
     });
     closeCallout();
-  }, [closeCallout, navigation, coords, siteElevationValue]);
+  }, [closeCallout, navigation, coords, elevation]);
 
   const onLearnMore = useCallback(() => {
     navigation.navigate('LOCATION_DASHBOARD', {coords});
@@ -102,10 +95,10 @@ export const TemporaryLocationCallout = ({
             <Divider />
           </>
         )}
-        {siteElevationValue ? (
+        {elevation ? (
           <CalloutDetail
             label={t('site.elevation_label')}
-            value={renderElevation(t, siteElevationValue)}
+            value={renderElevation(t, elevation)}
           />
         ) : (
           <ActivityIndicator size="small" />