fix: offline soil id displays (#2662)

Correct various offline Soil ID displays to reflect intended behavior for soil ID data that was loaded before going offline. Clean up some nearby offline behavior while we're there.
techmatters · Dec 18, 2024 · b910c6e · b910c6e
1 parent 922e94f
commit b910c6e
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 58 deletions.
diff --git a/dev-client/__tests__/snapshot/__snapshots__/SiteTabsScreen-test.tsx.snap b/dev-client/__tests__/snapshot/__snapshots__/SiteTabsScreen-test.tsx.snap
@@ -1991,9 +1991,13 @@ exports[`renders correctly 1`] = `
                                        
                                     </Text>
                                     <Text
-                                      style={{}}
+                                      style={
+                                        {
+                                          "fontStyle": "italic",
+                                        }
+                                      }
                                     >
-                                      Loading…
+                                      Not available offline
                                     </Text>
                                   </Text>
                                   <Text
@@ -2019,9 +2023,13 @@ exports[`renders correctly 1`] = `
                                       : 
                                     </Text>
                                     <Text
-                                      style={{}}
+                                      style={
+                                        {
+                                          "fontStyle": "italic",
+                                        }
+                                      }
                                     >
-                                      Loading…
+                                      Not available offline
                                     </Text>
                                   </Text>
                                   <View

diff --git a/dev-client/src/components/SoilIdStatusDisplay.tsx b/dev-client/src/components/SoilIdStatusDisplay.tsx
@@ -19,23 +19,32 @@ import {ReactNode} from 'react';
 
 import {SoilIdStatus} from 'terraso-client-shared/soilId/soilIdTypes';
 
+import {useIsOffline} from 'terraso-mobile-client/hooks/connectivityHooks';
+
 export type SoilIdStatusDisplayProps = {
   status: SoilIdStatus;
 
+  offline: ReactNode;
   loading: ReactNode;
   error: ReactNode;
   noData: ReactNode;
   data: ReactNode;
 };
 export const SoilIdStatusDisplay = ({
   status,
+  offline,
   loading,
   error,
   noData,
   data,
 }: SoilIdStatusDisplayProps) => {
+  const isOffline = useIsOffline();
   if (status === 'loading') {
-    return loading;
+    /*
+     * Don't show a loading indicator when offline. Other statuses indicate a completed Soil ID API call,
+     * which are Ok to display to the user even in offline mode.
+     */
+    return isOffline ? offline : loading;
   } else if (status === 'error') {
     return error;
   } else if (status === 'DATA_UNAVAILABLE') {

diff --git a/dev-client/src/screens/LocationScreens/components/LocationSoilIdCard.tsx b/dev-client/src/screens/LocationScreens/components/LocationSoilIdCard.tsx
@@ -137,6 +137,7 @@ const MatchContent = ({
         </Text>
         <SoilIdStatusDisplay
           status={status}
+          offline={<Text italic>{t('general.not_available_offine')}</Text>}
           loading={<Text>{t('soil.loading')}</Text>}
           error={<Text>{t('soil.error')}</Text>}
           noData={<Text>{t('soil.no_matches')}</Text>}
@@ -151,6 +152,7 @@ const MatchContent = ({
         <Text bold>{t('soil.ecological_site_name')}: </Text>
         <SoilIdStatusDisplay
           status={status}
+          offline={<Text italic>{t('general.not_available_offine')}</Text>}
           loading={<Text>{t('soil.loading')}</Text>}
           error={<Text>{t('soil.error')}</Text>}
           noData={<Text>{t('soil.no_matches')}</Text>}

diff --git a/dev-client/src/screens/LocationScreens/components/soilId/SoilIdMatchesSection.tsx b/dev-client/src/screens/LocationScreens/components/soilId/SoilIdMatchesSection.tsx
@@ -28,6 +28,7 @@ import {
   Heading,
   Row,
 } from 'terraso-mobile-client/components/NativeBaseAdapters';
+import {RestrictByConnectivity} from 'terraso-mobile-client/components/restrictions/RestrictByConnectivity';
 import {InfoSheet} from 'terraso-mobile-client/components/sheets/InfoSheet';
 import {SiteRoleContextProvider} from 'terraso-mobile-client/context/SiteRoleContext';
 import {useIsOffline} from 'terraso-mobile-client/hooks/connectivityHooks';
@@ -65,26 +66,23 @@ export const SoilIdMatchesSection = ({
           <TopSoilMatchesInfoContent isSite={isSite} />
         </InfoButton>
       </Row>
-      <MatchTilesOrMessage siteId={siteId} coords={coords} />
+      <RestrictByConnectivity offline={true}>
+        <OfflineMessageBox message={t('site.soil_id.matches.offline')} />
+      </RestrictByConnectivity>
+      <MatchTiles siteId={siteId} coords={coords} />
     </ScreenContentSection>
   );
 };
 
-const MatchTilesOrMessage = ({siteId, coords}: SoilIdMatchesSectionProps) => {
+const MatchTiles = ({siteId, coords}: SoilIdMatchesSectionProps) => {
   const isOffline = useIsOffline();
-  const {t} = useTranslation();
-
   const soilIdData = useSoilIdData(coords, siteId);
   const status = soilIdData.status;
   const isSite = !!siteId;
 
-  if (isOffline) {
-    return <OfflineMessageBox message={t('site.soil_id.matches.offline')} />;
-  }
-
   switch (status) {
     case 'loading':
-      return <ActivityIndicator size="small" />;
+      return isOffline ? <></> : <ActivityIndicator size="small" />;
     case 'ready': {
       if (isSite) {
         return getSortedDataBasedMatches(soilIdData).map(dataMatch => (

diff --git a/dev-client/src/screens/LocationScreens/components/soilInfo/PropertiesScoreDisplay.tsx b/dev-client/src/screens/LocationScreens/components/soilInfo/PropertiesScoreDisplay.tsx
@@ -31,9 +31,9 @@ import {
   Heading,
   Row,
 } from 'terraso-mobile-client/components/NativeBaseAdapters';
+import {RestrictByConnectivity} from 'terraso-mobile-client/components/restrictions/RestrictByConnectivity';
 import {rowsFromSoilIdData} from 'terraso-mobile-client/components/tables/soilProperties/SoilPropertiesData';
 import {SoilPropertiesDataTable} from 'terraso-mobile-client/components/tables/soilProperties/SoilPropertiesDataTable';
-import {useIsOffline} from 'terraso-mobile-client/hooks/connectivityHooks';
 import {OfflineMessageBox} from 'terraso-mobile-client/screens/LocationScreens/components/soilId/messageBoxes/OfflineMessageBox';
 import {ScoreTile} from 'terraso-mobile-client/screens/LocationScreens/components/soilInfo/ScoreTile';
 import {SoilPropertiesScoreInfoContent} from 'terraso-mobile-client/screens/LocationScreens/components/soilInfo/SoilPropertiesScoreInfoContent';
@@ -53,8 +53,6 @@ export function PropertiesScoreDisplay({
     [match.soilInfo.soilData],
   );
 
-  const isOffline = useIsOffline();
-
   return (
     <Column space="16px">
       <Row justifyContent="space-between" alignItems="center">
@@ -72,13 +70,12 @@ export function PropertiesScoreDisplay({
         </Row>
         <ScoreTile score={matchInfo.score} />
       </Row>
-      {isOffline ? (
+      <RestrictByConnectivity offline={true}>
         <OfflineMessageBox
           message={t('site.soil_id.soil_properties_score_info.offline')}
         />
-      ) : (
-        <SoilPropertiesDataTable rows={rows} />
-      )}
+      </RestrictByConnectivity>
+      <SoilPropertiesDataTable rows={rows} />
     </Column>
   );
 }
diff --git a/dev-client/src/screens/SitesScreen/components/TemporaryLocationCallout.tsx b/dev-client/src/screens/SitesScreen/components/TemporaryLocationCallout.tsx
@@ -95,43 +95,29 @@ export const TemporaryLocationCallout = ({
           <CalloutDetail
             label={t('site.soil_id_prediction')}
             value={
-              isOffline ? (
-                <NotAvailableOffline />
-              ) : (
-                <TopSoilMatchDisplay
-                  status={soilIdData.status}
-                  topSoilMatch={topSoilMatch}
-                  t={t}
-                />
-              )
+              <TopSoilMatchDisplay
+                status={soilIdData.status}
+                topSoilMatch={topSoilMatch}
+                t={t}
+              />
             }
           />
           <Divider />
           <CalloutDetail
             label={t('site.ecological_site_prediction')}
             value={
-              isOffline ? (
-                <NotAvailableOffline />
-              ) : (
-                <EcologicalSiteMatchDisplay
-                  status={soilIdData.status}
-                  topSoilMatch={topSoilMatch}
-                  t={t}
-                />
-              )
+              <EcologicalSiteMatchDisplay
+                status={soilIdData.status}
+                topSoilMatch={topSoilMatch}
+                t={t}
+              />
             }
           />
           <Divider />
         </>
         <CalloutDetail
           label={t('site.elevation_label')}
-          value={
-            isOffline ? (
-              <NotAvailableOffline />
-            ) : (
-              <ElevationDisplay elevation={elevation} t={t} />
-            )
-          }
+          value={<ElevationDisplay elevation={elevation} t={t} />}
         />
         <Divider />
         <Row justifyContent="flex-end">
@@ -157,20 +143,21 @@ export const TemporaryLocationCallout = ({
   );
 };
 
-type SoilIdStatusDisplayElevationProps = {
+type ElevationDisplayProps = {
   elevation: ElevationRecord;
   t: TFunction;
 };
 
-const ElevationDisplay = ({
-  elevation,
-  t,
-}: SoilIdStatusDisplayElevationProps) => {
-  if (elevation.fetching) {
+const ElevationDisplay = ({elevation, t}: ElevationDisplayProps) => {
+  const isOffline = useIsOffline();
+
+  if (isOffline) {
+    return <NotAvailableOffline />;
+  } else if (elevation.fetching) {
     return <ActivityIndicator size="small" />;
+  } else {
+    return <Text bold>{renderElevation(t, elevation.value)}</Text>;
   }
-
-  return <Text bold>{renderElevation(t, elevation.value)}</Text>;
 };
 
 type SoilIdStatusDisplayTopMatchProps = {
@@ -187,6 +174,7 @@ const TopSoilMatchDisplay = ({
   return (
     <SoilIdStatusDisplay
       status={status}
+      offline={<NotAvailableOffline />}
       loading={<ActivityIndicator size="small" />}
       error={
         <Text bold textTransform="uppercase" color="error.main">
@@ -215,6 +203,7 @@ const EcologicalSiteMatchDisplay = ({
   return (
     <SoilIdStatusDisplay
       status={status}
+      offline={<NotAvailableOffline />}
       loading={<ActivityIndicator size="small" />}
       error={
         <Text bold textTransform="uppercase" color="error.main">

diff --git a/dev-client/src/translations/en.json b/dev-client/src/translations/en.json
@@ -125,8 +125,7 @@
                 "native_lands_intro": "Soil resources for Native lands:",
                 "native_lands_link": "nativeland.info",
                 "native_lands_url": "https://nativeland.info/",
-                "offline_title": "You are offline",
-                "offline_body": "Soil matches will update here when you are online.",
+                "offline": "Soil matches will update when you are online.",
                 "selector": "This is the correct soil",
                 "selected": "Selected Soil"
             },

diff --git a/dev-client/src/translations/es.json b/dev-client/src/translations/es.json
@@ -153,8 +153,7 @@
                 "native_lands_intro": "Recursos de suelos para las tierras indígenas:",
                 "native_lands_link": "nativeland.info",
                 "native_lands_url": "https://nativeland.info/",
-                "offline_title": "Estás fuera de linea",
-                "offline_body": "Las coincidencias de suelos se actualizarán aquí cuando estás sin conexión.",
+                "offline": "Las coincidencias de suelos se actualizarán aquí cuando estás sin conexión.",
                 "selector": "This is the correct soil",
                 "selected": "Selected Soil"
             },