Reorder action buttons

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={() => {
+        onClick={handlePlay}
-          dispatch(playTracks(data, ids))
-        }}
         label={translate('resources.album.actions.playAll')}
       >
         <PlayArrowIcon />
       </Button>
       <Button
-        onClick={() => {
+        onClick={handleShuffle}
-          dispatch(shuffleTracks(data, ids))
-        }}
         label={translate('resources.album.actions.shuffle')}
       >
         <ShuffleIcon />
       </Button>
       <Button
-        onClick={() => {
+        onClick={handlePlayLater}
-          subsonic.download(albumId)
-        }}
-        label={translate('resources.album.actions.download')}
-      >
-        <CloudDownloadOutlinedIcon />
-      </Button>
-      <Button
-        onClick={() => {
-          dispatch(addTracks(data, ids))
-        }}
         label={translate('resources.album.actions.addToQueue')}
       >
         <AddToQueueIcon />
       </Button>
+      <Button
+        onClick={handleDownload}
+        label={translate('resources.album.actions.download')}
+      >
+        <CloudDownloadOutlinedIcon />
+      </Button>
     </TopToolbar>
   )
 }

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')}