From ee6b8073e88765cddf579e831742647e92e5ae78 Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Tue, 24 Jan 2017 08:02:30 +1300
Subject: [PATCH] Sort dropdown to show current sort order

---
 src/js/components/DropdownField.js     | 16 +++++++++----
 src/js/views/library/LibraryArtists.js | 33 ++++++++++++++++----------
 2 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/src/js/components/DropdownField.js b/src/js/components/DropdownField.js
index 7b7349ff..f414c071 100755
--- a/src/js/components/DropdownField.js
+++ b/src/js/components/DropdownField.js
@@ -40,13 +40,19 @@ export default class DropdownField extends React.Component{
 	}
 
 	render(){
-		if( !this.props.options ) return null
+		if (!this.props.options) return null
 
 		var classname = 'dropdown-field'
-		if( this.state.expanded ) classname += ' expanded'
+		if (this.state.expanded) classname += ' expanded'
 
 		var current_value = this.props.options[0].value
-		if( this.props.value ) current_value = this.props.value
+		if (this.props.value) current_value = this.props.value
+
+		var icon = <FontAwesome name="check" />
+		if (typeof(this.props.reverse) !== 'undefined'){
+			if (this.props.reverse) icon = <FontAwesome className="reverse" name="caret-up" />
+			else icon = <FontAwesome className="reverse" name="caret-down" />
+		}
 
 		return (
 			<div className={classname} data-key={this.props.name.replace(' ','_').toLowerCase()}>
@@ -59,8 +65,8 @@ export default class DropdownField extends React.Component{
 						this.props.options.map( option => {
 							return (
 								<div className="option" key={ option.value } onClick={ e => this.handleChange(option.value) }>
-									{ option.value == current_value ? <FontAwesome name="check" /> : null }
-									{ option.label }
+									{option.value == current_value ? icon : null}
+									{option.label}
 								</div>
 							)
 						})
diff --git a/src/js/views/library/LibraryArtists.js b/src/js/views/library/LibraryArtists.js
index 369ae6f9..748c23dc 100755
--- a/src/js/views/library/LibraryArtists.js
+++ b/src/js/views/library/LibraryArtists.js
@@ -45,14 +45,19 @@ class LibraryArtists extends React.Component{
 		if( this.props.view == 'list' ){
 			var columns = [
 				{
-					width: 60,
 					label: 'Name',
+					width: 70,
 					name: 'name'
 				},
 				{
-					width: 10,
 					label: 'Followers',
+					width: 15,
 					name: 'followers.total'
+				},
+				{
+					label: 'Popularity',
+					width: 15,
+					name: 'popularity'
 				}
 			]
 			return (
@@ -87,30 +92,34 @@ class LibraryArtists extends React.Component{
 
 		var view_options = [
 			{
-				value: 'thumbnails',
-				label: 'Thumbnails'
+				label: 'Thumbnails',
+				value: 'thumbnails'
 			},
 			{
-				value: 'list',
-				label: 'List'
+				label: 'List',
+				value: 'list'
 			}
 		]
 
 		var sort_options = [
 			{
-				value: 'name',
-				label: 'Name'
+				label: 'Name',
+				value: 'name'
 			},
 			{
-				value: 'followers.total',
-				label: 'Followers'
+				label: 'Followers',
+				value: 'followers.total'
+			},
+			{
+				label: 'Popularity',
+				value: 'popularity'
 			}
 		]
 
 		var actions = (
 			<span>
-				<DropdownField icon="sort" name="Sort" value={ this.props.sort } options={ sort_options } handleChange={ value => this.setSort(value) } />
-				<DropdownField icon="eye" name="View" value={ this.props.view } options={ view_options } handleChange={ value => this.props.uiActions.set({ library_artists_view: value }) } />
+				<DropdownField icon="sort" name="Sort" value={ this.props.sort } options={sort_options} reverse={this.props.sort_reverse} handleChange={ value => this.setSort(value) } />
+				<DropdownField icon="eye" name="View" value={ this.props.view } options={view_options} handleChange={ value => this.props.uiActions.set({ library_artists_view: value }) } />
 			</span>
 		)