Use active filters when shuffling songs

ui/src/song/SongListActions.js

@@ -1,50 +1,6 @@
 import React, { cloneElement } from 'react'
-import { useDispatch } from 'react-redux'
-import {
-  Button,
-  sanitizeListRestProps,
-  TopToolbar,
-  useDataProvider,
-  useTranslate,
-  useNotify,
-} from 'react-admin'
-import ShuffleIcon from '@material-ui/icons/Shuffle'
-import { playTracks } from '../audioplayer'
-
-const ShuffleAllButton = () => {
-  const translate = useTranslate()
-  const dataProvider = useDataProvider()
-  const dispatch = useDispatch()
-  const notify = useNotify()
-
-  const handleOnClick = () => {
-    dataProvider
-      .getList('song', {
-        pagination: { page: 1, perPage: 200 },
-        sort: { field: 'random', order: 'ASC' },
-        filter: {},
-      })
-      .then((res) => {
-        const data = {}
-        res.data.forEach((song) => {
-          data[song.id] = song
-        })
-        dispatch(playTracks(data))
-      })
-      .catch(() => {
-        notify('ra.page.error', 'warning')
-      })
-  }
-
-  return (
-    <Button
-      onClick={handleOnClick}
-      label={translate('resources.song.actions.shuffleAll')}
-    >
-      <ShuffleIcon />
-    </Button>
-  )
-}
+import { sanitizeListRestProps, TopToolbar } from 'react-admin'
+import { ShuffleAllButton } from '../common'
 
 export const SongListActions = ({
   currentSort,
@@ -74,7 +30,7 @@ export const SongListActions = ({
           filterValues,
           context: 'button',
         })}
-      <ShuffleAllButton />
+      <ShuffleAllButton filters={filterValues} />
     </TopToolbar>
   )
 }