From a25044bdf640f962867d400e7c3fb5aac9f19a2c Mon Sep 17 00:00:00 2001
From: Deluan <deluan@navidrome.org>
Date: Sun, 6 Sep 2020 11:44:15 -0400
Subject: [PATCH] Reorder action buttons

---
 ui/src/album/AlbumActions.js       | 42 ++++++++++++++++++------------
 ui/src/playlist/PlaylistActions.js | 12 ++++-----
 2 files changed, 31 insertions(+), 23 deletions(-)

diff --git a/ui/src/album/AlbumActions.js b/ui/src/album/AlbumActions.js
index 915017a20..69a607cf0 100644
--- a/ui/src/album/AlbumActions.js
+++ b/ui/src/album/AlbumActions.js
@@ -25,40 +25,48 @@ const AlbumActions = ({
   const dispatch = useDispatch()
   const translate = useTranslate()
 
+  const handlePlay = React.useCallback(() => {
+    dispatch(playTracks(data, ids))
+  }, [dispatch, data, ids])
+
+  const handlePlayLater = React.useCallback(() => {
+    dispatch(addTracks(data, ids))
+  }, [dispatch, data, ids])
+
+  const handleShuffle = React.useCallback(() => {
+    dispatch(shuffleTracks(data, ids))
+  }, [dispatch, data, ids])
+
+  const handleDownload = React.useCallback(() => {
+    subsonic.download(albumId)
+  }, [albumId])
+
   return (
     <TopToolbar className={className} {...sanitizeListRestProps(rest)}>
       <Button
-        onClick={() => {
-          dispatch(playTracks(data, ids))
-        }}
+        onClick={handlePlay}
         label={translate('resources.album.actions.playAll')}
       >
         <PlayArrowIcon />
       </Button>
       <Button
-        onClick={() => {
-          dispatch(shuffleTracks(data, ids))
-        }}
+        onClick={handleShuffle}
         label={translate('resources.album.actions.shuffle')}
       >
         <ShuffleIcon />
       </Button>
       <Button
-        onClick={() => {
-          subsonic.download(albumId)
-        }}
-        label={translate('resources.album.actions.download')}
-      >
-        <CloudDownloadOutlinedIcon />
-      </Button>
-      <Button
-        onClick={() => {
-          dispatch(addTracks(data, ids))
-        }}
+        onClick={handlePlayLater}
         label={translate('resources.album.actions.addToQueue')}
       >
         <AddToQueueIcon />
       </Button>
+      <Button
+        onClick={handleDownload}
+        label={translate('resources.album.actions.download')}
+      >
+        <CloudDownloadOutlinedIcon />
+      </Button>
     </TopToolbar>
   )
 }
diff --git a/ui/src/playlist/PlaylistActions.js b/ui/src/playlist/PlaylistActions.js
index ae847f882..e4ec24875 100644
--- a/ui/src/playlist/PlaylistActions.js
+++ b/ui/src/playlist/PlaylistActions.js
@@ -76,18 +76,18 @@ const PlaylistActions = ({
       >
         <ShuffleIcon />
       </Button>
-      <Button
-        onClick={handleDownload}
-        label={translate('resources.album.actions.download')}
-      >
-        <CloudDownloadOutlinedIcon />
-      </Button>
       <Button
         onClick={handlePlayLater}
         label={translate('resources.album.actions.addToQueue')}
       >
         <AddToQueueIcon />
       </Button>
+      <Button
+        onClick={handleDownload}
+        label={translate('resources.album.actions.download')}
+      >
+        <CloudDownloadOutlinedIcon />
+      </Button>
       <Button
         onClick={handleExport}
         label={translate('resources.playlist.actions.export')}