feat: load soil ID data in temp location callout

techmatters · Jun 18, 2024 · 5488276 · 5488276
1 parent 5cd902e
commit 5488276
Showing 1 changed file with 25 additions and 14 deletions.
diff --git a/dev-client/src/screens/HomeScreen/components/TemporaryLocationCallout.tsx b/dev-client/src/screens/HomeScreen/components/TemporaryLocationCallout.tsx
@@ -31,14 +31,13 @@ import {
   Row,
 } from 'terraso-mobile-client/components/NativeBaseAdapters';
 import {renderElevation} from 'terraso-mobile-client/components/util/site';
+import {useSoilIdData} from 'terraso-mobile-client/hooks/soilIdHooks';
+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';
 
-const TEMP_SOIL_ID_VALUE = 'Clifton';
-const TEMP_ECO_SITE_PREDICTION = 'Loamy Upland';
-
 type Props = {
   coords: Coords;
   closeCallout: () => void;
@@ -52,15 +51,19 @@ export const TemporaryLocationCallout = ({
 }: Props) => {
   const {t} = useTranslation();
   const navigation = useNavigation();
-  const [siteElevationValue, setSiteElevationValue] = useState(0);
 
+  const [siteElevationValue, setSiteElevationValue] = useState(0);
   useMemo(async () => {
     const elevation = await getElevation(coords.latitude, coords.longitude);
     if (elevation !== undefined) {
       setSiteElevationValue(elevation);
     }
   }, [coords]);
 
+  const soilIdData = useSoilIdData(coords);
+  const isSoilIdReady = soilIdData.status === 'ready';
+  const topSoilMatch = useMemo(() => getTopMatch(soilIdData), [soilIdData]);
+
   const onCreate = useCallback(() => {
     navigation.navigate('CREATE_SITE', {
       coords,
@@ -81,16 +84,24 @@ export const TemporaryLocationCallout = ({
       buttons={<CloseButton onPress={closeCallout} />}
       isPopover={true}>
       <Column mt="12px" space="12px">
-        <CalloutDetail
-          label={t('site.soil_id_prediction')}
-          value={TEMP_SOIL_ID_VALUE}
-        />
-        <Divider />
-        <CalloutDetail
-          label={t('site.ecological_site_prediction')}
-          value={TEMP_ECO_SITE_PREDICTION}
-        />
-        <Divider />
+        {!isSoilIdReady && <ActivityIndicator size="small" />}
+        {topSoilMatch && (
+          <>
+            <CalloutDetail
+              label={t('site.soil_id_prediction')}
+              value={topSoilMatch.soilInfo.soilSeries.name}
+            />
+            <Divider />
+            <CalloutDetail
+              label={t('site.ecological_site_prediction')}
+              value={
+                topSoilMatch.soilInfo.ecologicalSite?.name ??
+                t('site.soil_id.soil_info.no_matches')
+              }
+            />
+            <Divider />
+          </>
+        )}
         {siteElevationValue ? (
           <CalloutDetail
             label={t('site.elevation_label')}