Add "AddToPlaylist" to AlbumContextMenu

ui/src/song/AddToPlaylistButton.js

@@ -1,59 +1,46 @@
-import React, { useState } from 'react'
-import {
-  Button,
-  useTranslate,
-  useUnselectAll,
-  useDataProvider,
-  useNotify,
-} from 'react-admin'
-import SelectPlaylistDialog from '../common/SelectPlaylistDialog'
+import React from 'react'
+import { Button, useTranslate, useUnselectAll } from 'react-admin'
+import { Menu } from '@material-ui/core'
 import PlaylistAddIcon from '@material-ui/icons/PlaylistAdd'
+import { AddToPlaylistMenu } from '../common'
 
 const AddToPlaylistButton = ({ resource, selectedIds }) => {
-  const [open, setOpen] = useState(false)
-  const [selectedValue, setSelectedValue] = useState('')
+  const [anchorEl, setAnchorEl] = React.useState(null)
   const translate = useTranslate()
   const unselectAll = useUnselectAll()
-  const notify = useNotify()
-  const dataProvider = useDataProvider()
 
-  const handleClickOpen = () => {
-    setOpen(true)
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget)
   }
 
-  const handleClose = (value) => {
-    if (value !== '') {
-      dataProvider
-        .create('playlistTrack', {
-          data: { ids: selectedIds },
-          filter: { playlist_id: value },
-        })
-        .then(() => {
-          notify(`Added ${selectedIds.length} songs to playlist`)
-        })
-        .catch(() => {
-          notify('ra.page.error', 'warning')
-        })
-    }
-    setOpen(false)
-    setSelectedValue(value)
+  const handleClose = () => {
+    setAnchorEl(null)
     unselectAll(resource)
   }
 
   return (
     <>
       <Button
+        aria-controls="simple-menu"
+        aria-haspopup="true"
+        onClick={handleClick}
         color="secondary"
-        onClick={handleClickOpen}
         label={translate('resources.song.actions.addToPlaylist')}
       >
         <PlaylistAddIcon />
       </Button>
-      <SelectPlaylistDialog
-        selectedValue={selectedValue}
-        open={open}
+      <Menu
+        id="simple-menu"
+        anchorEl={anchorEl}
+        keepMounted
+        open={Boolean(anchorEl)}
         onClose={handleClose}
-      />
+      >
+        <AddToPlaylistMenu
+          selectedIds={selectedIds}
+          menuOpen={Boolean(anchorEl)}
+        />
+      </Menu>
     </>
   )
 }

ui/src/song/SongContextMenu.js

@@ -4,6 +4,8 @@ import { useTranslate } from 'react-admin'
 import { IconButton, Menu, MenuItem } from '@material-ui/core'
 import MoreVertIcon from '@material-ui/icons/MoreVert'
 import { addTracks, setTrack } from '../audioplayer'
+import { AddToPlaylistMenu } from '../common'
+import NestedMenuItem from 'material-ui-nested-menu-item'
 
 export const SongContextMenu = ({ record }) => {
   const dispatch = useDispatch()
@@ -38,6 +40,8 @@ export const SongContextMenu = ({ record }) => {
     e.stopPropagation()
   }
 
+  const open = Boolean(anchorEl)
+
   return (
     <>
       <IconButton onClick={handleClick} size={'small'}>
@@ -46,7 +50,7 @@ export const SongContextMenu = ({ record }) => {
       <Menu
         id={'menu' + record.id}
         anchorEl={anchorEl}
-        open={Boolean(anchorEl)}
+        open={open}
         onClose={handleClose}
       >
         {Object.keys(options).map((key) => (
@@ -54,6 +58,15 @@ export const SongContextMenu = ({ record }) => {
             {options[key].label}
           </MenuItem>
         ))}
+        <NestedMenuItem
+          label={translate('resources.song.actions.addToPlaylist')}
+          parentMenuOpen={open}
+        >
+          <AddToPlaylistMenu
+            selectedIds={[record.id]}
+            onClose={() => setAnchorEl(null)}
+          />
+        </NestedMenuItem>
       </Menu>
     </>
   )