Remove duplication

ui/src/album/AlbumSongs.js

@@ -1,8 +1,6 @@
 import React from 'react'
 import {
   BulkActionsToolbar,
-  Datagrid,
-  DatagridBody,
   DatagridLoading,
   FunctionField,
   ListToolbar,
@@ -17,7 +15,7 @@ import { playTracks } from '../audioplayer'
 import {
   DurationField,
   SongDetails,
-  SongDatagridRow,
+  SongDatagrid,
   SongContextMenu,
 } from '../common'
 
@@ -88,13 +86,6 @@ const AlbumSongs = (props) => {
   const showPlaceholder = !anySong || anySong.albumId !== albumId
   const hasBulkActions = props.bulkActionButtons !== false
 
-  const SongsDatagridBody = (props) => (
-    <DatagridBody {...props} row={<SongDatagridRow multiDisc={multiDisc} />} />
-  )
-  const SongsDatagrid = (props) => (
-    <Datagrid {...props} body={<SongsDatagridBody />} />
-  )
-
   return (
     <>
       <ListToolbar
@@ -127,11 +118,12 @@ const AlbumSongs = (props) => {
               size={'small'}
             />
           ) : (
-            <SongsDatagrid
+            <SongDatagrid
               expand={!isXsmall && <SongDetails />}
               rowClick={(id) => dispatch(playTracks(data, ids, id))}
               {...controllerProps}
               hasBulkActions={hasBulkActions}
+              multiDisc={multiDisc}
             >
               {isDesktop && (
                 <TextField
@@ -152,7 +144,7 @@ const AlbumSongs = (props) => {
               {isDesktop && <TextField source="artist" sortable={false} />}
               <DurationField source="duration" sortable={false} />
               <SongContextMenu />
-            </SongsDatagrid>
+            </SongDatagrid>
           )}
         </Card>
       </div>

ui/src/common/SongDatagrid.js

@@ -1,10 +1,10 @@
 import React, { useState, isValidElement, cloneElement } from 'react'
-import { DatagridRow, useTranslate } from 'react-admin'
+import { Datagrid, DatagridBody, DatagridRow, useTranslate } from 'react-admin'
 import { TableCell, TableRow, Typography } from '@material-ui/core'
 import PropTypes from 'prop-types'
 import RangeField from './RangeField'
 
-const SongDatagridRow = ({ record, children, multiDisc, ...rest }) => {
+export const SongDatagridRow = ({ record, children, multiDisc, ...rest }) => {
   const translate = useTranslate()
   const [visible, setVisible] = useState(false)
   return (
@@ -51,4 +51,10 @@ RangeField.propTypes = {
   multiDisc: PropTypes.bool,
 }
 
-export default SongDatagridRow
+export const SongDatagrid = (props) => {
+  const multiDisc = props.multiDisc
+  const SongDatagridBody = (props) => (
+    <DatagridBody {...props} row={<SongDatagridRow multiDisc={multiDisc} />} />
+  )
+  return <Datagrid {...props} body={<SongDatagridBody />} />
+}

ui/src/common/index.js

@@ -10,7 +10,7 @@ import SongDetails from './SongDetails'
 import SizeField from './SizeField'
 import DocLink from './DocLink'
 import List from './List'
-import SongDatagridRow from './SongDatagridRow'
+import { SongDatagrid, SongDatagridRow } from './SongDatagrid'
 import AddToPlaylistMenu from './AddToPlaylistMenu'
 import SongContextMenu from './SongContextMenu'
 
@@ -25,6 +25,7 @@ export {
   SimpleList,
   RangeField,
   SongDetails,
+  SongDatagrid,
   SongDatagridRow,
   DocLink,
   formatRange,

ui/src/playlist/PlaylistSongs.js

@@ -1,11 +1,11 @@
 import React from 'react'
 import {
   BulkActionsToolbar,
-  Datagrid,
-  DatagridBody,
   DatagridLoading,
   ListToolbar,
   TextField,
+  DatagridBody,
+  Datagrid,
   useListController,
   useRefresh,
 } from 'react-admin'

ui/src/song/SongList.js

@@ -1,7 +1,5 @@
 import React from 'react'
 import {
-  Datagrid,
-  DatagridBody,
   Filter,
   FunctionField,
   NumberField,
@@ -14,7 +12,7 @@ import {
   SimpleList,
   List,
   SongDetails,
-  SongDatagridRow,
+  SongDatagrid,
   SongContextMenu,
 } from '../common'
 import { useDispatch } from 'react-redux'
@@ -28,13 +26,6 @@ const SongFilter = (props) => (
   </Filter>
 )
 
-const SongsDatagridBody = (props) => (
-  <DatagridBody {...props} row={<SongDatagridRow />} />
-)
-const SongsDatagrid = (props) => (
-  <Datagrid {...props} body={<SongsDatagridBody />} />
-)
-
 const SongList = (props) => {
   const dispatch = useDispatch()
   const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
@@ -59,10 +50,10 @@ const SongList = (props) => {
             </>
           )}
           linkType={(id, basePath, record) => dispatch(setTrack(record))}
-          rightIcon={(r) => <SongContextMenu record={r} />}
+          rightIcon={(r) => <SongContextMenu record={r} visible={true} />}
         />
       ) : (
-        <SongsDatagrid
+        <SongDatagrid
           expand={<SongDetails />}
           rowClick={(id, basePath, record) => dispatch(setTrack(record))}
         >
@@ -76,7 +67,7 @@ const SongList = (props) => {
           )}
           <DurationField source="duration" />
           <SongContextMenu />
-        </SongsDatagrid>
+        </SongDatagrid>
       )}
     </List>
   )