feat: surface cracking screen

techmatters · Feb 9, 2024 · 5086770 · 5086770
1 parent 6d35b18
commit 5086770
Show file tree

Hide file tree

Showing 7 changed files with 79 additions and 10 deletions.
diff --git a/dev-client/package-lock.json b/dev-client/package-lock.json
diff --git a/dev-client/package.json b/dev-client/package.json
@@ -51,7 +51,7 @@
     "react-native-svg": "^14.1.0",
     "react-native-tab-view": "^3.5.2",
     "react-native-vector-icons": "^10.0.3",
-    "terraso-client-shared": "github:techmatters/terraso-client-shared#68f35c7",
+    "terraso-client-shared": "github:techmatters/terraso-client-shared#318e78d",
     "uuid": "^9.0.1",
     "yup": "^1.3.3"
   },

diff --git a/dev-client/src/assets/surface/verticalCracking.png b/dev-client/src/assets/surface/verticalCracking.png
diff --git a/dev-client/src/screens/SoilScreen/SoilScreen.tsx b/dev-client/src/screens/SoilScreen/SoilScreen.tsx
@@ -85,7 +85,7 @@ export const SoilScreen = ({siteId}: {siteId: string}) => {
   return (
     <ScrollView backgroundColor="grey.300">
       <SoilSurfaceStatus
-        required={project ? project.verticalCrackingRequired : true}
+        required={project?.verticalCrackingRequired ?? false}
         complete={Boolean(soilData?.surfaceCracksSelect)}
         siteId={siteId}
       />

diff --git a/dev-client/src/screens/SoilScreen/components/SoilSurfaceScreen.tsx b/dev-client/src/screens/SoilScreen/components/SoilSurfaceScreen.tsx
@@ -15,14 +15,76 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 import {ScreenScaffold} from 'terraso-mobile-client/screens/ScreenScaffold';
-import {Text} from 'terraso-mobile-client/components/NativeBaseAdapters';
+import {
+  Box,
+  Column,
+  Heading,
+  Paragraph,
+} from 'terraso-mobile-client/components/NativeBaseAdapters';
+import {useTranslation} from 'react-i18next';
+import {useDispatch, useSelector} from 'terraso-mobile-client/store';
+import {selectSite} from 'terraso-client-shared/selectors';
+import {AppBar} from 'terraso-mobile-client/navigation/components/AppBar';
+import {Image} from 'react-native';
+import {LastModified} from 'terraso-mobile-client/components/LastModified';
+import {Fab, Select} from 'native-base';
+import {
+  SurfaceCracks,
+  surfaceCracks,
+} from 'terraso-client-shared/soilId/soilIdTypes';
+import {Icon} from 'terraso-mobile-client/components/Icons';
+import {useNavigation} from 'terraso-mobile-client/navigation/hooks/useNavigation';
+import {useCallback} from 'react';
+import {updateSoilData} from 'terraso-client-shared/soilId/soilIdSlice';
 
 type Props = {siteId: string};
 
-export const SoilSurfaceScreen = ({}: Props) => {
+export const SoilSurfaceScreen = ({siteId}: Props) => {
+  const {t} = useTranslation();
+  const site = useSelector(selectSite(siteId));
+  const cracking = useSelector(
+    state => state.soilId.soilData[siteId].surfaceCracksSelect,
+  );
+  const navigation = useNavigation();
+  const dispatch = useDispatch();
+  const onUpdate = useCallback(
+    (surfaceCracksSelect: SurfaceCracks) =>
+      dispatch(updateSoilData({siteId, surfaceCracksSelect})),
+    [dispatch, siteId],
+  );
+
   return (
-    <ScreenScaffold>
-      <Text>Unimplemented soil surface screen</Text>
+    <ScreenScaffold AppBar={<AppBar title={site.name} />}>
+      <Column padding="md">
+        <Heading variant="h6">
+          {t('soil.collection_method.verticalCracking')}
+        </Heading>
+        <LastModified />
+        <Select
+          selectedValue={cracking ?? undefined}
+          onValueChange={onUpdate as (_: string) => void}>
+          {surfaceCracks.map(crack => (
+            <Select.Item
+              key={crack}
+              value={crack}
+              label={t(`soil.verticalCracking.${crack}`)}
+            />
+          ))}
+        </Select>
+        <Box height="lg" />
+        <Paragraph>{t('soil.verticalCracking_description')}</Paragraph>
+        <Box width="100%" alignItems="center">
+          <Image
+            source={require('terraso-mobile-client/assets/surface/verticalCracking.png')}
+          />
+        </Box>
+      </Column>
+      <Fab
+        leftIcon={<Icon name="check" />}
+        label={t('general.done_fab')}
+        isDisabled={!cracking}
+        onPress={() => navigation.pop()}
+      />
     </ScreenScaffold>
   );
 };
diff --git a/dev-client/src/screens/SoilScreen/components/SoilSurfaceStatus.tsx b/dev-client/src/screens/SoilScreen/components/SoilSurfaceStatus.tsx
@@ -25,6 +25,7 @@ type Props = {siteId: string} & Pick<
 
 import {useNavigation} from 'terraso-mobile-client/navigation/hooks/useNavigation';
 import {
+  Column,
   Heading,
   Row,
 } from 'terraso-mobile-client/components/NativeBaseAdapters';
@@ -38,7 +39,7 @@ export const SoilSurfaceStatus = ({required, complete, siteId}: Props) => {
   }, [navigation, siteId]);
 
   return (
-    <>
+    <Column space="1px">
       <Row backgroundColor="background.default" px="16px" py="12px">
         <Heading variant="h6">{t('soil.surface')}</Heading>
       </Row>
@@ -48,6 +49,6 @@ export const SoilSurfaceStatus = ({required, complete, siteId}: Props) => {
         label={t('soil.collection_method.verticalCracking')}
         onPress={onPress}
       />
-    </>
+    </Column>
   );
 };
diff --git a/dev-client/src/translations/en.json b/dev-client/src/translations/en.json
@@ -434,6 +434,12 @@
       "photos": "Photos",
       "notes": "Notes"
     },
+    "verticalCracking_description": "Vertical cracks may appear on the soil surface when some soils experience changes in moisture or temperature. The cracks may be permanent, or they may disappear after some time.\n\nVertical cracks are at least 5 mm (3/16”) wide and 25 cm (10”) deep. You should be able to place a pencil inside the cracks.",
+    "verticalCracking": {
+      "NO_CRACKING": "No Cracking",
+      "SURFACE_CRACKING_ONLY": "Surface Cracking Only",
+      "DEEP_VERTICAL_CRACKS": "Deep Vertical Cracks"
+    },
     "data": {
       "rockFragmentVolume": "Rock fragment",
       "texture": "Texture",