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 && ( - + {result !== undefined && ( + + + {t('soil.texture.guide.result', { + result: t(`soil.texture.class.${result}`), + })} + + + + + )} - )} - - - + + + )} + ); };