From 5abc215270159b3fcb2a287524d3c5369ca990f8 Mon Sep 17 00:00:00 2001
From: Ritik Pandey <57366926+RitikPandey1@users.noreply.github.com>
Date: Fri, 26 Mar 2021 07:10:31 +0530
Subject: [PATCH] Hide BulkActionsToolbar after removing songs from playlist
 (#898)

---
 ui/src/playlist/PlaylistSongBulkActions.js | 13 +++++++++++--
 ui/src/playlist/PlaylistSongs.js           |  7 +++++--
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/ui/src/playlist/PlaylistSongBulkActions.js b/ui/src/playlist/PlaylistSongBulkActions.js
index 8265554a1..c9b0a62bc 100644
--- a/ui/src/playlist/PlaylistSongBulkActions.js
+++ b/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>
   )
diff --git a/ui/src/playlist/PlaylistSongs.js b/ui/src/playlist/PlaylistSongs.js
index 9bf302cd0..a9f4a7eeb 100644
--- a/ui/src/playlist/PlaylistSongs.js
+++ b/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}