Merge pull request #36 from mbsantiago/fix/sound_event_notes

Fixed note taking in sound events when annotating

Author: mbsantiago

front/src/app/components/sound_event_annotations/SelectedSoundEventAnnotation.tsx

@@ -15,10 +15,11 @@ export default function SelectedSoundEventAnnotation({
 }) {
   const tagColorFn = useStore((state) => state.getTagColor);
 
-  const { data, addTag, removeTag } = useSoundEventAnnotation({
-    uuid: soundEventAnnotation.uuid,
-    soundEventAnnotation,
-  });
+  const { data, addTag, removeTag, addNote, updateNote, removeNote } =
+    useSoundEventAnnotation({
+      uuid: soundEventAnnotation.uuid,
+      soundEventAnnotation,
+    });
 
   return (
     <SelectedSoundEventAnnotationBase
@@ -27,6 +28,11 @@ export default function SelectedSoundEventAnnotation({
       onDeleteSoundEventAnnotationTag={removeTag.mutate}
       TagSearchBar={ProjectTagSearch}
       tagColorFn={tagColorFn}
+      onCreateSoundEventAnnotationNote={addNote.mutate}
+      onUpdateSoundEventAnnotationNote={(note, data) =>
+        updateNote.mutate({ note, data })
+      }
+      onDeleteSoundEventAnnotationNote={removeNote.mutate}
     />
   );
 }

front/src/app/hooks/api/useSoundEventAnnotation.ts

@@ -1,4 +1,7 @@
-import { useQuery as useReactQuery } from "@tanstack/react-query";
+import {
+  useMutation as useReactMutation,
+  useQuery as useReactQuery,
+} from "@tanstack/react-query";
 import type { AxiosError } from "axios";
 import { useCallback, useMemo } from "react";
 
@@ -8,7 +11,9 @@ import useObject from "@/lib/hooks/utils/useObject";
 
 import type {
   ClipAnnotation,
+  Note,
   NoteCreate,
+  NoteUpdate,
   Recording,
   SoundEventAnnotation,
   Tag,
@@ -162,13 +167,27 @@ export default function useSoundEventAnnotation({
     onSuccess: handleAddNote,
   });
 
+  const updateNote = useReactMutation({
+    mutationFn: ({ note, data }: { note: Note; data: NoteUpdate }) =>
+      api.notes.update(note, data),
+    onSuccess: () => {
+      query.refetch();
+    },
+  });
+
+  const removeNote = useMutation({
+    mutationFn: api.soundEventAnnotations.removeNote,
+  });
+
   return {
     ...query,
     update,
     delete: delete_,
     addTag,
     removeTag,
     addNote,
+    updateNote,
+    removeNote,
     recording: recordingQuery,
   } as const;
 }

front/src/lib/components/notes/NotesPanel.tsx

@@ -4,7 +4,7 @@ import Feed from "@/lib/components/notes/Feed";
 import Card from "@/lib/components/ui/Card";
 import { H3 } from "@/lib/components/ui/Headings";
 
-import type { Note, NoteCreate, User } from "@/lib/types";
+import type { Note, NoteCreate, NoteUpdate, User } from "@/lib/types";
 
 export default function NotesPanel({
   notes,
@@ -19,7 +19,7 @@ export default function NotesPanel({
   notes: Note[];
   currentUser?: User;
   onCreateNote?: (note: NoteCreate) => void;
-  onUpdateNote?: (note: Note, data: Partial<Note>) => void;
+  onUpdateNote?: (note: Note, data: NoteUpdate) => void;
   onDeleteNote?: (note: Note) => void;
   EmptyNotes?: JSX.Element;
 }) {

front/src/lib/components/sound_event_annotations/SelectedSoundEventAnnotation.tsx

@@ -3,20 +3,30 @@ import SoundEventAnnotationNotes from "@/lib/components/sound_event_annotations/
 import SoundEventAnnotationTags from "@/lib/components/sound_event_annotations/SoundEventAnnotationTags";
 import Card from "@/lib/components/ui/Card";
 
-import type { NoteCreate, SoundEventAnnotation, Tag } from "@/lib/types";
+import type {
+  Note,
+  NoteCreate,
+  NoteUpdate,
+  SoundEventAnnotation,
+  Tag,
+} from "@/lib/types";
 
 export default function SelectedSoundEventAnnotation({
   soundEventAnnotation,
   onAddSoundEventAnnotationTag,
   onDeleteSoundEventAnnotationTag,
   onCreateSoundEventAnnotationNote,
+  onUpdateSoundEventAnnotationNote,
+  onDeleteSoundEventAnnotationNote,
   onCreateTag,
   ...props
 }: {
   soundEventAnnotation: SoundEventAnnotation;
   onAddSoundEventAnnotationTag?: (tag: Tag) => void;
   onDeleteSoundEventAnnotationTag?: (tag: Tag) => void;
   onCreateSoundEventAnnotationNote?: (note: NoteCreate) => void;
+  onUpdateSoundEventAnnotationNote?: (note: Note, data: NoteUpdate) => void;
+  onDeleteSoundEventAnnotationNote?: (note: Note) => void;
   onCreateTag?: (tag: Tag) => void;
 } & Omit<
   Parameters<typeof SoundEventAnnotationTags>[0],
@@ -29,7 +39,7 @@ export default function SelectedSoundEventAnnotation({
           soundEventAnnotation={soundEventAnnotation}
         />
       </Card>
-      <Card>
+      <Card className="grow">
         <SoundEventAnnotationTags
           soundEventAnnotation={soundEventAnnotation}
           onAddTag={onAddSoundEventAnnotationTag}
@@ -41,6 +51,8 @@ export default function SelectedSoundEventAnnotation({
       <SoundEventAnnotationNotes
         soundEventAnnotation={soundEventAnnotation}
         onCreateNote={onCreateSoundEventAnnotationNote}
+        onDeleteNote={onDeleteSoundEventAnnotationNote}
+        onUpdateNote={onUpdateSoundEventAnnotationNote}
       />
     </div>
   );