From 301fa2a9575bb69a5d8529ed3cbdbba2da6068ff Mon Sep 17 00:00:00 2001
From: Deluan <deluan@deluan.com>
Date: Mon, 30 Mar 2020 19:34:00 -0400
Subject: [PATCH] fix: sort by album in songs view

---
 ui/src/song/AlbumLinkField.js | 16 ++++++++++++++++
 ui/src/song/SongList.js       | 17 ++++-------------
 2 files changed, 20 insertions(+), 13 deletions(-)
 create mode 100644 ui/src/song/AlbumLinkField.js

diff --git a/ui/src/song/AlbumLinkField.js b/ui/src/song/AlbumLinkField.js
new file mode 100644
index 000000000..443df08e4
--- /dev/null
+++ b/ui/src/song/AlbumLinkField.js
@@ -0,0 +1,16 @@
+import { Link } from 'react-admin'
+import React from 'react'
+
+export const AlbumLinkField = (props) => (
+  <Link
+    to={`/album/${props.record.albumId}/show`}
+    onClick={(e) => e.stopPropagation()}
+  >
+    {props.record.album}
+  </Link>
+)
+
+AlbumLinkField.defaultProps = {
+  source: 'albumId',
+  addLabel: true
+}
diff --git a/ui/src/song/SongList.js b/ui/src/song/SongList.js
index 6466a916f..fe0169d4c 100644
--- a/ui/src/song/SongList.js
+++ b/ui/src/song/SongList.js
@@ -4,14 +4,13 @@ import {
   Datagrid,
   DateField,
   Filter,
+  FunctionField,
   List,
   NumberField,
-  ReferenceField,
   SearchInput,
   Show,
   SimpleShowLayout,
-  TextField,
-  FunctionField
+  TextField
 } from 'react-admin'
 import { useMediaQuery } from '@material-ui/core'
 import {
@@ -26,6 +25,7 @@ import { useDispatch } from 'react-redux'
 import { addTrack, setTrack } from '../audioplayer'
 import AddIcon from '@material-ui/icons/Add'
 import { SongBulkActions } from './SongBulkActions'
+import { AlbumLinkField } from './AlbumLinkField'
 
 const SongFilter = (props) => (
   <Filter {...props}>
@@ -82,16 +82,7 @@ const SongList = (props) => {
           rowClick={(id, basePath, record) => dispatch(setTrack(record))}
         >
           <TextField source="title" />
-          {isDesktop && (
-            <ReferenceField
-              label="Album"
-              source="albumId"
-              reference="album"
-              link="show"
-            >
-              <TextField source="name" />
-            </ReferenceField>
-          )}
+          {isDesktop && <AlbumLinkField source="albumId" sortBy="album" />}
           <TextField source="artist" />
           {isDesktop && <NumberField source="trackNumber" />}
           {isDesktop && <NumberField source="playCount" />}