From 7a2273441bd3c0264b504a94fd3e27c49e0d8de1 Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Mon, 1 Jan 2018 12:17:51 +1300
Subject: [PATCH] Album formatter; Artist albums sortable, fixes #240

---
 src/js/helpers.js                  | 14 +++++++++
 src/js/services/core/middleware.js |  1 +
 src/js/views/Album.js              |  2 +-
 src/js/views/Artist.js             | 50 +++++++++++++++++++++++++++---
 4 files changed, 61 insertions(+), 6 deletions(-)

diff --git a/src/js/helpers.js b/src/js/helpers.js
index 5621643c..8336854d 100755
--- a/src/js/helpers.js
+++ b/src/js/helpers.js
@@ -243,6 +243,20 @@ export let getTrackIcon = function(current_track = false, core = false){
 }
 
 
+/**
+ * Format our album objects into a universal format
+ *
+ * @param album obj
+ * @return album obj
+ **/
+export let formatAlbum = function(album){
+	if (album.release_date !== undefined){
+		album.date = album.release_date;
+	}
+	return album;
+}
+
+
 /**
  * Format tracks into our universal format
  *
diff --git a/src/js/services/core/middleware.js b/src/js/services/core/middleware.js
index edbd7c5d..adc5c777 100755
--- a/src/js/services/core/middleware.js
+++ b/src/js/services/core/middleware.js
@@ -423,6 +423,7 @@ const CoreMiddleware = (function(){
 
                 for (var i = 0; i < action.albums.length; i++){
                     var album = Object.assign({}, action.albums[i]);
+                    helpers.formatAlbum(album)
 
                     if (albums[album.uri]){
                         album = Object.assign({}, albums[album.uri], album);
diff --git a/src/js/views/Album.js b/src/js/views/Album.js
index 4b4a43f6..95459ee7 100755
--- a/src/js/views/Album.js
+++ b/src/js/views/Album.js
@@ -150,7 +150,7 @@ class Album extends React.Component{
 					<ul className="details">
 						{ !this.props.slim_mode ? <li className="has-tooltip"><FontAwesome name={helpers.sourceIcon(this.props.params.uri )} /><span className="tooltip">{helpers.uriSource(this.props.params.uri )} {this.props.album.album_type ? this.props.album.album_type : 'album'}</span></li> : null }
 						{ !this.props.slim_mode && artists.length > 0 ? <li><ArtistSentence artists={artists} /></li> : null }
-						{ this.props.album.release_date ? <li><Dater type="date" data={ this.props.album.release_date } /></li> : null }
+						{ this.props.album.date ? <li><Dater type="date" data={ this.props.album.date } /></li> : null }
 						<li>
 							{tracks ? <span>{tracks.length} tracks, <Dater type="total-time" data={tracks} /></span> : '0 tracks, 0 mins' }
 						</li>
diff --git a/src/js/views/Artist.js b/src/js/views/Artist.js
index 0cf0f851..3c0aed23 100755
--- a/src/js/views/Artist.js
+++ b/src/js/views/Artist.js
@@ -15,6 +15,7 @@ import ArtistGrid from '../components/ArtistGrid'
 import RelatedArtists from '../components/RelatedArtists'
 import FollowButton from '../components/FollowButton'
 import ContextMenuTrigger from '../components/ContextMenuTrigger'
+import DropdownField from '../components/DropdownField'
 
 import * as helpers from '../helpers'
 import * as uiActions from '../services/ui/actions'
@@ -93,6 +94,17 @@ class Artist extends React.Component{
 		return (this.props[library] && this.props[library].indexOf(this.props.params.uri) > -1)
 	}
 
+	setSort(value){
+		var reverse = false
+		if (this.props.sort == value ) reverse = !this.props.sort_reverse
+
+		var data = {
+			artist_albums_sort_reverse: reverse,
+			artist_albums_sort: value
+		}
+		this.props.uiActions.set(data)
+	}
+
 	renderSubViewMenu(){		
 		return (
 			<div className="sub-views">
@@ -112,7 +124,7 @@ class Artist extends React.Component{
 			)
 		}
 		
-		var scheme = helpers.uriSource(this.props.params.uri );
+		var scheme = helpers.uriSource(this.props.params.uri);
 
 		var related_artists = []
 		if (this.props.artist.related_artists_uris){
@@ -124,14 +136,15 @@ class Artist extends React.Component{
 			}
 		}
 
-		var albums = []
+		var albums = [];
 		if (this.props.artist.albums_uris){
 			for (var i = 0; i < this.props.artist.albums_uris.length; i++){
-				var uri = this.props.artist.albums_uris[i]
+				var uri = this.props.artist.albums_uris[i];
 				if (this.props.albums.hasOwnProperty(uri)){
-					albums.push(this.props.albums[uri])
+					albums.push(this.props.albums[uri]);
 				}
 			}
+			albums = helpers.sortItems(albums, this.props.sort, this.props.sort_reverse);
 		}
 
 		switch (this.props.params.sub_view){
@@ -179,6 +192,21 @@ class Artist extends React.Component{
 					}
 				}
 
+				var sort_options = [
+					{
+						value: 'name',
+						label: 'Name'
+					},
+					{
+						value: 'date',
+						label: 'Date'
+					},
+					{
+						value: 'tracks_total',
+						label: 'Tracks'
+					}
+				];
+
 				return (
 					<div className="body overview">
 						<div className={related_artists.length > 0 ? "col w70" : "col w100"}>
@@ -194,7 +222,17 @@ class Artist extends React.Component{
 
 						<div className="cf"></div>
 
-						<h4>Albums</h4>
+						<h4>
+							Albums
+							<DropdownField 
+								icon="sort" 
+								name="Sort" 
+								value={this.props.sort} 
+								options={sort_options} 
+								reverse={this.props.sort_reverse} 
+								handleChange={val => {this.setSort(val); this.props.uiActions.hideContextMenu() }} />
+						</h4>
+
 						<section className="grid-wrapper no-top-padding">
 							<AlbumGrid albums={albums} />
 							<LazyLoadListener loading={this.props.artist.albums_more} loadMore={() => this.loadMore()} />
@@ -288,6 +326,8 @@ const mapStateToProps = (state, ownProps) => {
 		spotify_library_artists: state.spotify.library_artists,
 		local_library_artists: state.mopidy.library_artists,
 		albums: (state.core.albums ? state.core.albums : []),
+		sort: (state.ui.artist_albums_sort ? state.ui.artist_albums_sort : 'name'),
+		sort_reverse: (state.ui.artist_albums_sort_reverse ? true : false),
 		spotify_authorized: state.spotify.authorization,
 		mopidy_connected: state.mopidy.connected
 	}