From ba83d16345f1751e66a01b49a48a6988f1dbf5f3 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Sun, 3 Jul 2022 15:29:26 +0700
Subject: [PATCH] tried to make types

---
 .../sortable/SortableAudioGrid/index.tsx      | 27 +++++++-------
 .../sortable/SortableList/index.tsx           | 37 ++++++++++++-------
 2 files changed, 36 insertions(+), 28 deletions(-)

diff --git a/src/components/sortable/SortableAudioGrid/index.tsx b/src/components/sortable/SortableAudioGrid/index.tsx
index 90584eac..ea0dd7b2 100644
--- a/src/components/sortable/SortableAudioGrid/index.tsx
+++ b/src/components/sortable/SortableAudioGrid/index.tsx
@@ -18,27 +18,22 @@ interface SortableAudioGridProps {
   onTitleChange: (file_id: IFile['id'], title: string) => void;
 }
 
+const renderItem: FC<{
+  item: IFile;
+  onDelete: (file_id: IFile['id']) => void;
+  onTitleChange: (file_id: IFile['id'], title: string) => void;
+}> = ({ item, onDelete, onTitleChange }) => (
+  <AudioPlayer file={item} onDelete={onDelete} isEditing onTitleChange={onTitleChange} />
+);
+
 const SortableAudioGrid: FC<SortableAudioGridProps> = ({
   items,
   locked,
-  onDelete,
   className,
   onSortEnd,
+  onDelete,
   onTitleChange,
 }) => {
-  const renderItem = useCallback<FC<{ item: IFile; key?: string | number }>>(
-    ({ item, key }) => (
-      <AudioPlayer
-        file={item}
-        onDelete={onDelete}
-        isEditing
-        onTitleChange={onTitleChange}
-        key={key}
-      />
-    ),
-    [onTitleChange, onDelete]
-  );
-
   const renderLocked = useCallback<FC<{ locked: UploadStatus }>>(
     ({ locked }) => (
       <AudioUpload
@@ -62,6 +57,10 @@ const SortableAudioGrid: FC<SortableAudioGridProps> = ({
       renderLocked={renderLocked}
       onSortEnd={onSortEnd}
       className={className}
+      renderItemProps={{
+        onDelete,
+        onTitleChange,
+      }}
     />
   );
 };
diff --git a/src/components/sortable/SortableList/index.tsx b/src/components/sortable/SortableList/index.tsx
index 1f596a8a..38ab81a7 100644
--- a/src/components/sortable/SortableList/index.tsx
+++ b/src/components/sortable/SortableList/index.tsx
@@ -1,27 +1,33 @@
-import React, { createElement, FC } from "react";
+import React, { createElement, FC } from 'react';
 
-import { closestCenter, DndContext, DragOverlay } from "@dnd-kit/core";
-import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
-import classNames from "classnames";
+import { closestCenter, DndContext, DragOverlay } from '@dnd-kit/core';
+import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import classNames from 'classnames';
 
-import { DragOverlayItem } from "~/components/sortable/DragOverlayItem";
-import { SortableItem } from "~/components/sortable/SortableItem";
-import { useSortableActions } from "~/hooks/sortable";
+import { DragOverlayItem } from '~/components/sortable/DragOverlayItem';
+import { SortableItem } from '~/components/sortable/SortableItem';
+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<
+  T extends {},
+  R extends {},
+  P extends {},
+  U extends {},
+> {
   items: T[];
   locked: R[];
   getID: (item: T) => number | string;
   getLockedID: (locked: R) => number | string;
-  renderItem: FC<{ item: T }>;
+  renderItem: FC<P>;
+  renderItemProps: U;
   renderLocked: FC<{ locked: R }>;
   onSortEnd: (newVal: T[]) => void;
   className?: string;
 }
 
-const SortableList = <T, R>({
+const SortableList = <T, R, P extends { item: T }, U>({
   items,
   locked,
   getID,
@@ -29,8 +35,9 @@ const SortableList = <T, R>({
   className,
   renderItem,
   renderLocked,
+  renderItemProps,
   onSortEnd,
-}: SortableListProps<T, R>) => {
+}: SortableListProps<T, R, P, U>) => {
   const { sensors, onDragEnd, onDragStart, draggingItem, ids } = useSortableActions(
     items,
     getID,
@@ -54,7 +61,7 @@ const SortableList = <T, R>({
                 draggingItem && getID(item) === getID(draggingItem) ? styles.dragging : undefined
               }
             >
-              {createElement(renderItem, { item, key: getID(item) })}
+              {createElement(renderItem, { ...renderItemProps, item })}
             </SortableItem>
           ))}
 
@@ -64,7 +71,9 @@ const SortableList = <T, R>({
 
           <DragOverlay>
             {draggingItem ? (
-              <DragOverlayItem>{createElement(renderItem, { item: draggingItem })}</DragOverlayItem>
+              <DragOverlayItem>
+                {createElement(renderItem, { ...(renderItemProps || {}), item: draggingItem })}
+              </DragOverlayItem>
             ) : null}
           </DragOverlay>
         </div>