From 5488276f2f599bc542786d95e5bf50cd7dcfc78f Mon Sep 17 00:00:00 2001
From: Ruxandra Machedon <ruxandra@techmatters.org>
Date: Tue, 18 Jun 2024 13:00:35 -0400
Subject: [PATCH] feat: load soil ID data in temp location callout

---
 .../components/TemporaryLocationCallout.tsx   | 39 ++++++++++++-------
 1 file changed, 25 insertions(+), 14 deletions(-)

diff --git a/dev-client/src/screens/HomeScreen/components/TemporaryLocationCallout.tsx b/dev-client/src/screens/HomeScreen/components/TemporaryLocationCallout.tsx
index de98896dc7..f24a9e92fd 100644
--- 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,8 +51,8 @@ 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) {
@@ -61,6 +60,10 @@ export const TemporaryLocationCallout = ({
     }
   }, [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')}