feat: use different resource for listing songs in albums

ui/src/App.js

@@ -43,6 +43,7 @@ const App = () => {
         <Resource name="artist" {...artist} options={{ subMenu: 'library' }} />,
         <Resource name="album" {...album} options={{ subMenu: 'library' }} />,
         <Resource name="song" {...song} options={{ subMenu: 'library' }} />,
+        <Resource name="albumSong" />,
         permissions === 'admin' ? <Resource name="user" {...user} /> : null,
         <Player />
       ]}

ui/src/album/AlbumShow.js

@@ -10,8 +10,8 @@ import {
 import AlbumDetails from './AlbumDetails'
 import { DurationField, Title } from '../common'
 import { useStyles } from './styles'
-import { SongBulkActions } from '../song/SongBulkActions'
 import { AlbumActions } from './AlbumActions'
+import { AlbumSongBulkActions } from './AlbumSongBulkActions'
 import { useMediaQuery } from '@material-ui/core'
 import { setTrack } from '../player'
 import { useDispatch } from 'react-redux'
@@ -46,13 +46,12 @@ const AlbumShow = (props) => {
         title={<Title subTitle={record.name} />}
         actions={<AlbumActions />}
         filter={{ album_id: props.id }}
-        resource={'song'}
+        resource={'albumSong'}
         exporter={false}
-        basePath={'/song'}
         perPage={1000}
         pagination={null}
         sort={{ field: 'discNumber asc, trackNumber asc', order: 'ASC' }}
-        bulkActionButtons={<SongBulkActions />}
+        bulkActionButtons={<AlbumSongBulkActions />}
       >
         <Datagrid
           rowClick={(id, basePath, record) => dispatch(setTrack(record))}

ui/src/album/AlbumSongBulkActions.js

@@ -0,0 +1,16 @@
+import React, { Fragment, useEffect } from 'react'
+import { useUnselectAll } from 'react-admin'
+import AddToQueueButton from '../song/AddToQueueButton'
+
+export const AlbumSongBulkActions = (props) => {
+  const unselectAll = useUnselectAll()
+  useEffect(() => {
+    unselectAll('albumSong')
+    // eslint-disable-next-line
+  }, [])
+  return (
+    <Fragment>
+      <AddToQueueButton {...props} />
+    </Fragment>
+  )
+}

ui/src/dataProvider.js

@@ -1,7 +1,10 @@
 import { fetchUtils } from 'react-admin'
 import jsonServerProvider from 'ra-data-json-server'
 
+const baseUrl = '/app/api'
+
 const httpClient = (url, options = {}) => {
+  url = url.replace(baseUrl + '/albumSong', baseUrl + '/song')
   if (!options.headers) {
     options.headers = new Headers({ Accept: 'application/json' })
   }
@@ -19,6 +22,6 @@ const httpClient = (url, options = {}) => {
   })
 }
 
-const dataProvider = jsonServerProvider('/app/api', httpClient)
+const dataProvider = jsonServerProvider(baseUrl, httpClient)
 
 export default dataProvider

ui/src/song/SongBulkActions.js

@@ -1,13 +1,7 @@
 import React, { Fragment, useEffect } from 'react'
-import { useUnselectAll } from 'react-admin'
 import AddToQueueButton from './AddToQueueButton'
 
 export const SongBulkActions = (props) => {
-  const unselectAll = useUnselectAll()
-  useEffect(() => {
-    console.log('UNSELECT!')
-    unselectAll('song')
-  }, [])
   return (
     <Fragment>
       <AddToQueueButton {...props} />