feat: implement AlbumShow using a Datagrid. WIP: still need to make it responsive

ui/src/song/AddToQueueButton.js

@@ -2,15 +2,13 @@ import React from 'react'
 import {
   Button,
   useDataProvider,
-  useUnselectAll,
-  useTranslate
+  useTranslate,
+  useUnselectAll
 } from 'react-admin'
 import { useDispatch } from 'react-redux'
 import { addTrack } from '../player'
 import AddToQueueIcon from '@material-ui/icons/AddToQueue'
 
-import Tooltip from '@material-ui/core/Tooltip'
-
 const AddToQueueButton = ({ selectedIds }) => {
   const dispatch = useDispatch()
   const translate = useTranslate()
@@ -26,13 +24,12 @@ const AddToQueueButton = ({ selectedIds }) => {
   }
 
   return (
-    <Button color="secondary" onClick={addToQueue}>
-      <Tooltip
-        title={translate('resources.song.bulk.addToQueue')}
-        placement="right"
-      >
-        <AddToQueueIcon />
-      </Tooltip>
+    <Button
+      color="secondary"
+      onClick={addToQueue}
+      label={translate('resources.song.bulk.addToQueue')}
+    >
+      <AddToQueueIcon />
     </Button>
   )
 }

ui/src/song/SongBulkActions.js

@@ -0,0 +1,16 @@
+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} />
+    </Fragment>
+  )
+}

ui/src/song/SongList.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react'
+import React from 'react'
 import {
   BooleanField,
   Datagrid,
@@ -13,12 +13,18 @@ import {
   TextInput
 } from 'react-admin'
 import { useMediaQuery } from '@material-ui/core'
-import { BitrateField, DurationField, Pagination, Title } from '../common'
-import AddToQueueButton from './AddToQueueButton'
-import { PlayButton, SimpleList } from '../common'
+import {
+  BitrateField,
+  DurationField,
+  Pagination,
+  PlayButton,
+  SimpleList,
+  Title
+} from '../common'
 import { useDispatch } from 'react-redux'
-import { setTrack, addTrack } from '../player'
+import { addTrack, setTrack } from '../player'
 import AddIcon from '@material-ui/icons/Add'
+import { SongBulkActions } from './SongBulkActions'
 
 const SongFilter = (props) => (
   <Filter {...props}>
@@ -28,12 +34,6 @@ const SongFilter = (props) => (
   </Filter>
 )
 
-const SongBulkActionButtons = (props) => (
-  <Fragment>
-    <AddToQueueButton {...props} />
-  </Fragment>
-)
-
 const SongDetails = (props) => {
   return (
     <Show {...props} title=" ">
@@ -59,7 +59,7 @@ const SongList = (props) => {
       title={<Title subTitle={'Songs'} />}
       sort={{ field: 'title', order: 'ASC' }}
       exporter={false}
-      bulkActionButtons={<SongBulkActionButtons />}
+      bulkActionButtons={<SongBulkActions />}
       filters={<SongFilter />}
       perPage={isXsmall ? 50 : 15}
       pagination={<Pagination />}