From cca32360dbf0755e14cfd6ff1b4934f9e91097e8 Mon Sep 17 00:00:00 2001
From: Deluan <deluan@navidrome.org>
Date: Wed, 27 Oct 2021 20:53:58 -0400
Subject: [PATCH] Use `refetch` when changing the playlist (as opposed to a
 full `refresh`)

---
 ui/src/playlist/PlaylistSongs.js | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/ui/src/playlist/PlaylistSongs.js b/ui/src/playlist/PlaylistSongs.js
index a8844854..73ce2c01 100644
--- a/ui/src/playlist/PlaylistSongs.js
+++ b/ui/src/playlist/PlaylistSongs.js
@@ -4,7 +4,6 @@ import {
   ListToolbar,
   TextField,
   NumberField,
-  useRefresh,
   useDataProvider,
   useNotify,
   useVersion,
@@ -85,12 +84,11 @@ const ReorderableList = ({ readOnly, children, ...rest }) => {
 
 const PlaylistSongs = ({ playlistId, readOnly, actions, ...props }) => {
   const listContext = useListContext()
-  const { data, ids, onUnselectItems } = listContext
+  const { data, ids, selectedIds, onUnselectItems, refetch } = listContext
   const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
   const classes = useStyles({ isDesktop })
   const dispatch = useDispatch()
   const dataProvider = useDataProvider()
-  const refresh = useRefresh()
   const notify = useNotify()
   const version = useVersion()
   useResourceRefresh('song', 'playlist')
@@ -98,10 +96,10 @@ const PlaylistSongs = ({ playlistId, readOnly, actions, ...props }) => {
   const onAddToPlaylist = useCallback(
     (pls) => {
       if (pls.id === playlistId) {
-        refresh()
+        refetch()
       }
     },
-    [playlistId, refresh]
+    [playlistId, refetch]
   )
 
   const reorder = useCallback(
@@ -113,13 +111,13 @@ const PlaylistSongs = ({ playlistId, readOnly, actions, ...props }) => {
           filter: { playlist_id: playlistId },
         })
         .then(() => {
-          refresh()
+          refetch()
         })
         .catch(() => {
           notify('ra.page.error', 'warning')
         })
     },
-    [dataProvider, notify, refresh]
+    [dataProvider, notify, refetch]
   )
 
   const handleDragEnd = useCallback(
@@ -169,16 +167,15 @@ const PlaylistSongs = ({ playlistId, readOnly, actions, ...props }) => {
         classes={{ toolbar: classes.toolbar }}
         filters={props.filters}
         actions={actions}
-        {...listContext}
       />
       <div className={classes.main}>
         <Card
           className={clsx(classes.content, {
-            [classes.bulkActionsDisplayed]: listContext.selectedIds.length > 0,
+            [classes.bulkActionsDisplayed]: selectedIds.length > 0,
           })}
           key={version}
         >
-          <BulkActionsToolbar {...listContext}>
+          <BulkActionsToolbar>
             <PlaylistSongBulkActions
               playlistId={playlistId}
               onUnselectItems={onUnselectItems}