Use a custom List component

ui/src/album/AlbumList.js

@@ -3,7 +3,6 @@ import { useSelector } from 'react-redux'
 import {
   AutocompleteInput,
   Filter,
-  List,
   NullableBooleanInput,
   NumberInput,
   ReferenceInput,
@@ -11,7 +10,7 @@ import {
   Pagination,
   useTranslate,
 } from 'react-admin'
-import { Title } from '../common'
+import { List } from '../common'
 import { withWidth } from '@material-ui/core'
 import AlbumListActions from './AlbumListActions'
 import AlbumListView from './AlbumListView'
@@ -60,9 +59,6 @@ const AlbumList = (props) => {
   return (
     <List
       {...props}
-      title={
-        <Title subTitle={'resources.album.name'} args={{ smart_count: 2 }} />
-      }
       exporter={false}
       bulkActionButtons={false}
       actions={<AlbumListActions />}

ui/src/artist/ArtistList.js

@@ -2,12 +2,11 @@ import React from 'react'
 import {
   Datagrid,
   Filter,
-  List,
   NumberField,
   SearchInput,
   TextField,
 } from 'react-admin'
-import { artistLink, Pagination, Title } from '../common'
+import { artistLink, List } from '../common'
 
 const ArtistFilter = (props) => (
   <Filter {...props}>
@@ -18,15 +17,10 @@ const ArtistFilter = (props) => (
 const ArtistList = (props) => (
   <List
     {...props}
-    title={
-      <Title subTitle={'resources.artist.name'} args={{ smart_count: 2 }} />
-    }
     sort={{ field: 'name', order: 'ASC' }}
     exporter={false}
     bulkActionButtons={false}
     filters={<ArtistFilter />}
-    perPage={15}
-    pagination={<Pagination />}
   >
     <Datagrid rowClick={artistLink}>
       <TextField source="name" />

ui/src/common/List.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import { List as RAList } from 'react-admin'
+import Pagination from './Pagination'
+import { Title } from './index'
+
+const List = (props) => {
+  const { resource } = props
+  return (
+    <RAList
+      title={
+        <Title
+          subTitle={`resources.${resource}.name`}
+          args={{ smart_count: 2 }}
+        />
+      }
+      perPage={15}
+      pagination={<Pagination />}
+      {...props}
+    />
+  )
+}
+
+export default List

ui/src/common/index.js

@@ -9,6 +9,7 @@ import ArtistLinkField, { artistLink } from './ArtistLinkField'
 import SongDetails from './SongDetails'
 import SizeField from './SizeField'
 import DocLink from './DocLink'
+import List from './List'
 
 export {
   Title,
@@ -16,6 +17,7 @@ export {
   SizeField,
   BitrateField,
   Pagination,
+  List,
   PlayButton,
   SimpleList,
   RangeField,

ui/src/player/PlayerList.js

@@ -1,25 +1,18 @@
 import React from 'react'
 import {
   Datagrid,
-  List,
   TextField,
   DateField,
   FunctionField,
   ReferenceField,
 } from 'react-admin'
 import { useMediaQuery } from '@material-ui/core'
-import { SimpleList, Title } from '../common'
+import { SimpleList, List } from '../common'
 
 const PlayerList = (props) => {
   const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
   return (
-    <List
+    <List exporter={false} {...props}>
-      title={
-        <Title subTitle={'resources.player.name'} args={{ smart_count: 2 }} />
-      }
-      exporter={false}
-      {...props}
-    >
       {isXsmall ? (
         <SimpleList
           primaryText={(r) => r.client}

ui/src/song/SongList.js

@@ -3,18 +3,16 @@ import {
   Datagrid,
   Filter,
   FunctionField,
-  List,
   NumberField,
   SearchInput,
   TextField,
 } from 'react-admin'
 import { useMediaQuery } from '@material-ui/core'
-import { DurationField, Pagination, SimpleList, Title } from '../common'
+import { DurationField, SimpleList, List, SongDetails } from '../common'
 import { useDispatch } from 'react-redux'
 import { setTrack } from '../audioplayer'
 import { SongBulkActions } from './SongBulkActions'
 import { AlbumLinkField } from './AlbumLinkField'
-import { SongDetails } from '../common'
 import { SongContextMenu } from './SongContextMenu'
 
 const SongFilter = (props) => (
@@ -30,15 +28,11 @@ const SongList = (props) => {
   return (
     <List
       {...props}
-      title={
-        <Title subTitle={'resources.song.name'} args={{ smart_count: 2 }} />
-      }
       sort={{ field: 'title', order: 'ASC' }}
       exporter={false}
       bulkActionButtons={<SongBulkActions />}
       filters={<SongFilter />}
       perPage={isXsmall ? 50 : 15}
-      pagination={<Pagination />}
     >
       {isXsmall ? (
         <SimpleList

ui/src/transcoding/TranscodingList.js

@@ -1,22 +1,13 @@
 import React from 'react'
-import { Datagrid, List, TextField } from 'react-admin'
+import { Datagrid, TextField } from 'react-admin'
 import { useMediaQuery } from '@material-ui/core'
-import { SimpleList, Title } from '../common'
+import { SimpleList, List } from '../common'
 import config from '../config'
 
 const TranscodingList = (props) => {
   const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
   return (
-    <List
+    <List exporter={false} {...props}>
-      title={
-        <Title
-          subTitle={'resources.transcoding.name'}
-          args={{ smart_count: 2 }}
-        />
-      }
-      exporter={false}
-      {...props}
-    >
       {isXsmall ? (
         <SimpleList
           primaryText={(r) => r.name}

ui/src/user/UserList.js

@@ -4,13 +4,12 @@ import {
   Datagrid,
   Filter,
   DateField,
-  List,
   SearchInput,
   SimpleList,
   TextField,
 } from 'react-admin'
 import { useMediaQuery } from '@material-ui/core'
-import { Title } from '../common'
+import { List } from '../common'
 
 const UserFilter = (props) => (
   <Filter {...props}>
@@ -24,9 +23,6 @@ const UserList = (props) => {
   return (
     <List
       {...props}
-      title={
-        <Title subTitle={'resources.user.name'} args={{ smart_count: 2 }} />
-      }
       sort={{ field: 'userName', order: 'ASC' }}
       exporter={false}
       filters={<UserFilter />}