Reorder action buttons

navidrome · Sep 6, 2020 · a25044b · a25044b
1 parent 30e9884
commit a25044b
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 22 deletions.
diff --git a/ui/src/album/AlbumActions.js b/ui/src/album/AlbumActions.js
@@ -25,39 +25,47 @@ 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')}
+        onClick={handlePlayLater}
+        label={translate('resources.album.actions.addToQueue')}
       >
-        <CloudDownloadOutlinedIcon />
+        <AddToQueueIcon />
       </Button>
       <Button
-        onClick={() => {
-          dispatch(addTracks(data, ids))
-        }}
-        label={translate('resources.album.actions.addToQueue')}
+        onClick={handleDownload}
+        label={translate('resources.album.actions.download')}
       >
-        <AddToQueueIcon />
+        <CloudDownloadOutlinedIcon />
       </Button>
     </TopToolbar>
   )

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