chore: handle android back button during face recognition flow (#215)

ice-blockchain · Nov 23, 2023 · c03d561 · c03d561
1 parent 134c13e
commit c03d561
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 15 deletions.
diff --git a/src/screens/FaceRecognitionFlow/EmotionsAuthCameraFeed/components/EmotionsSentStep/index.tsx b/src/screens/FaceRecognitionFlow/EmotionsAuthCameraFeed/components/EmotionsSentStep/index.tsx
@@ -57,7 +57,10 @@ export function EmotionsSentStep({onGatherMoreEmotions}: Props) {
   }, [emotionsAuthStatus, onGatherMoreEmotions]);
 
   const onGoBack = useCallback(() => {
-    if (emotionsAuthStatus !== 'SUCCESS' && emotionsAuthStatus !== 'BANNED') {
+    if (emotionsAuthStatus === 'SUCCESS') {
+      dispatch(TokenomicsActions.START_MINING_SESSION.START.create());
+    }
+    if (emotionsAuthStatus !== 'BANNED') {
       dispatch(
         FaceRecognitionActions.RESET_EMOTIONS_AUTH_STATUS.STATE.create(),
       );

diff --git a/src/screens/FaceRecognitionFlow/FaceAuthCameraFeed/index.tsx b/src/screens/FaceRecognitionFlow/FaceAuthCameraFeed/index.tsx
@@ -3,21 +3,30 @@
 import {COLORS} from '@constants/colors';
 import {commonStyles} from '@constants/styles';
 import {Header} from '@navigation/components/Header';
+import {useNavigation} from '@react-navigation/native';
 import {PictureSentStep} from '@screens/FaceRecognitionFlow/FaceAuthCameraFeed/components/PictureSentStep';
 import {SendOrRetakeStep} from '@screens/FaceRecognitionFlow/FaceAuthCameraFeed/components/SendOrRetakeStep';
 import {TakeSelfieStep} from '@screens/FaceRecognitionFlow/FaceAuthCameraFeed/components/TakeSelfieStep';
+import {FaceRecognitionActions} from '@store/modules/FaceRecognition/actions';
+import {faceAuthStatusSelector} from '@store/modules/FaceRecognition/selectors';
+import {TokenomicsActions} from '@store/modules/Tokenomics/actions';
 import {t} from '@translations/i18n';
 import {CameraCapturedPicture} from 'expo-camera';
-import React, {useState} from 'react';
-import {View} from 'react-native';
+import React, {useCallback, useEffect, useState} from 'react';
+import {BackHandler, View} from 'react-native';
+import {useDispatch, useSelector} from 'react-redux';
 
 type FaceAuthPhase = 'TAKE_SELFIE' | 'SEND_OR_RETAKE' | 'SENT';
 
 type Props = {
   onFaceAuthSuccess: () => void;
+  startMiningOnSuccess: boolean;
 };
 
-export function FaceAuthCameraFeed({onFaceAuthSuccess}: Props) {
+export function FaceAuthCameraFeed({
+  onFaceAuthSuccess,
+  startMiningOnSuccess,
+}: Props) {
   const [faceAuthPhase, setFaceAuthPhase] =
     useState<FaceAuthPhase>('TAKE_SELFIE');
 
@@ -38,12 +47,35 @@ export function FaceAuthCameraFeed({onFaceAuthSuccess}: Props) {
   const onPictureSent = async () => {
     setFaceAuthPhase('SENT');
   };
+
+  const faceAuthStatus = useSelector(faceAuthStatusSelector);
+  const dispatch = useDispatch();
+  const navigation = useNavigation();
+  const onGoBack = useCallback(() => {
+    if (faceAuthStatus === 'SUCCESS' && startMiningOnSuccess) {
+      dispatch(TokenomicsActions.START_MINING_SESSION.START.create());
+    }
+    if (faceAuthStatus !== 'BANNED') {
+      dispatch(FaceRecognitionActions.RESET_FACE_AUTH_STATUS.STATE.create());
+    }
+  }, [dispatch, faceAuthStatus, startMiningOnSuccess]);
+  useEffect(() => {
+    const backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      () => {
+        onGoBack();
+        return false;
+      },
+    );
+    return () => backHandler.remove();
+  }, [onGoBack]);
   return (
     <View style={commonStyles.flexOne}>
       <Header
         color={COLORS.primaryDark}
         title={t('face_auth.header')}
         backgroundColor={'transparent'}
+        onGoBack={onGoBack}
       />
       {faceAuthPhase === 'TAKE_SELFIE' ? (
         <TakeSelfieStep onPictureTaken={onPictureTaken} />
@@ -59,7 +91,14 @@ export function FaceAuthCameraFeed({onFaceAuthSuccess}: Props) {
         <PictureSentStep
           picture={faceAuthPicture}
           onRetakePicture={onRetakePicture}
-          onFaceAuthSuccess={onFaceAuthSuccess}
+          onFaceAuthSuccess={() => {
+            if (startMiningOnSuccess) {
+              dispatch(TokenomicsActions.START_MINING_SESSION.START.create());
+              navigation.goBack();
+            } else {
+              onFaceAuthSuccess();
+            }
+          }}
         />
       ) : null}
     </View>

diff --git a/src/screens/FaceRecognitionFlow/index.tsx b/src/screens/FaceRecognitionFlow/index.tsx
@@ -15,11 +15,10 @@ import {
   emotionsAuthStatusSelector,
   faceAuthStatusSelector,
 } from '@store/modules/FaceRecognition/selectors';
-import {TokenomicsActions} from '@store/modules/Tokenomics/actions';
 import {t} from '@translations/i18n';
 import React, {useState} from 'react';
 import {StyleSheet, View} from 'react-native';
-import {useDispatch, useSelector} from 'react-redux';
+import {useSelector} from 'react-redux';
 
 type FaceRecognitionPhase = 'USER_CONSENT' | 'FACE_AUTH' | 'EMOTIONS_AUTH';
 
@@ -38,7 +37,6 @@ export function FaceRecognition() {
   } = useRoute<RouteProp<MainStackParamList, 'FaceRecognition'>>();
   useFocusStatusBar({style: 'dark-content'});
   const navigation = useNavigation();
-  const dispatch = useDispatch();
   const faceAuthStatus = useSelector(faceAuthStatusSelector);
   const emotionsAuthStatus = useSelector(emotionsAuthStatusSelector);
 
@@ -53,12 +51,7 @@ export function FaceRecognition() {
     );
 
   const onFaceAuthSuccess = () => {
-    if (kycSteps.length > 1) {
-      setFaceRecognitionPhase('EMOTIONS_AUTH');
-    } else {
-      dispatch(TokenomicsActions.START_MINING_SESSION.START.create());
-      navigation.goBack();
-    }
+    setFaceRecognitionPhase('EMOTIONS_AUTH');
   };
 
   return (
@@ -87,7 +80,10 @@ export function FaceRecognition() {
             />
           ) : null}
           {faceRecognitionPhase === 'FACE_AUTH' ? (
-            <FaceAuthCameraFeed onFaceAuthSuccess={onFaceAuthSuccess} />
+            <FaceAuthCameraFeed
+              onFaceAuthSuccess={onFaceAuthSuccess}
+              startMiningOnSuccess={kycSteps.length === 1}
+            />
           ) : null}
           {faceRecognitionPhase === 'EMOTIONS_AUTH' ? (
             <EmotionsAuthCameraFeed />