Fix Album View

ui/src/album/AlbumSongs.js

@@ -1,10 +1,10 @@
 import React from 'react'
 import {
   BulkActionsToolbar,
-  DatagridLoading,
   ListToolbar,
   TextField,
-  useListController,
+  useVersion,
+  useListContext,
 } from 'react-admin'
 import classnames from 'classnames'
 import { useDispatch } from 'react-redux'
@@ -14,6 +14,7 @@ import StarBorderIcon from '@material-ui/icons/StarBorder'
 import { playTracks } from '../actions'
 import {
   DurationField,
+  SongBulkActions,
   SongContextMenu,
   SongDatagrid,
   SongDetails,
@@ -52,97 +53,74 @@ const useStyles = makeStyles(
       marginTop: '-2px',
       verticalAlign: 'text-top',
     },
+    toolbar: {
+      justifyContent: 'flex-start',
+    },
   }),
   { name: 'RaList' }
 )
 
-const useStylesListToolbar = makeStyles({
-  toolbar: {
-    justifyContent: 'flex-start',
-  },
-})
-
 const AlbumSongs = (props) => {
+  console.log('songs', props)
+  const listContext = 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 { bulkActionButtons, albumId, className } = props
-  const { data, ids, version } = controllerProps
-
-  const anySong = data[ids[0]]
-  const showPlaceholder = !anySong || anySong.albumId !== albumId
-  const hasBulkActions = props.bulkActionButtons !== false
-
+  const { id: album_id, data, ids } = listContext
+  const version = useVersion()
   return (
     <>
       <ListToolbar
-        classes={classesToolbar}
-        filters={props.filters}
-        {...controllerProps}
+        classes={{ toolbar: classes.toolbar }}
         actions={props.actions}
-        permanentFilter={props.filter}
+        permanentFilter={{ album_id }}
+        {...listContext}
       />
       <div className={classes.main}>
         <Card
           className={classnames(classes.content, {
-            [classes.bulkActionsDisplayed]:
-              controllerProps.selectedIds.length > 0,
+            [classes.bulkActionsDisplayed]: listContext.selectedIds.length > 0,
           })}
           key={version}
         >
-          {bulkActionButtons !== false && bulkActionButtons && (
-            <BulkActionsToolbar {...controllerProps}>
-              {bulkActionButtons}
-            </BulkActionsToolbar>
-          )}
-          {showPlaceholder ? (
-            <DatagridLoading
-              classes={classes}
-              className={className}
-              expand={null}
-              hasBulkActions={hasBulkActions}
-              nbChildren={3}
-              size={'small'}
+          <BulkActionsToolbar {...listContext}>
+            <SongBulkActions />
+          </BulkActionsToolbar>
+          <SongDatagrid
+            expand={isXsmall ? null : <SongDetails />}
+            rowClick={(id) => dispatch(playTracks(data, ids, id))}
+            {...listContext}
+            hasBulkActions={true}
+            showDiscSubtitles={true}
+            contextAlwaysVisible={!isDesktop}
+          >
+            {isDesktop && (
+              <TextField
+                source="trackNumber"
+                sortBy="discNumber asc, trackNumber asc"
+                label="#"
+                sortable={false}
+              />
+            )}
+            <SongTitleField
+              source="title"
+              sortable={false}
+              showTrackNumbers={!isDesktop}
             />
-          ) : (
-            <SongDatagrid
-              expand={isXsmall ? null : <SongDetails />}
-              rowClick={(id) => dispatch(playTracks(data, ids, id))}
-              {...controllerProps}
-              hasBulkActions={hasBulkActions}
-              showDiscSubtitles={true}
-              contextAlwaysVisible={!isDesktop}
-            >
-              {isDesktop && (
-                <TextField
-                  source="trackNumber"
-                  sortBy="discNumber asc, trackNumber asc"
-                  label="#"
-                  sortable={false}
+            {isDesktop && <TextField source="artist" sortable={false} />}
+            <DurationField source="duration" sortable={false} />
+            <SongContextMenu
+              source={'starred'}
+              sortable={false}
+              label={
+                <StarBorderIcon
+                  fontSize={'small'}
+                  className={classes.columnIcon}
                 />
-              )}
-              <SongTitleField
-                source="title"
-                sortable={false}
-                showTrackNumbers={!isDesktop}
-              />
-              {isDesktop && <TextField source="artist" sortable={false} />}
-              <DurationField source="duration" sortable={false} />
-              <SongContextMenu
-                source={'starred'}
-                sortable={false}
-                label={
-                  <StarBorderIcon
-                    fontSize={'small'}
-                    className={classes.columnIcon}
-                  />
-                }
-              />
-            </SongDatagrid>
-          )}
+              }
+            />
+          </SongDatagrid>
         </Card>
       </div>
       <AddToPlaylistDialog />
@@ -150,4 +128,9 @@ const AlbumSongs = (props) => {
   )
 }
 
-export default AlbumSongs
+const SanitizedAlbumSongs = (props) => {
+  const { loaded, loading, total, ...rest } = useListContext(props)
+  return <>{loaded && <AlbumSongs {...rest} actions={props.actions} />}</>
+}
+
+export default SanitizedAlbumSongs