feat: deleting audio files from existing observations

src/frontend/hooks/server/observations.ts

@@ -2,6 +2,7 @@ import {
   useMutation,
   useSuspenseQuery,
   useQueryClient,
+  useQuery,
 } from '@tanstack/react-query';
 import {ObservationValue} from '@mapeo/schema';
 import {useActiveProject} from '../../contexts/ActiveProjectContext';
@@ -33,6 +34,19 @@ export function useObservation(observationId: string) {
   });
 }
 
+export function useMaybeObservation(observationId?: string) {
+  const project = useActiveProject();
+
+  return useQuery({
+    queryKey: [OBSERVATION_KEY, observationId],
+    queryFn: async () => {
+      if (!project) throw new Error('Project instance does not exist');
+      return project.observation.getByDocId(observationId!);
+    },
+    enabled: !!observationId,
+  });
+}
+
 export function useCreateObservation() {
   const queryClient = useQueryClient();
   const project = useActiveProject();

src/frontend/screens/Audio/AudioPlaybackScreen.tsx

@@ -6,7 +6,6 @@ import {
   NEW_DARK_GREY,
   WHITE,
 } from '../../lib/styles.ts';
-import {StatusBar} from 'expo-status-bar';
 import React from 'react';
 import {Duration} from 'luxon';
 import PlayArrow from '../../images/playArrow.svg';
@@ -55,7 +54,8 @@ export const AudioPlaybackScreen: React.FC<
   });
 
   const navigation = useNavigationFromRoot();
-  const {recordingUri, previewOnly} = params.route.params;
+  const {recordingUri, previewOnly, attachmentId, observationId} =
+    params.route.params;
   const observation = useDraftObservation();
 
   const {
@@ -133,6 +133,8 @@ export const AudioPlaybackScreen: React.FC<
         isOpen={isOpenDeleteBottomSheet}
         closeSheet={closeDeleteBottomSheet}
         sheetRef={deleteAudioSheetRef}
+        observationId={observationId}
+        attachmentId={attachmentId}
         recordingUri={recordingUri}
         previewOnly={previewOnly}
       />

src/frontend/screens/Audio/bottomSheet/AudioRecordingDeleteBottomSheet.tsx

@@ -12,37 +12,69 @@ import {BottomSheetModalMethods} from '@gorhom/bottom-sheet/lib/typescript/types
 import * as RNFS from '@dr.pogodin/react-native-fs';
 import {useNavigationFromRoot} from '../../../hooks/useNavigationWithTypes.ts';
 import {useDraftObservation} from '../../../hooks/useDraftObservation.ts';
+import {
+  useEditObservation,
+  useMaybeObservation,
+} from '../../../hooks/server/observations.ts';
 
 interface AudioRecordingDeleteBottomSheet {
   sheetRef: React.RefObject<BottomSheetModalMethods>;
   isOpen: boolean;
   recordingUri: string;
   previewOnly?: boolean;
+  attachmentId?: string;
+  observationId?: string;
   closeSheet: () => void;
 }
 
 export const AudioRecordingDeleteBottomSheet: FC<
   AudioRecordingDeleteBottomSheet
-> = ({sheetRef, isOpen, closeSheet, recordingUri, previewOnly}) => {
+> = ({
+  sheetRef,
+  isOpen,
+  closeSheet,
+  recordingUri,
+  attachmentId,
+  observationId,
+  previewOnly,
+}) => {
   const {formatMessage} = useIntl();
   const navigation = useNavigationFromRoot();
-  const observation = useDraftObservation();
+  const draftObservation = useDraftObservation();
+  const {data: observation, isPending: observationPending} =
+    useMaybeObservation(observationId);
+  const editObservation = useEditObservation();
 
   const handleRecordingDelete = async () => {
     closeSheet();
+    if (attachmentId && observationId) {
+      editObservation.mutate({
+        versionId: observation!.versionId,
+        value: {
+          ...observation!,
+          attachments: observation!.attachments.filter(
+            attachment => attachment.driveDiscoveryId !== attachmentId,
+          ),
+        },
+      });
+      navigation.goBack();
+      return;
+    }
     if (previewOnly) {
-      observation.removeAudioRecording(recordingUri);
+      draftObservation.removeAudioRecording(recordingUri);
       navigation.goBack();
-    } else {
-      await RNFS.unlink(new URL(recordingUri).pathname);
-      navigation.replace('ObservationEdit');
+      return;
     }
+    await RNFS.unlink(new URL(recordingUri).pathname);
+    navigation.replace('ObservationEdit');
   };
 
   return (
     <BottomSheetModal ref={sheetRef} isOpen={isOpen}>
       <BottomSheetContent
-        loading={false}
+        loading={
+          !!attachmentId && (observationPending || editObservation.isPending)
+        }
         buttonConfigs={[
           {
             variation: 'filled',

src/frontend/screens/Observation/index.tsx

@@ -107,6 +107,8 @@ export const ObservationScreen: NativeNavigationComponent<'Observation'> = ({
                       uri: attachmentData.url,
                       createdAt: 0,
                       duration: 0,
+                      attachmentId: attachmentData.driveDiscoveryId,
+                      observationId: observationId,
                     };
               })}
               photos={photoAttachmentsUrls.map(attachmentData => {

src/frontend/sharedComponents/Thumbnail/MediaScrollView.tsx

@@ -5,15 +5,14 @@ import {Photo} from '../../contexts/PhotoPromiseContext/types';
 import {PhotoThumbnail} from './PhotoThumbnail';
 import {AudioThumbnail} from './AudioThumbnail';
 import {useNavigationFromRoot} from '../../hooks/useNavigationWithTypes.ts';
-import {Recording} from 'expo-av/build/Audio/Recording';
 import {AudioRecording} from '../../sharedTypes/audio.ts';
 
 const spacing = 10;
 const minSize = 150;
 
 interface MediaScrollView {
   photos: (Partial<Photo> | undefined)[];
-  audioRecordings: any[];
+  audioRecordings: (AudioRecording | undefined)[];
   observationId?: string;
 }
 
@@ -48,6 +47,8 @@ export const MediaScrollView: FC<MediaScrollView> = props => {
       screen: 'Playback',
       params: {
         recordingUri: recording.uri,
+        observationId: recording.observationId,
+        attachmentId: recording.attachmentId,
         previewOnly: true,
       },
     });

src/frontend/sharedTypes/audio.ts

@@ -2,4 +2,6 @@ export interface AudioRecording {
   uri: string;
   createdAt: number;
   duration: number;
+  attachmentId?: string;
+  observationId?: string;
 }

src/frontend/sharedTypes/navigation.ts

@@ -33,6 +33,8 @@ export type AudioStackParamList = {
   Playback: {
     previewOnly?: boolean;
     recordingUri: string;
+    attachmentId?: string;
+    observationId?: string;
   };
 };