Remove duplicated code for SongBulkActions

ui/src/album/AlbumShow.js

@@ -3,7 +3,7 @@ import { useGetOne } from 'react-admin'
 import AlbumDetails from './AlbumDetails'
 import { Title } from '../common'
 import { useStyles } from './styles'
-import { AlbumSongBulkActions } from './AlbumSongBulkActions'
+import { SongBulkActions } from '../common'
 import AlbumActions from './AlbumActions'
 import AlbumSongs from './AlbumSongs'
 
@@ -33,7 +33,7 @@ const AlbumShow = (props) => {
         perPage={0}
         pagination={null}
         sort={{ field: 'discNumber asc, trackNumber asc', order: 'ASC' }}
-        bulkActionButtons={<AlbumSongBulkActions />}
+        bulkActionButtons={<SongBulkActions />}
       />
     </>
   )

ui/src/common/BatchPlayButton.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import {
   Button,
   useDataProvider,
@@ -7,8 +8,6 @@ import {
   useNotify,
 } from 'react-admin'
 import { useDispatch } from 'react-redux'
-import { addTracks } from '../audioplayer'
-import { RiPlayListAddFill } from 'react-icons/ri'
 
 const BatchPlayButton = ({ resource, selectedIds, action, label, icon }) => {
   const dispatch = useDispatch()
@@ -42,10 +41,10 @@ const BatchPlayButton = ({ resource, selectedIds, action, label, icon }) => {
   )
 }
 
-BatchPlayButton.defaultProps = {
+BatchPlayButton.propTypes = {
-  action: addTracks,
+  action: PropTypes.func.isRequired,
-  label: 'resources.song.actions.addToQueue',
+  label: PropTypes.string.isRequired,
-  icon: <RiPlayListAddFill />,
+  icon: PropTypes.object.isRequired,
 }
 
 export default BatchPlayButton

ui/src/common/SongBulkActions.js

@@ -1,15 +1,15 @@
 import React, { Fragment, useEffect } from 'react'
 import { useUnselectAll } from 'react-admin'
-import { playNext, playTracks } from '../audioplayer'
+import { addTracks, playNext, playTracks } from '../audioplayer'
-import { RiPlayList2Fill } from 'react-icons/ri'
+import { RiPlayList2Fill, RiPlayListAddFill } from 'react-icons/ri'
 import PlayArrowIcon from '@material-ui/icons/PlayArrow'
-import { BatchPlayButton } from '../common'
+import { BatchPlayButton } from './index'
-import AddToPlaylistButton from '../song/AddToPlaylistButton'
+import AddToPlaylistButton from './AddToPlaylistButton'
 
-export const AlbumSongBulkActions = (props) => {
+const SongBulkActions = (props) => {
   const unselectAll = useUnselectAll()
   useEffect(() => {
-    unselectAll('albumSong')
+    unselectAll(props.resource)
     // eslint-disable-next-line
   }, [])
   return (
@@ -26,8 +26,15 @@ export const AlbumSongBulkActions = (props) => {
         label={'resources.song.actions.playNext'}
         icon={<RiPlayList2Fill />}
       />
-      <BatchPlayButton {...props} />
+      <BatchPlayButton
+        {...props}
+        action={addTracks}
+        label={'resources.song.actions.addToQueue'}
+        icon={<RiPlayListAddFill />}
+      />
       <AddToPlaylistButton {...props} />
     </Fragment>
   )
 }
+
+export default SongBulkActions

ui/src/common/index.js

@@ -4,6 +4,8 @@ import BitrateField from './BitrateField'
 import Pagination from './Pagination'
 import PlayButton from './PlayButton'
 import BatchPlayButton from './BatchPlayButton'
+import SongBulkActions from './SongBulkActions'
+import AddToPlaylistButton from './AddToPlaylistButton'
 import SimpleList from './SimpleList'
 import RangeField, { formatRange } from './RangeField'
 import ArtistLinkField, { useGetHandleArtistClick } from './ArtistLinkField'
@@ -29,6 +31,8 @@ export {
   List,
   PlayButton,
   BatchPlayButton,
+  SongBulkActions,
+  AddToPlaylistButton,
   SimpleList,
   RangeField,
   SongDetails,

ui/src/song/SongBulkActions.js

@@ -1,20 +0,0 @@
-import React, { Fragment } from 'react'
-import { BatchPlayButton } from '../common'
-import AddToPlaylistButton from './AddToPlaylistButton'
-import { RiPlayList2Fill } from 'react-icons/ri'
-import { playNext } from '../audioplayer'
-
-export const SongBulkActions = (props) => {
-  return (
-    <Fragment>
-      <BatchPlayButton
-        {...props}
-        action={playNext}
-        label={'resources.song.actions.playNext'}
-        icon={<RiPlayList2Fill />}
-      />
-      <BatchPlayButton {...props} />
-      <AddToPlaylistButton {...props} />
-    </Fragment>
-  )
-}

ui/src/song/SongList.js

@@ -20,7 +20,7 @@ import {
 } from '../common'
 import { useDispatch } from 'react-redux'
 import { setTrack } from '../audioplayer'
-import { SongBulkActions } from './SongBulkActions'
+import { SongBulkActions } from '../common'
 import { SongListActions } from './SongListActions'
 import { AlbumLinkField } from './AlbumLinkField'
 import AddToPlaylistDialog from '../dialogs/AddToPlaylistDialog'