Allow adding sounds to existing observations (#1303)

src/components/ObsEdit/EvidenceSection.js

@@ -8,6 +8,7 @@ import {
   Body3, Body4, Heading4, INatIcon
 } from "components/SharedComponents";
 import LocationPermissionGate from "components/SharedComponents/LocationPermissionGate";
+import { MAX_SOUNDS_ALLOWED } from "components/SoundRecorder/SoundRecorder";
 import { Pressable, View } from "components/styledComponents";
 import type { Node } from "react";
 import React from "react";
@@ -58,6 +59,7 @@ const EvidenceSection = ( {
   const { t } = useTranslation( );
   const theme = useTheme( );
   const obsPhotos = currentObservation?.observationPhotos;
+  const obsSounds = currentObservation?.observationSounds;
   const navigation = useNavigation( );
 
   const navToLocationPicker = ( ) => {
@@ -96,7 +98,9 @@ const EvidenceSection = ( {
   return (
     <View className="mx-6">
       <AddEvidenceSheet
-        disableAddingMoreEvidence={obsPhotos?.length >= MAX_PHOTOS_ALLOWED}
+        disableAddingMoreEvidence={
+        obsPhotos?.length >= MAX_PHOTOS_ALLOWED ||
+          obsSounds?.length >= MAX_SOUNDS_ALLOWED}
         hidden={!showAddEvidenceSheet}
         onClose={( ) => setShowAddEvidenceSheet( false )}
       />

src/components/ObsEdit/Sheets/AddEvidenceSheet.js

@@ -7,7 +7,6 @@ import {
 import { View } from "components/styledComponents";
 import type { Node } from "react";
 import React, { useState } from "react";
-import { Alert } from "react-native";
 import useTranslation from "sharedHooks/useTranslation";
 
 type Props = {
@@ -49,7 +48,10 @@ const AddEvidenceSheet = ( {
             params: { skipGroupPhotos: true }
           } );
         } else if ( choice === "sound" ) {
-          Alert.alert( "TODO", "Still need to implement sound recording" );
+          navigation.navigate(
+            "CameraNavigator",
+            { screen: "SoundRecorder", params: { addEvidence: true } }
+          );
         }
       }}
     >

src/components/SoundRecorder/SoundRecorder.js

@@ -1,6 +1,6 @@
 // @flow
 
-import { useNavigation } from "@react-navigation/native";
+import { useNavigation, useRoute } from "@react-navigation/native";
 import MediaViewerModal from "components/MediaViewer/MediaViewerModal";
 import {
   Body1,
@@ -24,6 +24,7 @@ import React, {
 import { StatusBar } from "react-native";
 import AudioRecorderPlayer from "react-native-audio-recorder-player";
 import Observation from "realmModels/Observation";
+import ObservationSound from "realmModels/ObservationSound";
 import useTranslation from "sharedHooks/useTranslation";
 import useStore from "stores/useStore";
 import colors from "styles/tailwindColors";
@@ -38,19 +39,26 @@ const NOT_STARTED = "notStarted";
 const RECORDING = "recording";
 const STOPPED = "stopped";
 
+export const MAX_SOUNDS_ALLOWED = 20;
+
 const SoundRecorder = (): Node => {
   const audioRecorderPlayerRef = useRef( new AudioRecorderPlayer( ) );
   const audioRecorderPlayer = audioRecorderPlayerRef.current;
   const [mediaViewerVisible, setMediaViewerVisible] = useState( false );
   const setObservations = useStore( state => state.setObservations );
   const navigation = useNavigation();
+  const { params } = useRoute();
   const { t } = useTranslation();
   const [sound, setSound] = useState( INITIAL_SOUND );
   const [uri, setUri] = useState( null );
   const [helpShown, setHelpShown] = useState( false );
   const [exitWarningShown, setExitWarningShown] = useState( false );
   const [resetWarningShown, setResetWarningShown] = useState( false );
   const meteringHistory = useRef( [] );
+  const currentObservation = useStore( state => state.currentObservation );
+  const observations = useStore( state => state.observations );
+  const currentObservationIndex = useStore( state => state.currentObservationIndex );
+  const updateObservations = useStore( state => state.updateObservations );
 
   const [
     status,
@@ -63,8 +71,20 @@ const SoundRecorder = (): Node => {
   audioRecorderPlayer.setSubscriptionDuration( 0.09 ); // optional. Default is 0.1
 
   const addSound = async ( ) => {
-    const newObservation = await Observation.createObsWithSoundPath( uri );
-    setObservations( [newObservation] );
+    if ( !params.addEvidence ) {
+      // New observation with sound
+      const newObservation = await Observation.createObsWithSoundPath( uri );
+      setObservations( [newObservation] );
+    } else {
+      // Add new sounds to existing observation
+      let updatedCurrentObservation = currentObservation;
+
+      const obsSound = await ObservationSound.new( { file_url: uri } );
+      updatedCurrentObservation = Observation
+        .appendObsSounds( [obsSound], updatedCurrentObservation );
+      observations[currentObservationIndex] = updatedCurrentObservation;
+      updateObservations( observations );
+    }
   };
 
   const resetRecording = useCallback( ( ) => {
@@ -178,6 +198,14 @@ const SoundRecorder = (): Node => {
       helpText = t( "Press-record-to-start" );
   }
 
+  const onBack = () => {
+    if ( !params.addEvidence ) {
+      navigation.goBack( );
+    } else {
+      navigation.navigate( "ObsEdit" );
+    }
+  };
+
   return (
     <ViewWrapper wrapperClassName="bg-black justify-between">
       <StatusBar barStyle="light-content" backgroundColor="black" />
@@ -238,7 +266,7 @@ const SoundRecorder = (): Node => {
           if ( uri ) {
             setExitWarningShown( true );
           } else {
-            navigation.goBack( );
+            onBack();
           }
         }}
         mediaCaptured={uri}
@@ -278,7 +306,7 @@ const SoundRecorder = (): Node => {
         hidden={!exitWarningShown}
         headerText={t( "DISCARD-SOUND-header" )}
         text={t( "By-exiting-your-recorded-sound-will-not-be-saved" )}
-        confirm={( ) => navigation.goBack( )}
+        confirm={onBack}
         handleClose={( ) => setExitWarningShown( false )}
         buttonText={t( "DISCARD-RECORDING" )}
       />

src/realmModels/Observation.js

@@ -355,6 +355,17 @@ class Observation extends Realm.Object {
     return updatedObs;
   };
 
+  static appendObsSounds = ( obsSounds, currentObservation ) => {
+    const updatedObs = currentObservation;
+
+    // need empty case for when a user creates an observation with no sounds,
+    // then tries to add sounds to observation later
+    const currentObservationSounds = updatedObs?.observationSounds || [];
+
+    updatedObs.observationSounds = [...currentObservationSounds, ...obsSounds];
+    return updatedObs;
+  };
+
   static schema = {
     name: "Observation",
     primaryKey: "uuid",