diff --git a/dev-client/src/screens/SoilScreen/TextureGuideScreen.tsx b/dev-client/src/screens/SoilScreen/TextureGuideScreen.tsx
index 5061f3d94..d7ef3a0e3 100644
--- a/dev-client/src/screens/SoilScreen/TextureGuideScreen.tsx
+++ b/dev-client/src/screens/SoilScreen/TextureGuideScreen.tsx
@@ -24,6 +24,14 @@ import {ResizeMode, Video} from 'expo-av';
import {Button, ScrollView} from 'native-base';
import {BulletList} from 'terraso-mobile-client/components/BulletList';
+import {
+ useNavToBottomTabsAndShowSyncError,
+ useNavToSiteAndShowSyncError,
+} from 'terraso-mobile-client/components/dataRequirements/handleMissingData';
+import {
+ ScreenDataRequirements,
+ useMemoizedRequirements,
+} from 'terraso-mobile-client/components/dataRequirements/ScreenDataRequirements';
import {Icon} from 'terraso-mobile-client/components/icons/Icon';
import {
Box,
@@ -39,11 +47,15 @@ import {AppBar} from 'terraso-mobile-client/navigation/components/AppBar';
import {useNavigation} from 'terraso-mobile-client/navigation/hooks/useNavigation';
import {ScreenScaffold} from 'terraso-mobile-client/screens/ScreenScaffold';
import {SoilPitInputScreenProps} from 'terraso-mobile-client/screens/SoilScreen/components/SoilPitInputScreenScaffold';
-import {useDispatch} from 'terraso-mobile-client/store';
+import {useDispatch, useSelector} from 'terraso-mobile-client/store';
+import {
+ selectSite,
+ useSiteSoilInterval,
+} from 'terraso-mobile-client/store/selectors';
const LENGTH_IMAGE = require('terraso-mobile-client/assets/texture/guide/length.png');
-export const TextureGuideScreen = (props?: SoilPitInputScreenProps) => {
+export const TextureGuideScreen = (props: SoilPitInputScreenProps) => {
const {t} = useTranslation();
const [ball, setBall] = useState<'YES' | 'NO'>();
const [ribbon, setRibbon] = useState<'YES' | 'NO'>();
@@ -78,9 +90,6 @@ export const TextureGuideScreen = (props?: SoilPitInputScreenProps) => {
const navigation = useNavigation();
const onUseResult = useMemo(() => {
- if (props === undefined) {
- return undefined;
- }
return async () => {
await dispatch(
updateDepthDependentSoilData({
@@ -93,190 +102,220 @@ export const TextureGuideScreen = (props?: SoilPitInputScreenProps) => {
};
}, [props, dispatch, result, navigation]);
+ const site = useSelector(selectSite(props.siteId));
+ const depthInterval = useSiteSoilInterval(
+ props.siteId,
+ props.depthInterval.depthInterval,
+ );
+ const handleMissingSite = useNavToBottomTabsAndShowSyncError();
+ const handleMissingDepth = useNavToSiteAndShowSyncError(props.siteId);
+ const requirements = useMemoizedRequirements([
+ {data: site, doIfMissing: handleMissingSite},
+ {data: depthInterval, doIfMissing: handleMissingDepth},
+ ]);
+
return (
- }
- BottomNavigation={null}>
-
-
-
-
- {t('soil.texture.guide.prepare')}
-
- (
-
-
-
- )}
- />
- {t('soil.texture.guide.wet')}
- (
-
-
-
- )}
- />
- {t('soil.texture.guide.ball')}
- (
-
-
-
- )}
- />
-
-
-
- {ball === 'YES' && (
- <>
+
+ {() => (
+ }
+ BottomNavigation={null}>
+
+
- {t('soil.texture.guide.ribbon')}
+ {t('soil.texture.guide.prepare')}
(
)}
/>
+
+ {t('soil.texture.guide.wet')}
+
+ (
+
+
+
+ )}
+ />
+
+ {t('soil.texture.guide.ball')}
+
+ (
+
+
+
+ )}
+ />
- {ribbon === 'YES' && (
+ {ball === 'YES' && (
<>
-
-
-
+
+ {t('soil.texture.guide.ribbon')}
+
+ (
+
+
+
+ )}
+ />
+
- {ribbonLength !== undefined && (
-
-
- {t('soil.texture.guide.grittyness')}
-
- (
-
-
- first
- second
-
+ {ribbon === 'YES' && (
+ <>
+
+
+
+
+
+
+ {ribbonLength !== undefined && (
+
+
+ {t('soil.texture.guide.grittyness')}
- )}
- />
-
-
-
+ (
+
+
+ first
+ second
+
+
+ )}
+ />
+
+
+
+ )}
+ >
)}
>
)}
- >
- )}
- {result !== undefined && (
-
-
- {t('soil.texture.guide.result', {
- result: t(`soil.texture.class.${result}`),
- })}
-
-
- {onUseResult !== undefined && (
- }
- _text={{textTransform: 'uppercase'}}
- onPress={onUseResult}>
- {t('soil.texture.guide.use_label')}
-
+ {result !== undefined && (
+
+
+ {t('soil.texture.guide.result', {
+ result: t(`soil.texture.class.${result}`),
+ })}
+
+
+
+ }
+ _text={{textTransform: 'uppercase'}}
+ onPress={onUseResult}>
+ {t('soil.texture.guide.use_label')}
+
+
)}
- )}
-
-
-
+
+
+ )}
+
);
};