refactored comment form

src/components/editors/AudioGrid/index.tsx

@@ -16,7 +16,13 @@ interface IProps {
 const AudioGrid: FC<IProps> = ({ files, setFiles, locked }) => {
   const onMove = useCallback(
     ({ oldIndex, newIndex }: SortEnd) => {
-      setFiles(moveArrItem(oldIndex, newIndex, files.filter(file => !!file)) as IFile[]);
+      setFiles(
+        moveArrItem(
+          oldIndex,
+          newIndex,
+          files.filter(file => !!file)
+        ) as IFile[]
+      );
     },
     [setFiles, files]
   );
@@ -41,7 +47,7 @@ const AudioGrid: FC<IProps> = ({ files, setFiles, locked }) => {
 
   return (
     <SortableAudioGrid
-      onDrop={onDrop}
+      onDelete={onDrop}
       onTitleChange={onTitleChange}
       onSortEnd={onMove}
       axis="xy"

src/components/editors/ImageGrid/index.tsx

@@ -15,7 +15,13 @@ interface IProps {
 const ImageGrid: FC<IProps> = ({ files, setFiles, locked }) => {
   const onMove = useCallback(
     ({ oldIndex, newIndex }: SortEnd) => {
-      setFiles(moveArrItem(oldIndex, newIndex, files.filter(file => !!file)) as IFile[]);
+      setFiles(
+        moveArrItem(
+          oldIndex,
+          newIndex,
+          files.filter(file => !!file)
+        ) as IFile[]
+      );
     },
     [setFiles, files]
   );
@@ -29,7 +35,7 @@ const ImageGrid: FC<IProps> = ({ files, setFiles, locked }) => {
 
   return (
     <SortableImageGrid
-      onDrop={onDrop}
+      onDelete={onDrop}
       onSortEnd={onMove}
       axis="xy"
       items={files}

src/components/editors/SortableAudioGrid/index.tsx

@@ -11,12 +11,12 @@ const SortableAudioGrid = SortableContainer(
   ({
     items,
     locked,
-    onDrop,
+    onDelete,
     onTitleChange,
   }: {
     items: IFile[];
     locked: IUploadStatus[];
-    onDrop: (file_id: IFile['id']) => void;
+    onDelete: (file_id: IFile['id']) => void;
     onTitleChange: (file_id: IFile['id'], title: IFile['metadata']['title']) => void;
   }) => {
     console.log(locked);
@@ -27,7 +27,12 @@ const SortableAudioGrid = SortableContainer(
           .filter(file => file && file.id)
           .map((file, index) => (
             <SortableAudioGridItem key={file.id} index={index} collection={0}>
-              <AudioPlayer file={file} onDrop={onDrop} onTitleChange={onTitleChange} isEditing />
+              <AudioPlayer
+                file={file}
+                onDelete={onDelete}
+                onTitleChange={onTitleChange}
+                isEditing
+              />
             </SortableAudioGridItem>
           ))}
 

src/components/editors/SortableImageGrid/index.tsx

@@ -12,12 +12,12 @@ const SortableImageGrid = SortableContainer(
   ({
     items,
     locked,
-    onDrop,
+    onDelete,
     size = 200,
   }: {
     items: IFile[];
     locked: IUploadStatus[];
-    onDrop: (file_id: IFile['id']) => void;
+    onDelete: (file_id: IFile['id']) => void;
     size?: number;
   }) => (
     <div
@@ -28,7 +28,7 @@ const SortableImageGrid = SortableContainer(
         .filter(file => file && file.id)
         .map((file, index) => (
           <SortableImageGridItem key={file.id} index={index} collection={0}>
-            <ImageUpload id={file.id} thumb={getURL(file, PRESETS.cover)} onDrop={onDrop} />
+            <ImageUpload id={file.id} thumb={getURL(file, PRESETS.cover)} onDrop={onDelete} />
           </SortableImageGridItem>
         ))}