Hide BulkActionsToolbar after removing songs from playlist (#898)

ui/src/playlist/PlaylistSongBulkActions.js

@@ -7,7 +7,12 @@ import {
 import PropTypes from 'prop-types'
 
 // Replace original resource with "fake" one for removing tracks from playlist
-const PlaylistSongBulkActions = ({ playlistId, resource, ...rest }) => {
+const PlaylistSongBulkActions = ({
+  playlistId,
+  resource,
+  onUnselectItems,
+  ...rest
+}) => {
   const unselectAll = useUnselectAll()
   useEffect(() => {
     unselectAll('playlistTrack')
@@ -18,7 +23,11 @@ const PlaylistSongBulkActions = ({ playlistId, resource, ...rest }) => {
   return (
     <ResourceContextProvider value={mappedResource}>
       <Fragment>
-        <BulkDeleteButton {...rest} resource={mappedResource} />
+        <BulkDeleteButton
+          {...rest}
+          resource={mappedResource}
+          onClick={onUnselectItems}
+        />
       </Fragment>
     </ResourceContextProvider>
   )

ui/src/playlist/PlaylistSongs.js

@@ -77,7 +77,7 @@ const ReorderableList = ({ readOnly, children, ...rest }) => {
 }
 
 const PlaylistSongs = ({ playlistId, readOnly, ...props }) => {
-  const { data, ids } = props
+  const { data, ids, onUnselectItems } = props
   const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
   const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
   const classes = useStyles({ isDesktop })
@@ -139,7 +139,10 @@ const PlaylistSongs = ({ playlistId, readOnly, ...props }) => {
           key={version}
         >
           <BulkActionsToolbar {...props}>
-            <PlaylistSongBulkActions playlistId={playlistId} />
+            <PlaylistSongBulkActions
+              playlistId={playlistId}
+              onUnselectItems={onUnselectItems}
+            />
           </BulkActionsToolbar>
           <ReorderableList
             readOnly={readOnly}