Fix playlists

ui/src/playlist/PlaylistSongs.js

@@ -1,13 +1,13 @@
-import React from 'react'
+import React, { useCallback } from 'react'
 import {
   BulkActionsToolbar,
-  DatagridLoading,
   ListToolbar,
   TextField,
-  useListController,
   useRefresh,
   useDataProvider,
   useNotify,
+  useVersion,
+  useListContext,
 } from 'react-admin'
 import classnames from 'classnames'
 import { useDispatch } from 'react-redux'
@@ -24,6 +24,7 @@ import {
 import AddToPlaylistDialog from '../dialogs/AddToPlaylistDialog'
 import { AlbumLinkField } from '../song/AlbumLinkField'
 import { playTracks } from '../actions'
+import PlaylistSongBulkActions from './PlaylistSongBulkActions'
 
 const useStyles = makeStyles(
   (theme) => ({
@@ -51,16 +52,23 @@ const useStyles = makeStyles(
       flexWrap: 'wrap',
     },
     noResults: { padding: 20 },
+    toolbar: {
+      justifyContent: 'flex-start',
+    },
+    row: {
+      '&:hover': {
+        '& $contextMenu': {
+          visibility: 'visible',
+        },
+      },
+    },
+    contextMenu: {
+      visibility: 'hidden',
+    },
   }),
   { name: 'RaList' }
 )
 
-const useStylesListToolbar = makeStyles({
-  toolbar: {
-    justifyContent: 'flex-start',
-  },
-})
-
 const ReorderableList = ({ readOnly, children, ...rest }) => {
   if (readOnly) {
     return children
@@ -68,113 +76,96 @@ const ReorderableList = ({ readOnly, children, ...rest }) => {
   return <ReactDragListView {...rest}>{children}</ReactDragListView>
 }
 
-const PlaylistSongs = (props) => {
+const PlaylistSongs = ({ playlistId, readOnly, ...props }) => {
+  const { data, ids } = props
   const classes = useStyles(props)
-  const classesToolbar = useStylesListToolbar(props)
   const dispatch = useDispatch()
   const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
   const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
-  const controllerProps = useListController(props)
   const dataProvider = useDataProvider()
   const refresh = useRefresh()
   const notify = useNotify()
-  const { bulkActionButtons, expand, className, playlistId, readOnly } = props
-  const { data, ids, version, total } = controllerProps
+  const version = useVersion()
 
-  if (total === 0) {
-    return null
-  }
-
-  const anySong = data[ids[0]]
-  const showPlaceholder = !anySong || anySong.playlistId !== playlistId
-  const hasBulkActions = props.bulkActionButtons !== false
-
-  const reorder = (playlistId, id, newPos) => {
-    dataProvider
-      .update('playlistTrack', {
-        id,
-        data: { insert_before: newPos },
-        filter: { playlist_id: playlistId },
-      })
-      .then(() => {
+  const onAddToPlaylist = useCallback(
+    (pls) => {
+      if (pls.id === playlistId) {
         refresh()
-      })
-      .catch(() => {
-        notify('ra.page.error', 'warning')
-      })
-  }
+      }
+    },
+    [playlistId, refresh]
+  )
 
-  const onAddToPlaylist = (pls) => {
-    if (pls.id === props.id) {
-      refresh()
-    }
-  }
+  const reorder = useCallback(
+    (playlistId, id, newPos) => {
+      dataProvider
+        .update('playlistTrack', {
+          id,
+          data: { insert_before: newPos },
+          filter: { playlist_id: playlistId },
+        })
+        .then(() => {
+          refresh()
+        })
+        .catch(() => {
+          notify('ra.page.error', 'warning')
+        })
+    },
+    [dataProvider, notify, refresh]
+  )
 
-  const handleDragEnd = (from, to) => {
-    const toId = ids[to]
-    const fromId = ids[from]
-    reorder(playlistId, fromId, toId)
-  }
+  const handleDragEnd = useCallback(
+    (from, to) => {
+      const toId = ids[to]
+      const fromId = ids[from]
+      reorder(playlistId, fromId, toId)
+    },
+    [playlistId, reorder, ids]
+  )
 
   return (
     <>
       <ListToolbar
-        classes={classesToolbar}
+        classes={{ toolbar: classes.toolbar }}
         filters={props.filters}
-        {...controllerProps}
         actions={props.actions}
-        permanentFilter={props.filter}
+        {...props}
       />
       <div className={classes.main}>
         <Card
           className={classnames(classes.content, {
-            [classes.bulkActionsDisplayed]:
-              controllerProps.selectedIds.length > 0,
+            [classes.bulkActionsDisplayed]: props.selectedIds.length > 0,
           })}
           key={version}
         >
-          {bulkActionButtons !== false && bulkActionButtons && (
-            <BulkActionsToolbar {...controllerProps}>
-              {bulkActionButtons}
-            </BulkActionsToolbar>
-          )}
-          {showPlaceholder ? (
-            <DatagridLoading
-              classes={classes}
-              className={className}
-              expand={expand}
-              hasBulkActions={hasBulkActions}
-              nbChildren={3}
-              size={'small'}
-            />
-          ) : (
-            <ReorderableList
-              readOnly={readOnly}
-              onDragEnd={handleDragEnd}
-              nodeSelector={'tr'}
+          <BulkActionsToolbar {...props}>
+            <PlaylistSongBulkActions playlistId={playlistId} />
+          </BulkActionsToolbar>
+          <ReorderableList
+            readOnly={readOnly}
+            onDragEnd={handleDragEnd}
+            nodeSelector={'tr'}
+          >
+            <SongDatagrid
+              expand={!isXsmall && <SongDetails />}
+              rowClick={(id) => dispatch(playTracks(data, ids, id))}
+              {...props}
+              hasBulkActions={true}
+              contextAlwaysVisible={!isDesktop}
+              classes={{ row: classes.row }}
             >
-              <SongDatagrid
-                expand={!isXsmall && <SongDetails />}
-                rowClick={(id) => dispatch(playTracks(data, ids, id))}
-                {...controllerProps}
-                hasBulkActions={hasBulkActions}
-                contextAlwaysVisible={!isDesktop}
-              >
-                {isDesktop && <TextField source="id" label={'#'} />}
-                <SongTitleField source="title" showTrackNumbers={false} />
-                {isDesktop && <AlbumLinkField source="album" />}
-                {isDesktop && <TextField source="artist" />}
-                <DurationField
-                  source="duration"
-                  className={classes.draggable}
-                />
-                <SongContextMenu
-                  onAddToPlaylist={onAddToPlaylist}
-                  showStar={false}
-                />
-              </SongDatagrid>
-            </ReorderableList>
-          )}
+              {isDesktop && <TextField source="id" label={'#'} />}
+              <SongTitleField source="title" showTrackNumbers={false} />
+              {isDesktop && <AlbumLinkField source="album" />}
+              {isDesktop && <TextField source="artist" />}
+              <DurationField source="duration" className={classes.draggable} />
+              <SongContextMenu
+                onAddToPlaylist={onAddToPlaylist}
+                showStar={false}
+                className={classes.contextMenu}
+              />
+            </SongDatagrid>
+          </ReorderableList>
         </Card>
       </div>
       <AddToPlaylistDialog />
@@ -182,4 +173,19 @@ const PlaylistSongs = (props) => {
   )
 }
 
-export default PlaylistSongs
+const SanitizedPlaylistSongs = (props) => {
+  const { loaded, loading, total, ...rest } = useListContext(props)
+  return (
+    <>
+      {loaded && (
+        <PlaylistSongs
+          {...rest}
+          playlistId={props.id}
+          actions={props.actions}
+        />
+      )}
+    </>
+  )
+}
+
+export default SanitizedPlaylistSongs