collection list, move, delete

electron-ui/src/renderer/components/ClipList.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import {
   DndContext,
   closestCenter,
@@ -21,7 +22,8 @@ export interface ClipListProps {
 
 export default function ClipList({ collection }: ClipListProps) {
   const metadata = useAppSelector(
-    (state) => state.collections[collection] || [],
+    (state) =>
+      state.collections.find((col) => col.name === collection) || { clips: [] },
   );
   const dispatch = useAppDispatch();
 
@@ -29,14 +31,19 @@ export default function ClipList({ collection }: ClipListProps) {
     useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
   );
 
-  async function handleDragEnd(event) {
+  async function handleDragEnd(event: any) {
     const { active, over } = event;
     if (active.id !== over?.id) {
-      const oldIndex = metadata.findIndex(
+      const oldIndex = metadata.clips.findIndex(
         (item) => item.filename === active.id,
       );
-      const newIndex = metadata.findIndex((item) => item.filename === over.id);
-      const newMetadata = arrayMove(metadata, oldIndex, newIndex);
+      const newIndex = metadata.clips.findIndex(
+        (item) => item.filename === over.id,
+      );
+      const newMetadata = {
+        ...metadata,
+        clips: arrayMove(metadata.clips, oldIndex, newIndex),
+      };
       console.log('New order:', newMetadata);
       dispatch({
         type: 'metadata/setCollections',
@@ -52,7 +59,7 @@ export default function ClipList({ collection }: ClipListProps) {
             },
             body: JSON.stringify({
               name: collection,
-              clips: newMetadata,
+              clips: newMetadata.clips,
             }),
           },
         );
@@ -66,6 +73,47 @@ export default function ClipList({ collection }: ClipListProps) {
     }
   }
 
+  async function handleDelete(meta: ClipMetadata) {
+    dispatch({
+      type: 'metadata/deleteClip',
+      payload: { collection, clip: meta },
+    });
+    fetch('http://localhost:5010/meta/collection/clips/remove', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        name: collection,
+        clip: meta,
+      }),
+    })
+      .then((res) => res.json())
+      .catch((err) => console.error('Error deleting clip:', err));
+    console.log('Deleting clip:', meta);
+  }
+
+  async function handleClipMove(targetCollection: string, meta: ClipMetadata) {
+    console.log('Moving clip:', meta, 'to collection:', targetCollection);
+    dispatch({
+      type: 'metadata/moveClip',
+      payload: { sourceCollection: collection, targetCollection, clip: meta },
+    });
+    fetch('http://localhost:5010/meta/collection/clips/move', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        sourceCollection: collection,
+        targetCollection,
+        clip: meta,
+      }),
+    })
+      .then((res) => res.json())
+      .catch((err) => console.error('Error moving clip:', err));
+  }
+
   async function handleClipSave(meta: ClipMetadata) {
     try {
       dispatch({
@@ -85,7 +133,7 @@ export default function ClipList({ collection }: ClipListProps) {
           }),
         },
       );
-      const data = await response.json();
+      await response.json();
       // console.log('handle clip save return:', data.collections);
       dispatch({
         type: 'metadata/editClip',
@@ -97,24 +145,42 @@ export default function ClipList({ collection }: ClipListProps) {
   }
 
   return (
-    <div className="min-h-screen flex flex-col justify-center bg-midnight text-offwhite">
+    <div className="min-h-full flex flex-col justify-start bg-midnight text-offwhite">
       <DndContext
         sensors={sensors}
         collisionDetection={closestCenter}
+        // eslint-disable-next-line react/jsx-no-bind
         onDragEnd={handleDragEnd}
         modifiers={[restrictToVerticalAxis]}
       >
         <SortableContext
-          items={metadata.map((item) => item.filename)}
+          items={metadata.clips.map((item) => item.filename)}
           strategy={verticalListSortingStrategy}
         >
-          {metadata.map((trimmer) => (
+          {metadata.clips.map((trimmer, idx) => (
+            <React.Fragment key={trimmer.filename}>
+              <AudioTrimmer
+                metadata={trimmer}
+                onSave={handleClipSave}
+                onDelete={handleDelete}
+                onMove={handleClipMove}
+              />
+              {(idx + 1) % 10 === 0 && idx !== metadata.clips.length - 1 && (
+                <div className="my-4 border-t border-gray-500">
+                  <p className="text-center text-sm text-gray-400">
+                    -- Page {Math.ceil((idx + 1) / 10) + 1} --
+                  </p>
+                </div>
+              )}
+            </React.Fragment>
+          ))}
+          {/* {metadata.map((trimmer) => (
             <AudioTrimmer
               key={trimmer.filename}
               filename={trimmer.filename}
               onSave={handleClipSave}
             />
-          ))}
+          ))} */}
         </SortableContext>
       </DndContext>
     </div>