From 31c598de075fc7af96be93070056a6666da1b5c3 Mon Sep 17 00:00:00 2001
From: Deluan <deluan@navidrome.org>
Date: Sat, 23 Oct 2021 12:54:17 -0400
Subject: [PATCH] Fix drag-n-drop from a playlist, also fix useDrag memoization

---
 ui/src/album/AlbumGridView.js  | 13 ++++++++-----
 ui/src/album/AlbumTableView.js | 13 ++++++++-----
 ui/src/artist/ArtistList.js    | 13 ++++++++-----
 ui/src/common/SongDatagrid.js  | 30 ++++++++++++++++++------------
 4 files changed, 42 insertions(+), 27 deletions(-)

diff --git a/ui/src/album/AlbumGridView.js b/ui/src/album/AlbumGridView.js
index 94cddf9c..cf12b0e4 100644
--- a/ui/src/album/AlbumGridView.js
+++ b/ui/src/album/AlbumGridView.js
@@ -103,11 +103,14 @@ const Cover = withContentRect('bounds')(
     // Force height to be the same as the width determined by the GridList
     // noinspection JSSuspiciousNameCombination
     const classes = useCoverStyles({ height: contentRect.bounds.width })
-    const [, dragAlbumRef] = useDrag(() => ({
-      type: DraggableTypes.ALBUM,
-      item: { albumIds: [record.id] },
-      options: { dropEffect: 'copy' },
-    }))
+    const [, dragAlbumRef] = useDrag(
+      () => ({
+        type: DraggableTypes.ALBUM,
+        item: { albumIds: [record.id] },
+        options: { dropEffect: 'copy' },
+      }),
+      [record]
+    )
     return (
       <div ref={measureRef}>
         <div ref={dragAlbumRef}>
diff --git a/ui/src/album/AlbumTableView.js b/ui/src/album/AlbumTableView.js
index 5d96340a..a09a0bc6 100644
--- a/ui/src/album/AlbumTableView.js
+++ b/ui/src/album/AlbumTableView.js
@@ -51,11 +51,14 @@ const useStyles = makeStyles({
 
 const AlbumDatagridRow = (props) => {
   const { record } = props
-  const [, dragAlbumRef] = useDrag(() => ({
-    type: DraggableTypes.ALBUM,
-    item: { albumIds: [record.id] },
-    options: { dropEffect: 'copy' },
-  }))
+  const [, dragAlbumRef] = useDrag(
+    () => ({
+      type: DraggableTypes.ALBUM,
+      item: { albumIds: [record.id] },
+      options: { dropEffect: 'copy' },
+    }),
+    [record]
+  )
   return <DatagridRow ref={dragAlbumRef} {...props} />
 }
 
diff --git a/ui/src/artist/ArtistList.js b/ui/src/artist/ArtistList.js
index 82eeb899..4722b710 100644
--- a/ui/src/artist/ArtistList.js
+++ b/ui/src/artist/ArtistList.js
@@ -84,11 +84,14 @@ const ArtistFilter = (props) => {
 
 const ArtistDatagridRow = (props) => {
   const { record } = props
-  const [, dragArtistRef] = useDrag(() => ({
-    type: DraggableTypes.ARTIST,
-    item: { artistIds: [record?.id] },
-    options: { dropEffect: 'copy' },
-  }))
+  const [, dragArtistRef] = useDrag(
+    () => ({
+      type: DraggableTypes.ARTIST,
+      item: { artistIds: [record?.id] },
+      options: { dropEffect: 'copy' },
+    }),
+    [record]
+  )
   return <DatagridRow ref={dragArtistRef} {...props} />
 }
 
diff --git a/ui/src/common/SongDatagrid.js b/ui/src/common/SongDatagrid.js
index 2b09dac5..c3b9709b 100644
--- a/ui/src/common/SongDatagrid.js
+++ b/ui/src/common/SongDatagrid.js
@@ -106,19 +106,25 @@ export const SongDatagridRow = ({
     isValidElement(c)
   )
 
-  const [, dragDiscRef] = useDrag(() => ({
-    type: DraggableTypes.DISC,
-    item: {
-      discs: [{ albumId: record?.albumId, discNumber: record?.discNumber }],
-    },
-    options: { dropEffect: 'copy' },
-  }))
+  const [, dragDiscRef] = useDrag(
+    () => ({
+      type: DraggableTypes.DISC,
+      item: {
+        discs: [{ albumId: record?.albumId, discNumber: record?.discNumber }],
+      },
+      options: { dropEffect: 'copy' },
+    }),
+    [record]
+  )
 
-  const [, dragSongRef] = useDrag(() => ({
-    type: DraggableTypes.SONG,
-    item: { ids: [record?.id] },
-    options: { dropEffect: 'copy' },
-  }))
+  const [, dragSongRef] = useDrag(
+    () => ({
+      type: DraggableTypes.SONG,
+      item: { ids: [record?.mediaFileId || record?.id] },
+      options: { dropEffect: 'copy' },
+    }),
+    [record]
+  )
 
   if (!record || !record.title) {
     return null