fixed sortables rerendering

src/components/sortable/SortableAudioGrid/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback } from 'react';
+import React, { FC, useCallback, useMemo } from 'react';
 
 import { AudioPlayer } from '~/components/media/AudioPlayer';
 import { AudioUpload } from '~/components/upload/AudioUpload';
@@ -17,6 +17,29 @@ interface SortableAudioGridProps {
   onDelete: (file_id: IFile['id']) => void;
   onTitleChange: (file_id: IFile['id'], title: string) => void;
 }
+const renderItem = ({
+  item,
+  key,
+  onDelete,
+  onTitleChange,
+}: {
+  item: IFile;
+  key?: string | number;
+  onDelete?: (id: IFile['id']) => void;
+  onTitleChange?: (file_id: IFile['id'], title: string) => void;
+}) => (
+  <AudioPlayer file={item} onDelete={onDelete} isEditing onTitleChange={onTitleChange} key={key} />
+);
+
+const renderLocked = ({ locked }: { locked: UploadStatus }) => (
+  <AudioUpload
+    id={locked.id}
+    is_uploading
+    title={locked.name}
+    progress={locked.progress}
+    key={locked.id}
+  />
+);
 
 const SortableAudioGrid: FC<SortableAudioGridProps> = ({
   items,
@@ -26,31 +49,8 @@ const SortableAudioGrid: FC<SortableAudioGridProps> = ({
   onSortEnd,
   onTitleChange,
 }) => {
-  const renderItem = useCallback<FC<{ item: IFile; key?: string | number }>>(
+  const renderItemProps = useMemo(() => ({ onDelete, onTitleChange }), [onDelete, onTitleChange]);
-    ({ item, key }) => (
+  const renderLockedProps = useMemo(() => ({}), []);
-      <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}
-        key={locked.id}
-      />
-    ),
-    []
-  );
 
   return (
     <SortableList
@@ -59,7 +59,9 @@ const SortableAudioGrid: FC<SortableAudioGridProps> = ({
       getID={it => it.id}
       getLockedID={it => it.id}
       renderItem={renderItem}
+      renderItemProps={renderItemProps}
       renderLocked={renderLocked}
+      renderLockedProps={renderLockedProps}
       onSortEnd={onSortEnd}
       className={className}
     />

src/components/sortable/SortableGrid/index.tsx

@@ -12,29 +12,38 @@ import { SortableItem } from '../SortableItem';
 
 import styles from './styles.module.scss';
 
-interface SortableGridProps<T extends {}, R extends {}> {
+interface SortableGridProps<
-  items: T[];
+  ItemRendererProps extends {},
-  locked: R[];
+  LockedRendererProps extends {},
-  getID: (item: T) => number | string;
+  Item extends {},
-  getLockedID: (locked: R) => number | string;
+  Locked extends {}
-  renderItem: FC<{ item: T }>;
+> {
-  renderLocked: FC<{ locked: R }>;
+  items: Item[];
-  onSortEnd: (newVal: T[]) => void;
+  locked: Locked[];
+  getID: (item: Item) => number | string;
+  getLockedID: (locked: Locked) => number | string;
+  renderItem: FC<ItemRendererProps & { item: Item }>;
+  renderItemProps: ItemRendererProps;
+  renderLocked: FC<LockedRendererProps & { locked: Locked }>;
+  renderLockedProps: LockedRendererProps;
+  onSortEnd: (newVal: Item[]) => void;
   className?: string;
   size?: number;
 }
 
-const SortableGrid = <T, R>({
+const SortableGrid = <RIP, RLP, I, L>({
   items,
   locked,
   getID,
   getLockedID,
   className,
   renderItem,
+  renderItemProps,
   renderLocked,
+  renderLockedProps,
   onSortEnd,
   size,
-}: SortableGridProps<T, R>) => {
+}: SortableGridProps<RIP, RLP, I, L>) => {
   const { sensors, onDragEnd, onDragStart, draggingItem, ids } = useSortableActions(
     items,
     getID,
@@ -66,17 +75,23 @@ const SortableGrid = <T, R>({
                 draggingItem && getID(item) === getID(draggingItem) ? styles.dragging : undefined
               }
             >
-              {createElement(renderItem, { item })}
+              {createElement(renderItem, { ...renderItemProps, item })}
             </SortableItem>
           ))}
 
           {locked.map(item =>
-            createElement(renderLocked, { locked: item, key: getLockedID(item) })
+            createElement(renderLocked, {
+              ...renderLockedProps,
+              locked: item,
+              key: getLockedID(item),
+            })
           )}
 
           <DragOverlay>
             {draggingItem ? (
-              <DragOverlayItem>{createElement(renderItem, { item: draggingItem })}</DragOverlayItem>
+              <DragOverlayItem>
+                {createElement(renderItem, { ...renderItemProps, item: draggingItem })}
+              </DragOverlayItem>
             ) : null}
           </DragOverlay>
         </div>

src/components/sortable/SortableImageGrid/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback } from 'react';
+import React, { FC, useCallback, useMemo } from 'react';
 
 import { ImageUpload } from '~/components/upload/ImageUpload';
 import { ImagePresets } from '~/constants/urls';
@@ -18,6 +18,19 @@ interface SortableImageGridProps {
   className?: string;
   size?: number;
 }
+const renderItem = ({ item, onDelete }: { item: IFile; onDelete: (fileId: number) => void }) => (
+  <ImageUpload id={item.id} thumb={getURL(item, ImagePresets.cover)} onDrop={onDelete} />
+);
+
+const renderLocked = ({
+  locked,
+  onDelete,
+}: {
+  locked: UploadStatus;
+  onDelete: (fileId: number) => void;
+}) => (
+  <ImageUpload thumb={locked.thumbnail} onDrop={onDelete} progress={locked.progress} is_uploading />
+);
 
 const SortableImageGrid: FC<SortableImageGridProps> = ({
   items,
@@ -27,24 +40,7 @@ const SortableImageGrid: FC<SortableImageGridProps> = ({
   onSortEnd,
   size,
 }) => {
-  const renderItem = useCallback<FC<{ item: IFile }>>(
+  const props = useMemo(() => ({ onDelete }), [onDelete]);
-    ({ item }) => (
-      <ImageUpload id={item.id} thumb={getURL(item, ImagePresets.cover)} onDrop={onDelete} />
-    ),
-    []
-  );
-
-  const renderLocked = useCallback<FC<{ locked: UploadStatus }>>(
-    ({ locked }) => (
-      <ImageUpload
-        thumb={locked.thumbnail}
-        onDrop={onDelete}
-        progress={locked.progress}
-        is_uploading
-      />
-    ),
-    []
-  );
 
   return (
     <SortableGrid
@@ -53,7 +49,9 @@ const SortableImageGrid: FC<SortableImageGridProps> = ({
       getID={it => it.id}
       getLockedID={it => it.id}
       renderItem={renderItem}
+      renderItemProps={props}
       renderLocked={renderLocked}
+      renderLockedProps={props}
       onSortEnd={onSortEnd}
       className={className}
       size={size}

src/components/sortable/SortableList/index.tsx

@@ -1,36 +1,45 @@
-import React, { createElement, FC } from "react";
+import React, { createElement, FC } from 'react';
 
-import { closestCenter, DndContext, DragOverlay } from "@dnd-kit/core";
+import { closestCenter, DndContext, DragOverlay } from '@dnd-kit/core';
-import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { SortableContext, verticalListSortingStrategy } 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 { SortableItem } from "~/components/sortable/SortableItem";
+import { SortableItem } from '~/components/sortable/SortableItem';
-import { useSortableActions } from "~/hooks/sortable";
+import { useSortableActions } from '~/hooks/sortable';
 
-import styles from "./styles.module.scss";
+import styles from './styles.module.scss';
 
-interface SortableListProps<T extends {}, R extends {}> {
+interface SortableListProps<
-  items: T[];
+  RenderItemProps extends {},
-  locked: R[];
+  RenderLockedProps extends {},
-  getID: (item: T) => number | string;
+  Item extends {},
-  getLockedID: (locked: R) => number | string;
+  Locked extends {}
-  renderItem: FC<{ item: T }>;
+> {
-  renderLocked: FC<{ locked: R }>;
+  items: Item[];
-  onSortEnd: (newVal: T[]) => void;
+  locked: Locked[];
+  getID: (item: Item) => number | string;
+  getLockedID: (locked: Locked) => number | string;
+  renderItem: FC<RenderItemProps & { item: Item }>;
+  renderItemProps: RenderItemProps;
+  renderLocked: FC<RenderLockedProps & { locked: Locked }>;
+  renderLockedProps: RenderLockedProps;
+  onSortEnd: (newVal: Item[]) => void;
   className?: string;
 }
 
-const SortableList = <T, R>({
+const SortableList = <RIP, RLP, I, L>({
   items,
   locked,
   getID,
   getLockedID,
   className,
   renderItem,
+  renderItemProps,
   renderLocked,
+  renderLockedProps,
   onSortEnd,
-}: SortableListProps<T, R>) => {
+}: SortableListProps<RIP, RLP, I, L>) => {
   const { sensors, onDragEnd, onDragStart, draggingItem, ids } = useSortableActions(
     items,
     getID,
@@ -54,17 +63,23 @@ const SortableList = <T, R>({
                 draggingItem && getID(item) === getID(draggingItem) ? styles.dragging : undefined
               }
             >
-              {createElement(renderItem, { item, key: getID(item) })}
+              {createElement(renderItem, { ...renderItemProps, item, key: getID(item) })}
             </SortableItem>
           ))}
 
           {locked.map(item =>
-            createElement(renderLocked, { locked: item, key: getLockedID(item) })
+            createElement(renderLocked, {
+              ...renderLockedProps,
+              locked: item,
+              key: getLockedID(item),
+            })
           )}
 
           <DragOverlay>
             {draggingItem ? (
-              <DragOverlayItem>{createElement(renderItem, { item: draggingItem })}</DragOverlayItem>
+              <DragOverlayItem>
+                {createElement(renderItem, { ...renderItemProps, item: draggingItem })}
+              </DragOverlayItem>
             ) : null}
           </DragOverlay>
         </div>