Fix Album View

ui/src/album/AlbumShow.js

@@ -1,40 +1,50 @@
 import React from 'react'
-import { useGetOne } from 'react-admin'
+import {
-import AlbumDetails from './AlbumDetails'
+  ReferenceManyField,
-import { Title } from '../common'
+  ShowContextProvider,
-import { SongBulkActions } from '../common'
+  useShowContext,
-import AlbumActions from './AlbumActions'
+  useShowController,
+} from 'react-admin'
 import AlbumSongs from './AlbumSongs'
+import AlbumDetails from './AlbumDetails'
+import AlbumActions from './AlbumActions'
 
-const AlbumShow = (props) => {
+const AlbumShowLayout = (props) => {
-  const { data: record, loading, error } = useGetOne('album', props.id)
+  console.log('show', props)
-
+  const { loading, ...context } = useShowContext(props)
-  if (loading) {
+  const { record } = context
-    return null
-  }
-
-  if (error) {
-    return <p>ERROR: {error}</p>
-  }
 
   return (
     <>
-      <AlbumDetails {...props} record={record} />
+      {record && <AlbumDetails {...context} />}
-      <AlbumSongs
+      {record && (
-        {...props}
+        <ReferenceManyField
-        albumId={props.id}
+          {...context}
-        title={<Title subTitle={record.name} />}
+          addLabel={false}
-        actions={<AlbumActions record={record} />}
+          reference="albumSong"
-        filter={{ album_id: props.id }}
+          target="album_id"
-        resource={'albumSong'}
+          sort={{ field: 'discNumber asc, trackNumber asc', order: 'ASC' }}
-        exporter={false}
           perPage={0}
           pagination={null}
-        sort={{ field: 'discNumber asc, trackNumber asc', order: 'ASC' }}
+        >
-        bulkActionButtons={<SongBulkActions />}
+          <AlbumSongs
+            resource={'albumSong'}
+            exporter={false}
+            actions={<AlbumActions record={record} />}
           />
+        </ReferenceManyField>
+      )}
     </>
   )
 }
 
+const AlbumShow = (props) => {
+  const controllerProps = useShowController(props)
+  return (
+    <ShowContextProvider value={controllerProps}>
+      <AlbumShowLayout {...props} {...controllerProps} />
+    </ShowContextProvider>
+  )
+}
+
 export default AlbumShow

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,67 +53,45 @@ 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 { id: album_id, data, ids } = listContext
-  const { bulkActionButtons, albumId, className } = props
+  const version = useVersion()
-  const { data, ids, version } = controllerProps
-
-  const anySong = data[ids[0]]
-  const showPlaceholder = !anySong || anySong.albumId !== albumId
-  const hasBulkActions = props.bulkActionButtons !== false
-
   return (
     <>
       <ListToolbar
-        classes={classesToolbar}
+        classes={{ toolbar: classes.toolbar }}
-        filters={props.filters}
-        {...controllerProps}
         actions={props.actions}
-        permanentFilter={props.filter}
+        permanentFilter={{ album_id }}
+        {...listContext}
       />
       <div className={classes.main}>
         <Card
           className={classnames(classes.content, {
-            [classes.bulkActionsDisplayed]:
+            [classes.bulkActionsDisplayed]: listContext.selectedIds.length > 0,
-              controllerProps.selectedIds.length > 0,
           })}
           key={version}
         >
-          {bulkActionButtons !== false && bulkActionButtons && (
+          <BulkActionsToolbar {...listContext}>
-            <BulkActionsToolbar {...controllerProps}>
+            <SongBulkActions />
-              {bulkActionButtons}
           </BulkActionsToolbar>
-          )}
-          {showPlaceholder ? (
-            <DatagridLoading
-              classes={classes}
-              className={className}
-              expand={null}
-              hasBulkActions={hasBulkActions}
-              nbChildren={3}
-              size={'small'}
-            />
-          ) : (
           <SongDatagrid
             expand={isXsmall ? null : <SongDetails />}
             rowClick={(id) => dispatch(playTracks(data, ids, id))}
-              {...controllerProps}
+            {...listContext}
-              hasBulkActions={hasBulkActions}
+            hasBulkActions={true}
             showDiscSubtitles={true}
             contextAlwaysVisible={!isDesktop}
           >
@@ -142,7 +121,6 @@ const AlbumSongs = (props) => {
               }
             />
           </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

ui/src/common/SongDatagrid.js

@@ -138,6 +138,9 @@ export const SongDatagrid = ({
   )
 
   const firstTracks = useMemo(() => {
+    if (!ids) {
+      return new Set()
+    }
     const set = new Set(
       ids
         .filter((i) => data[i])