fixed sortable audio grid

src/components/editors/AudioEditor/index.tsx

@@ -2,9 +2,7 @@ import React, { FC, useCallback, useMemo } from 'react';
 
 import { UploadDropzone } from '~/components/upload/UploadDropzone';
 import { UploadType } from '~/constants/uploads';
-import { useNodeAudios } from '~/hooks/node/useNodeAudios';
+import { IFile } from '~/types';
-import { useNodeFormContext } from '~/hooks/node/useNodeFormFormik';
-import { useNodeImages } from '~/hooks/node/useNodeImages';
 import { NodeEditorProps } from '~/types/node';
 import { useUploaderContext } from '~/utils/context/UploaderContextProvider';
 import { values } from '~/utils/ramda';
@@ -17,11 +15,7 @@ import styles from './styles.module.scss';
 type IProps = NodeEditorProps;
 
 const AudioEditor: FC<IProps> = () => {
-  const formik = useNodeFormContext();
+  const { pending, filesAudios, filesImages, setFiles, uploadFiles } = useUploaderContext()!;
-  const { pending, setFiles, uploadFiles } = useUploaderContext()!;
-
-  const images = useNodeImages(formik.values);
-  const audios = useNodeAudios(formik.values);
 
   const pendingImages = useMemo(
     () => values(pending).filter(item => item.type === UploadType.Image),
@@ -33,15 +27,20 @@ const AudioEditor: FC<IProps> = () => {
     [pending]
   );
 
-  const setImages = useCallback(values => setFiles([...values, ...audios]), [setFiles, audios]);
+  const setImages = useCallback((values: IFile[]) => setFiles([...values, ...filesAudios]), [
-
+    setFiles,
-  const setAudios = useCallback(values => setFiles([...values, ...images]), [setFiles, images]);
+    filesAudios,
+  ]);
+  const setAudios = useCallback((values: IFile[]) => setFiles([...values, ...filesImages]), [
+    setFiles,
+    filesImages,
+  ]);
 
   return (
     <UploadDropzone onUpload={uploadFiles} helperClassName={styles.dropzone}>
       <div className={styles.wrap}>
-        <ImageGrid files={images} setFiles={setImages} locked={pendingImages} />
+        <ImageGrid files={filesImages} setFiles={setImages} locked={pendingImages} />
-        <AudioGrid files={audios} setFiles={setAudios} locked={pendingAudios} />
+        <AudioGrid files={filesAudios} setFiles={setAudios} locked={pendingAudios} />
       </div>
     </UploadDropzone>
   );

src/components/media/AudioPlayer/index.tsx

@@ -20,7 +20,10 @@ type Props = {
 const AudioPlayer = memo(({ file, onDelete, isEditing, onTitleChange }: Props) => {
   const { toPercent, file: currentFile, setFile, play, status, progress, pause } = useAudioPlayer();
 
-  const onPlay = useCallback(async () => {
+  const onPlay = useCallback(
+    async event => {
+      event.stopPropagation();
+
       if (file.id !== currentFile?.id) {
         setFile(file);
         setTimeout(() => void play(), 0);
@@ -28,7 +31,9 @@ const AudioPlayer = memo(({ file, onDelete, isEditing, onTitleChange }: Props) =
       }
 
       status === PlayerState.PLAYING ? pause() : await play();
-  }, [play, pause, setFile, file, currentFile, status]);
+    },
+    [play, pause, setFile, file, currentFile, status]
+  );
 
   const onSeek = useCallback(
     event => {
@@ -65,17 +70,32 @@ const AudioPlayer = memo(({ file, onDelete, isEditing, onTitleChange }: Props) =
     [onTitleChange, file.id]
   );
 
+  const stopPropagation = useCallback(
+    event => {
+      if (!isEditing) {
+        return;
+      }
+
+      event.stopPropagation();
+    },
+    [isEditing]
+  );
+
   const playing = currentFile?.id === file.id;
 
   return (
-    <div onClick={onPlay} className={classNames(styles.wrap, { [styles.playing]: playing })}>
+    <div
+      className={classNames(styles.wrap, {
+        [styles.playing]: playing,
+      })}
+    >
       {onDelete && (
         <div className={styles.drop} onMouseDown={onDropClick}>
           <Icon icon="close" />
         </div>
       )}
 
-      <div className={styles.playpause}>
+      <div className={styles.playpause} onClick={onPlay} onMouseDown={stopPropagation}>
         {playing && status === PlayerState.PLAYING ? <Icon icon="pause" /> : <Icon icon="play" />}
       </div>
 
@@ -85,6 +105,7 @@ const AudioPlayer = memo(({ file, onDelete, isEditing, onTitleChange }: Props) =
             placeholder={title}
             handler={onRename}
             value={file.metadata && file.metadata.title}
+            onMouseDown={stopPropagation}
           />
         </div>
       ) : (
@@ -92,7 +113,12 @@ const AudioPlayer = memo(({ file, onDelete, isEditing, onTitleChange }: Props) =
           <div className={styles.title}>{title || ''}</div>
 
           <div className={styles.progress} onClick={onSeek}>
-            <div className={styles.bar} style={{ width: `${progress.progress}%` }} />
+            <div
+              className={styles.bar}
+              style={{
+                width: `${progress.progress}%`,
+              }}
+            />
           </div>
         </div>
       )}

src/components/sortable/SortableAudioGrid/index.tsx

@@ -26,16 +26,28 @@ const SortableAudioGrid: FC<SortableAudioGridProps> = ({
   onSortEnd,
   onTitleChange,
 }) => {
-  const renderItem = useCallback<FC<{ item: IFile }>>(
+  const renderItem = useCallback<FC<{ item: IFile; key?: string | number }>>(
-    ({ item }) => (
+    ({ item, key }) => (
-      <AudioPlayer file={item} onDelete={onDelete} isEditing onTitleChange={onTitleChange} />
+      <AudioPlayer
+        file={item}
+        onDelete={onDelete}
+        isEditing
+        onTitleChange={onTitleChange}
+        key={key}
+      />
     ),
-    []
+    [onTitleChange, onDelete]
   );
 
   const renderLocked = useCallback<FC<{ locked: UploadStatus }>>(
     ({ locked }) => (
-      <AudioUpload id={locked.id} is_uploading title={locked.name} progress={locked.progress} />
+      <AudioUpload
+        id={locked.id}
+        is_uploading
+        title={locked.name}
+        progress={locked.progress}
+        key={locked.id}
+      />
     ),
     []
   );

src/components/sortable/SortableGrid/index.tsx

@@ -1,16 +1,16 @@
-import React, { createElement, FC, useMemo } from "react";
+import React, { createElement, FC, useMemo } from 'react';
 
-import { closestCenter, DndContext, DragOverlay } from "@dnd-kit/core";
+import { closestCenter, DndContext, DragOverlay } from '@dnd-kit/core';
-import { rectSortingStrategy, SortableContext } from "@dnd-kit/sortable";
+import { rectSortingStrategy, SortableContext } from '@dnd-kit/sortable';
-import classNames from "classnames";
+import classNames from 'classnames';
 
-import { DragOverlayItem } from "~/components/sortable/DragOverlayItem";
+import { DragOverlayItem } from '~/components/sortable/DragOverlayItem';
-import { useSortableActions } from "~/hooks/sortable";
+import { useSortableActions } from '~/hooks/sortable';
-import { DivProps } from "~/utils/types";
+import { DivProps } from '~/utils/types';
 
-import { SortableItem } from "../SortableItem";
+import { SortableItem } from '../SortableItem';
 
-import styles from "./styles.module.scss";
+import styles from './styles.module.scss';
 
 interface SortableGridProps<T extends {}, R extends {}> {
   items: T[];

src/components/sortable/SortableList/index.tsx

@@ -1,4 +1,4 @@
-import React, { createElement, FC } from 'react';
+import React, { createElement, FC, memo } from 'react';
 
 import { closestCenter, DndContext, DragOverlay } from '@dnd-kit/core';
 import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
@@ -21,7 +21,8 @@ interface SortableListProps<T extends {}, R extends {}> {
   className?: string;
 }
 
-const SortableList = <T, R>({
+const SortableList = memo(
+  <T, R>({
     items,
     locked,
     getID,
@@ -30,7 +31,7 @@ const SortableList = <T, R>({
     renderItem,
     renderLocked,
     onSortEnd,
-}: SortableListProps<T, R>) => {
+  }: SortableListProps<T, R>) => {
     const { sensors, onDragEnd, onDragStart, draggingItem, ids } = useSortableActions(
       items,
       getID,
@@ -54,7 +55,7 @@ const SortableList = <T, R>({
                   draggingItem && getID(item) === getID(draggingItem) ? styles.dragging : undefined
                 }
               >
-              {createElement(renderItem, { item })}
+                {createElement(renderItem, { item, key: getID(item) })}
               </SortableItem>
             ))}
 
@@ -64,13 +65,16 @@ const SortableList = <T, R>({
 
             <DragOverlay>
               {draggingItem ? (
-              <DragOverlayItem>{createElement(renderItem, { item: draggingItem })}</DragOverlayItem>
+                <DragOverlayItem>
+                  {createElement(renderItem, { item: draggingItem })}
+                </DragOverlayItem>
               ) : null}
             </DragOverlay>
           </div>
         </SortableContext>
       </DndContext>
     );
-};
+  }
+);
 
 export { SortableList };

src/components/upload/AudioUpload/index.tsx

@@ -1,11 +1,11 @@
-import React, { FC, useCallback } from "react";
+import React, { FC, useCallback } from 'react';
 
-import classNames from "classnames";
+import classNames from 'classnames';
 
-import { ArcProgress } from "~/components/input/ArcProgress";
+import { ArcProgress } from '~/components/input/ArcProgress';
-import { Icon } from "~/components/input/Icon";
+import { Icon } from '~/components/input/Icon';
 
-import styles from "./styles.module.scss";
+import styles from './styles.module.scss';
 
 interface IProps {
   id?: string;