Stop AddEvidenceSheet from appearing on StandardCamera (#809)

Try to ensure navigation from AddEvidenceSheet happens after the sheet is closed

---------

Co-authored-by: Yaron Budowski <budowski@gmail.com>

src/components/ObsEdit/EvidenceSection.js

@@ -43,9 +43,6 @@ const EvidenceSection = ( ): Node => {
     : [];
   const mountedRef = useRef( true );
   const navigation = useNavigation( );
-  const [takePhoto, setTakePhoto] = useState( false );
-  const [importPhoto, setImportPhoto] = useState( false );
-  const [recordSound, setRecordSound] = useState( false );
 
   const navToLocationPicker = ( ) => {
     navigation.navigate( "LocationPicker", { goBackOnSave: true } );
@@ -54,22 +51,6 @@ const EvidenceSection = ( ): Node => {
   const [showAddEvidenceSheet, setShowAddEvidenceSheet] = useState( false );
   const handleAddEvidence = ( ) => setShowAddEvidenceSheet( true );
 
-  useEffect( () => {
-    // We do this navigation indirectly (vs doing it directly in AddEvidenceSheet),
-    // since we need for the bottom sheet of add-evidence to first finish dismissing,
-    // only then we can do the navigation - otherwise, this causes the bottom sheet
-    // to sometimes pop back up on the next screen - see GH issue #629
-    if ( !showAddEvidenceSheet ) {
-      if ( takePhoto ) {
-        navigation.navigate( "Camera", { addEvidence: true, camera: "Standard" } );
-      } else if ( importPhoto ) {
-        navigation.navigate( "PhotoGallery", { skipGroupPhotos: true } );
-      } else if ( recordSound ) {
-        // TODO - need to implement
-      }
-    }
-  }, [takePhoto, importPhoto, recordSound, showAddEvidenceSheet, navigation] );
-
   // Hook version of componentWillUnmount. We use a ref to track mounted
   // state (not useState, which might get frozen in a closure for other
   // useEffects), and set it to false in the cleanup cleanup function. The
@@ -183,12 +164,9 @@ const EvidenceSection = ( ): Node => {
   return (
     <View className="mx-6 mt-6">
       <AddEvidenceSheet
-        setShowAddEvidenceSheet={setShowAddEvidenceSheet}
         disableAddingMoreEvidence={photoUris.length >= MAX_PHOTOS_ALLOWED}
         hidden={!showAddEvidenceSheet}
-        onTakePhoto={() => { setTakePhoto( true ); }}
-        onImportPhoto={() => { setImportPhoto( true ); }}
-        onRecordSound={() => { setRecordSound( true ); }}
+        onClose={( ) => setShowAddEvidenceSheet( false )}
       />
       <View className="flex-row">
         <Heading4>{t( "EVIDENCE" )}</Heading4>

src/components/ObsEdit/Sheets/AddEvidenceSheet.js

@@ -1,61 +1,46 @@
 // @flow
 
+import { useNavigation } from "@react-navigation/native";
 import {
   BottomSheet, EvidenceButton, List2
 } from "components/SharedComponents";
 import { View } from "components/styledComponents";
 import type { Node } from "react";
-import React, { useCallback } from "react";
+import React, { useState } from "react";
+import { Alert } from "react-native";
 import useTranslation from "sharedHooks/useTranslation";
 
 type Props = {
   disableAddingMoreEvidence: boolean,
-  setShowAddEvidenceSheet: Function,
   hidden?: boolean,
-  onImportPhoto: Function,
-  onTakePhoto: Function,
-  onRecordSound: Function,
+  onClose: Function
 }
 
 const AddEvidenceSheet = ( {
-  setShowAddEvidenceSheet,
   disableAddingMoreEvidence,
   hidden,
-  onImportPhoto,
-  onTakePhoto,
-  onRecordSound
+  onClose
 }: Props ): Node => {
   const { t } = useTranslation( );
-
-  const handleClose = useCallback(
-    ( ) => setShowAddEvidenceSheet( false ),
-    [setShowAddEvidenceSheet]
-  );
-
-  const onImportPhotoCallback = async () => {
-    handleClose( );
-    onImportPhoto();
-  };
-
-  const onTakePhotoCallback = async () => {
-    handleClose( );
-    onTakePhoto();
-  };
-
-  const onRecordSoundCallback = () => {
-    handleClose( );
-    onRecordSound();
-  };
+  const navigation = useNavigation( );
+  const [choice, setChoice] = useState( null );
 
   return (
     <BottomSheet
-      handleClose={handleClose}
+      handleClose={onClose}
       headerText={t( "ADD-EVIDENCE" )}
       snapPoints={[202]}
       hidden={hidden}
       onChange={position => {
-        if ( position === -1 ) {
-          handleClose( );
+        // -1 means the sheet is fully hidden... and in theory it's safe to navigate away
+        if ( position > -1 ) return;
+
+        if ( choice === "camera" ) {
+          navigation.navigate( "Camera", { addEvidence: true, camera: "Standard" } );
+        } else if ( choice === "import" ) {
+          navigation.navigate( "PhotoGallery", { skipGroupPhotos: true } );
+        } else if ( choice === "sound" ) {
+          Alert.alert( "TODO", "Still need to implement sound recording" );
         }
       }}
     >
@@ -68,21 +53,30 @@ const AddEvidenceSheet = ( {
         <View className="flex-row w-full justify-around">
           <EvidenceButton
             icon="camera"
-            handlePress={onTakePhotoCallback}
+            handlePress={( ) => {
+              setChoice( "camera" );
+              onClose( );
+            }}
             disabled={disableAddingMoreEvidence}
             accessibilityLabel={t( "Camera" )}
             accessibilityHint={t( "Navigates-to-camera" )}
           />
           <EvidenceButton
             icon="gallery"
-            handlePress={onImportPhotoCallback}
+            handlePress={( ) => {
+              setChoice( "import" );
+              onClose( );
+            }}
             disabled={disableAddingMoreEvidence}
             accessibilityLabel={t( "Bulk-importer" )}
             accessibilityHint={t( "Navigates-to-bulk-importer" )}
           />
           <EvidenceButton
             icon="microphone"
-            handlePress={onRecordSoundCallback}
+            handlePress={( ) => {
+              setChoice( "sound" );
+              onClose( );
+            }}
             disabled={disableAddingMoreEvidence}
             accessibilityLabel={t( "Sound-recorder" )}
             accessibilityHint={t( "Navigates-to-sound-recorder" )}