From 2738ea1e4ab01aa2c2149b7e451753cc85bbc5f5 Mon Sep 17 00:00:00 2001
From: Deluan <deluan@navidrome.org>
Date: Thu, 19 Nov 2020 18:44:28 -0500
Subject: [PATCH] Fix Album View

---
 ui/src/album/AlbumShow.js     |  68 ++++++++++--------
 ui/src/album/AlbumSongs.js    | 127 +++++++++++++++-------------------
 ui/src/common/SongDatagrid.js |   3 +
 3 files changed, 97 insertions(+), 101 deletions(-)

diff --git a/ui/src/album/AlbumShow.js b/ui/src/album/AlbumShow.js
index 9b7aa61e1..4253983b0 100644
--- a/ui/src/album/AlbumShow.js
+++ b/ui/src/album/AlbumShow.js
@@ -1,40 +1,50 @@
 import React from 'react'
-import { useGetOne } from 'react-admin'
-import AlbumDetails from './AlbumDetails'
-import { Title } from '../common'
-import { SongBulkActions } from '../common'
-import AlbumActions from './AlbumActions'
+import {
+  ReferenceManyField,
+  ShowContextProvider,
+  useShowContext,
+  useShowController,
+} from 'react-admin'
 import AlbumSongs from './AlbumSongs'
+import AlbumDetails from './AlbumDetails'
+import AlbumActions from './AlbumActions'
 
-const AlbumShow = (props) => {
-  const { data: record, loading, error } = useGetOne('album', props.id)
-
-  if (loading) {
-    return null
-  }
-
-  if (error) {
-    return <p>ERROR: {error}</p>
-  }
+const AlbumShowLayout = (props) => {
+  console.log('show', props)
+  const { loading, ...context } = useShowContext(props)
+  const { record } = context
 
   return (
     <>
-      <AlbumDetails {...props} record={record} />
-      <AlbumSongs
-        {...props}
-        albumId={props.id}
-        title={<Title subTitle={record.name} />}
-        actions={<AlbumActions record={record} />}
-        filter={{ album_id: props.id }}
-        resource={'albumSong'}
-        exporter={false}
-        perPage={0}
-        pagination={null}
-        sort={{ field: 'discNumber asc, trackNumber asc', order: 'ASC' }}
-        bulkActionButtons={<SongBulkActions />}
-      />
+      {record && <AlbumDetails {...context} />}
+      {record && (
+        <ReferenceManyField
+          {...context}
+          addLabel={false}
+          reference="albumSong"
+          target="album_id"
+          sort={{ field: 'discNumber asc, trackNumber asc', order: 'ASC' }}
+          perPage={0}
+          pagination={null}
+        >
+          <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
diff --git a/ui/src/album/AlbumSongs.js b/ui/src/album/AlbumSongs.js
index 80426b954..09e64d228 100644
--- a/ui/src/album/AlbumSongs.js
+++ b/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
diff --git a/ui/src/common/SongDatagrid.js b/ui/src/common/SongDatagrid.js
index 76f5d9995..9147cbadc 100644
--- a/ui/src/common/SongDatagrid.js
+++ b/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])