Merge pull request #182 from ito-org/cancel-upload

Cancel upload using header back button, fix physical back button behavior

App/screens/DataUpload.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
-import {StyleSheet, View, Text} from 'react-native';
+import React, {useCallback} from 'react';
+import {StyleSheet, View, Text, BackHandler} from 'react-native';
+import {useFocusEffect} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
 import {RootStackParamList} from 'App/App';
 import Header from '../components/Header';
@@ -28,6 +29,18 @@ export const DataUpload: React.FC<{
 }> = ({navigation}) => {
   const {t} = useTranslation();
 
+  useFocusEffect(
+    useCallback(() => {
+      const onBackPress = (): boolean => {
+        navigation.navigate('Home');
+        return true;
+      };
+      BackHandler.addEventListener('hardwareBackPress', onBackPress);
+      return (): void =>
+        BackHandler.removeEventListener('hardwareBackPress', onBackPress);
+    }, [navigation]),
+  );
+
   return (
     <View style={global.container}>
       <Header

App/screens/PositiveResult.tsx

@@ -63,14 +63,10 @@ export const PositiveResult: React.FC<{
     }
     if (uploadSuccess) {
       console.log('TCN Upload succeeded');
-      setTimeout((): void => {
-        navigation.navigate('DataUpload');
-      }, 600);
+      navigation.navigate('DataUpload');
     } else {
       console.warn('TCN Upload failed');
-      setTimeout((): void => {
-        navigation.navigate('DataUpload');
-      }, 600);
+      navigation.navigate('DataUpload');
     }
   }, [navigation, uploadSuccess]);
   const doUpload = (): void => {

App/screens/Upload.tsx

@@ -65,13 +65,23 @@ export const Upload: React.FC<{
     }).start(() => startAnimation());
   };
   startAnimation();
+  const cancelUpload = (): void => {
+    if (!deferUploadTimeout.current) {
+      console.warn('failed to clear deferUploadTimeout', deferUploadTimeout);
+      return;
+    }
+    console.log('clearing deferUploadTimeout', deferUploadTimeout);
+    clearTimeout(deferUploadTimeout.current);
+    deferUploadTimeout.current = null;
+    navigation.navigate('PositiveResult');
+  };
 
   return (
     <View style={[global.container]}>
       <Header
         navigationButton={{
           title: t('global.cancel'),
-          fn: (): void => navigation.goBack(),
+          fn: cancelUpload,
         }}
         showHelp={true}
         showAlpha={true}
@@ -84,19 +94,7 @@ export const Upload: React.FC<{
         title={t('uploadData.buttonTitleCancel')}
         variant="outlined"
         buttonStyle={styles.cancelButton}
-        onPress={(): void => {
-          if (!deferUploadTimeout.current) {
-            console.warn(
-              'failed to clear deferUploadTimeout',
-              deferUploadTimeout,
-            );
-            return;
-          }
-          console.log('clearing deferUploadTimeout', deferUploadTimeout);
-          clearTimeout(deferUploadTimeout.current);
-          deferUploadTimeout.current = null;
-          navigation.navigate('PositiveResult');
-        }}
+        onPress={cancelUpload}
       />
     </View>
   );