Use only one call to the server when adding songs to the queue

Also show a message when there's an error communication with the server

ui/src/album/AlbumContextMenu.js

@@ -4,7 +4,7 @@ import Menu from '@material-ui/core/Menu'
 import MenuItem from '@material-ui/core/MenuItem'
 import MoreVertIcon from '@material-ui/icons/MoreVert'
 import { makeStyles } from '@material-ui/core/styles'
-import { useDataProvider, useTranslate } from 'react-admin'
+import { useDataProvider, useNotify, useTranslate } from 'react-admin'
 import { useDispatch } from 'react-redux'
 import { playAlbum, shuffleAlbum } from '../audioplayer'
 
@@ -19,6 +19,7 @@ const AlbumContextMenu = ({ record, color }) => {
   const dataProvider = useDataProvider()
   const dispatch = useDispatch()
   const translate = useTranslate()
+  const notify = useNotify()
   const [anchorEl, setAnchorEl] = useState(null)
   const open = Boolean(anchorEl)
   const options = {
@@ -60,6 +61,10 @@ const AlbumContextMenu = ({ record, color }) => {
         )
         dispatch(options[key].action(adata, response.data[0].id))
       })
+      .catch(() => {
+        notify('ra.page.error', 'warning')
+      })
+
     e.stopPropagation()
   }
 

ui/src/song/AddToQueueButton.js

@@ -4,6 +4,7 @@ import {
   useDataProvider,
   useTranslate,
   useUnselectAll,
+  useNotify,
 } from 'react-admin'
 import { useDispatch } from 'react-redux'
 import { addTrack } from '../audioplayer'
@@ -14,12 +15,24 @@ const AddToQueueButton = ({ selectedIds }) => {
   const translate = useTranslate()
   const dataProvider = useDataProvider()
   const unselectAll = useUnselectAll()
+  const notify = useNotify()
+
   const addToQueue = () => {
-    selectedIds.forEach((id) => {
+    dataProvider
-      dataProvider.getOne('song', { id }).then((response) => {
+      .getMany('song', { ids: selectedIds })
-        dispatch(addTrack(response.data))
+      .then((response) => {
+        // Add the tracks to the queue in the selection order
+        const tracks = response.data.reduce((acc, cur) => {
+          acc[cur.id] = cur
+          return acc
+        }, {})
+        selectedIds.forEach((id) => {
+          dispatch(addTrack(tracks[id]))
+        })
+      })
+      .catch(() => {
+        notify('ra.page.error', 'warning')
       })
-    })
     unselectAll('song')
   }