From f9dae2dd2a9e58715e3a69b90bd0a4d7e7ae52c5 Mon Sep 17 00:00:00 2001
From: Deluan <deluan@deluan.com>
Date: Mon, 25 May 2020 18:34:31 -0400
Subject: [PATCH] Added individual AddToPlaylistDialogs to each list view

---
 ui/src/App.js                    |   3 -
 ui/src/album/AlbumList.js        |  38 ++++++-----
 ui/src/album/AlbumSongs.js       |   2 +
 ui/src/playlist/PlaylistSongs.js |   2 +
 ui/src/song/SongList.js          | 108 ++++++++++++++++---------------
 5 files changed, 82 insertions(+), 71 deletions(-)

diff --git a/ui/src/App.js b/ui/src/App.js
index 68f725d8f..0eb50950f 100644
--- a/ui/src/App.js
+++ b/ui/src/App.js
@@ -20,7 +20,6 @@ import themeReducer from './personal/themeReducer'
 import { addToPlaylistDialogReducer } from './dialogs/dialogState'
 import createAdminStore from './store/createAdminStore'
 import { i18nProvider } from './i18n'
-import AddToPlaylistDialog from './dialogs/AddToPlaylistDialog'
 
 const history = createHashHistory()
 
@@ -79,9 +78,7 @@ const App = () => (
         <Resource name="translation" />,
         <Resource name="playlistTrack" />,
 
-        // Detached components
         <Player />,
-        <AddToPlaylistDialog />,
       ]}
     </Admin>
   </Provider>
diff --git a/ui/src/album/AlbumList.js b/ui/src/album/AlbumList.js
index ff54e8954..59e4c8979 100644
--- a/ui/src/album/AlbumList.js
+++ b/ui/src/album/AlbumList.js
@@ -16,6 +16,7 @@ import AlbumListActions from './AlbumListActions'
 import AlbumListView from './AlbumListView'
 import AlbumGridView from './AlbumGridView'
 import { ALBUM_MODE_LIST } from './albumState'
+import AddToPlaylistDialog from '../dialogs/AddToPlaylistDialog'
 
 const AlbumFilter = (props) => {
   const translate = useTranslate()
@@ -57,22 +58,27 @@ const AlbumList = (props) => {
   const { width } = props
   const albumView = useSelector((state) => state.albumView)
   return (
-    <List
-      {...props}
-      exporter={false}
-      bulkActionButtons={false}
-      actions={<AlbumListActions />}
-      sort={{ field: 'created_at', order: 'DESC' }}
-      filters={<AlbumFilter />}
-      perPage={getPerPage(width)}
-      pagination={<Pagination rowsPerPageOptions={getPerPageOptions(width)} />}
-    >
-      {albumView.mode === ALBUM_MODE_LIST ? (
-        <AlbumListView {...props} />
-      ) : (
-        <AlbumGridView {...props} />
-      )}
-    </List>
+    <>
+      <List
+        {...props}
+        exporter={false}
+        bulkActionButtons={false}
+        actions={<AlbumListActions />}
+        sort={{ field: 'created_at', order: 'DESC' }}
+        filters={<AlbumFilter />}
+        perPage={getPerPage(width)}
+        pagination={
+          <Pagination rowsPerPageOptions={getPerPageOptions(width)} />
+        }
+      >
+        {albumView.mode === ALBUM_MODE_LIST ? (
+          <AlbumListView {...props} />
+        ) : (
+          <AlbumGridView {...props} />
+        )}
+      </List>
+      <AddToPlaylistDialog />,
+    </>
   )
 }
 
diff --git a/ui/src/album/AlbumSongs.js b/ui/src/album/AlbumSongs.js
index 8bb496b09..9cdeafa47 100644
--- a/ui/src/album/AlbumSongs.js
+++ b/ui/src/album/AlbumSongs.js
@@ -19,6 +19,7 @@ import {
   SongDatagrid,
   SongContextMenu,
 } from '../common'
+import AddToPlaylistDialog from '../dialogs/AddToPlaylistDialog'
 
 const useStyles = makeStyles(
   (theme) => ({
@@ -163,6 +164,7 @@ const AlbumSongs = (props) => {
           )}
         </Card>
       </div>
+      <AddToPlaylistDialog />,
     </>
   )
 }
diff --git a/ui/src/playlist/PlaylistSongs.js b/ui/src/playlist/PlaylistSongs.js
index 0c4d42d7d..a81c12ef5 100644
--- a/ui/src/playlist/PlaylistSongs.js
+++ b/ui/src/playlist/PlaylistSongs.js
@@ -18,6 +18,7 @@ import {
   SongContextMenu,
   SongDatagridRow,
 } from '../common'
+import AddToPlaylistDialog from '../dialogs/AddToPlaylistDialog'
 
 const useStyles = makeStyles(
   (theme) => ({
@@ -137,6 +138,7 @@ const PlaylistSongs = (props) => {
           )}
         </Card>
       </div>
+      <AddToPlaylistDialog />,
     </>
   )
 }
diff --git a/ui/src/song/SongList.js b/ui/src/song/SongList.js
index c875575ff..c9cd15125 100644
--- a/ui/src/song/SongList.js
+++ b/ui/src/song/SongList.js
@@ -23,6 +23,7 @@ import { useDispatch } from 'react-redux'
 import { setTrack } from '../audioplayer'
 import { SongBulkActions } from './SongBulkActions'
 import { AlbumLinkField } from './AlbumLinkField'
+import AddToPlaylistDialog from '../dialogs/AddToPlaylistDialog'
 
 const useStyles = makeStyles({
   columnIcon: {
@@ -48,58 +49,61 @@ const SongList = (props) => {
   const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
   const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
   return (
-    <List
-      {...props}
-      sort={{ field: 'title', order: 'ASC' }}
-      exporter={false}
-      bulkActionButtons={<SongBulkActions />}
-      filters={<SongFilter />}
-      perPage={isXsmall ? 50 : 15}
-    >
-      {isXsmall ? (
-        <SimpleList
-          primaryText={(r) => r.title}
-          secondaryText={(r) => r.artist}
-          tertiaryText={(r) => (
-            <>
-              <DurationField record={r} source={'duration'} />
-              &nbsp;&nbsp;&nbsp;
-            </>
-          )}
-          linkType={(id, basePath, record) => dispatch(setTrack(record))}
-          rightIcon={(r) => <SongContextMenu record={r} visible={true} />}
-        />
-      ) : (
-        <SongDatagrid
-          expand={<SongDetails />}
-          rowClick={(id, basePath, record) => dispatch(setTrack(record))}
-        >
-          <TextField source="title" />
-          {isDesktop && <AlbumLinkField source="album" />}
-          <TextField source="artist" />
-          {isDesktop && <NumberField source="trackNumber" />}
-          {isDesktop && <NumberField source="playCount" />}
-          {isDesktop && (
-            <FunctionField source="year" render={(r) => r.year || ''} />
-          )}
-          <DurationField source="duration" />
-          {isDesktop ? (
-            <SongContextMenu
-              source={'starred'}
-              label={
-                <StarBorderIcon
-                  fontSize={'small'}
-                  className={classes.columnIcon}
-                />
-              }
-              sortBy={'starred DESC, starredAt DESC'}
-            />
-          ) : (
-            <SongContextMenu showStar={false} />
-          )}
-        </SongDatagrid>
-      )}
-    </List>
+    <>
+      <List
+        {...props}
+        sort={{ field: 'title', order: 'ASC' }}
+        exporter={false}
+        bulkActionButtons={<SongBulkActions />}
+        filters={<SongFilter />}
+        perPage={isXsmall ? 50 : 15}
+      >
+        {isXsmall ? (
+          <SimpleList
+            primaryText={(r) => r.title}
+            secondaryText={(r) => r.artist}
+            tertiaryText={(r) => (
+              <>
+                <DurationField record={r} source={'duration'} />
+                &nbsp;&nbsp;&nbsp;
+              </>
+            )}
+            linkType={(id, basePath, record) => dispatch(setTrack(record))}
+            rightIcon={(r) => <SongContextMenu record={r} visible={true} />}
+          />
+        ) : (
+          <SongDatagrid
+            expand={<SongDetails />}
+            rowClick={(id, basePath, record) => dispatch(setTrack(record))}
+          >
+            <TextField source="title" />
+            {isDesktop && <AlbumLinkField source="album" />}
+            <TextField source="artist" />
+            {isDesktop && <NumberField source="trackNumber" />}
+            {isDesktop && <NumberField source="playCount" />}
+            {isDesktop && (
+              <FunctionField source="year" render={(r) => r.year || ''} />
+            )}
+            <DurationField source="duration" />
+            {isDesktop ? (
+              <SongContextMenu
+                source={'starred'}
+                label={
+                  <StarBorderIcon
+                    fontSize={'small'}
+                    className={classes.columnIcon}
+                  />
+                }
+                sortBy={'starred DESC, starredAt DESC'}
+              />
+            ) : (
+              <SongContextMenu showStar={false} />
+            )}
+          </SongDatagrid>
+        )}
+      </List>
+      <AddToPlaylistDialog />,
+    </>
   )
 }