Link to artist from album list

ui/src/album/AlbumDetails.js

@@ -3,7 +3,7 @@ import { Card, CardContent, CardMedia, Typography } from '@material-ui/core'
 import { useTranslate } from 'react-admin'
 import subsonic from '../subsonic'
 import { DurationField, formatRange } from '../common'
-import { ArtistLinkField } from './ArtistLinkField'
+import { ArtistLinkField } from '../common'
 
 const AlbumDetails = ({ classes, record }) => {
   const translate = useTranslate()

ui/src/album/AlbumGridView.js

@@ -6,7 +6,7 @@ import { Link } from 'react-router-dom'
 import { linkToRecord, Loading } from 'react-admin'
 import { withContentRect } from 'react-measure'
 import subsonic from '../subsonic'
-import { ArtistLinkField } from './ArtistLinkField'
+import { ArtistLinkField } from '../common'
 import AlbumContextMenu from './AlbumContextMenu.js'
 
 const useStyles = makeStyles((theme) => ({

ui/src/album/AlbumListView.js

@@ -3,13 +3,17 @@ import {
   BooleanField,
   Datagrid,
   DateField,
-  FunctionField,
   NumberField,
   Show,
   SimpleShowLayout,
   TextField,
 } from 'react-admin'
-import { DurationField, RangeField, SimpleList } from '../common'
+import {
+  ArtistLinkField,
+  DurationField,
+  RangeField,
+  SimpleList,
+} from '../common'
 import { useMediaQuery } from '@material-ui/core'
 import AlbumContextMenu from './AlbumContextMenu'
 
@@ -46,7 +50,7 @@ const AlbumListView = ({ hasShow, hasEdit, hasList, ...rest }) => {
   ) : (
     <Datagrid expand={<AlbumDetails />} rowClick={'show'} {...rest}>
       <TextField source="name" />
-      <FunctionField source="artist" render={(r) => r.albumArtist} />
+      <ArtistLinkField />
       {isDesktop && <NumberField source="songCount" />}
       {isDesktop && <NumberField source="playCount" />}
       <RangeField source={'year'} sortBy={'maxYear'} />

ui/src/album/ArtistLinkField.js

@@ -1,25 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { Link } from 'react-admin'
-
-export const ArtistLinkField = ({ record, className }) => {
-  const filter = { artist_id: record.albumArtistId }
-  const url = `/album?filter=${JSON.stringify(
-    filter
-  )}&order=ASC&sort=maxYear&displayedFilters={"compilation":true}`
-  return (
-    <Link to={url} onClick={(e) => e.stopPropagation()} className={className}>
-      {record.albumArtist}
-    </Link>
-  )
-}
-
-ArtistLinkField.propTypes = {
-  className: PropTypes.string,
-  source: PropTypes.string,
-}
-
-ArtistLinkField.defaultProps = {
-  source: 'artistId',
-  addLabel: true,
-}

ui/src/artist/ArtistList.js

@@ -7,7 +7,7 @@ import {
   SearchInput,
   TextField,
 } from 'react-admin'
-import { Pagination, Title } from '../common'
+import { artistLink, Pagination, Title } from '../common'
 
 const ArtistFilter = (props) => (
   <Filter {...props}>
@@ -15,13 +15,6 @@ const ArtistFilter = (props) => (
   </Filter>
 )
 
-const artistRowClick = (id) => {
-  const filter = { artist_id: id }
-  return `/album?filter=${JSON.stringify(
-    filter
-  )}&order=ASC&sort=maxYear&displayedFilters={"compilation":true}`
-}
-
 const ArtistList = (props) => (
   <List
     {...props}
@@ -35,7 +28,7 @@ const ArtistList = (props) => (
     perPage={15}
     pagination={<Pagination />}
   >
-    <Datagrid rowClick={artistRowClick}>
+    <Datagrid rowClick={artistLink}>
       <TextField source="name" />
       <NumberField source="albumCount" />
       <NumberField source="songCount" />

ui/src/common/ArtistLinkField.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Link } from 'react-admin'
+
+const artistLink = (id) => {
+  return `/album?filter={"artist_id":"${id}"}&order=ASC&sort=maxYear&displayedFilters={"compilation":true}`
+}
+
+const ArtistLinkField = ({ record, className }) => {
+  return (
+    <Link
+      to={artistLink(record.albumArtistId)}
+      onClick={(e) => e.stopPropagation()}
+      className={className}
+    >
+      {record.albumArtist}
+    </Link>
+  )
+}
+
+ArtistLinkField.propTypes = {
+  className: PropTypes.string,
+  source: PropTypes.string,
+}
+
+ArtistLinkField.defaultProps = {
+  source: 'artistId',
+  addLabel: true,
+}
+
+export { artistLink }
+
+export default ArtistLinkField

ui/src/common/index.js

@@ -5,6 +5,7 @@ import Pagination from './Pagination'
 import PlayButton from './PlayButton'
 import SimpleList from './SimpleList'
 import RangeField, { formatRange } from './RangeField'
+import ArtistLinkField, { artistLink } from './ArtistLinkField'
 import SongDetails from './SongDetails'
 import SizeField from './SizeField'
 import DocLink from './DocLink'
@@ -21,4 +22,6 @@ export {
   SongDetails,
   DocLink,
   formatRange,
+  ArtistLinkField,
+  artistLink,
 }