Add songs to playlists with drag and drop

ui/src/layout/PlaylistsSubMenu.js

@@ -1,12 +1,60 @@
 import React, { useCallback } from 'react'
-import { MenuItemLink, useQueryWithStore } from 'react-admin'
+import {
+  MenuItemLink,
+  useDataProvider,
+  useNotify,
+  useQueryWithStore,
+} from 'react-admin'
 import { useHistory } from 'react-router-dom'
 import QueueMusicIcon from '@material-ui/icons/QueueMusic'
 import { Typography } from '@material-ui/core'
 import QueueMusicOutlinedIcon from '@material-ui/icons/QueueMusicOutlined'
 import { BiCog } from 'react-icons/all'
+import { useDrop } from 'react-dnd'
 import SubMenu from './SubMenu'
 
+const PlaylistMenuItemLink = ({ pls, sidebarIsOpen }) => {
+  const dataProvider = useDataProvider()
+  const notify = useNotify()
+
+  const addToPlaylist = (playlistId, data) => {
+    dataProvider
+      .addToPlaylist(playlistId, data)
+      .then((res) => {
+        notify('message.songsAddedToPlaylist', 'info', {
+          smart_count: res.data?.added,
+        })
+      })
+      .catch(() => {
+        notify('ra.page.error', 'warning')
+      })
+  }
+
+  const [, dropRef] = useDrop(() => ({
+    accept: ['song', 'album', 'disc', 'artist'],
+    drop: (item) => {
+      addToPlaylist(pls.id, item)
+    },
+  }))
+
+  if (!pls) {
+    return null
+  }
+
+  return (
+    <MenuItemLink
+      to={`/playlist/${pls.id}/show`}
+      primaryText={
+        <Typography variant="inherit" noWrap ref={dropRef}>
+          {pls.name}
+        </Typography>
+      }
+      sidebarIsOpen={sidebarIsOpen}
+      dense={false}
+    />
+  )
+}
+
 const PlaylistsSubMenu = ({ state, setState, sidebarIsOpen, dense }) => {
   const history = useHistory()
   const { data, loaded } = useQueryWithStore({
@@ -25,21 +73,13 @@ const PlaylistsSubMenu = ({ state, setState, sidebarIsOpen, dense }) => {
     setState((state) => ({ ...state, [menu]: !state[menu] }))
   }
 
-  const renderPlaylistMenuItemLink = (pls) => {
-    return (
-      <MenuItemLink
-        key={pls.id}
-        to={`/playlist/${pls.id}/show`}
-        primaryText={
-          <Typography variant="inherit" noWrap>
-            {pls.name}
-          </Typography>
-        }
-        sidebarIsOpen={sidebarIsOpen}
-        dense={false}
-      />
-    )
-  }
+  const renderPlaylistMenuItemLink = (pls) => (
+    <PlaylistMenuItemLink
+      pls={pls}
+      sidebarIsOpen={sidebarIsOpen}
+      key={pls.id}
+    />
+  )
 
   const user = localStorage.getItem('username')
   const myPlaylists = []