Partial sorting

src/js/helpers.js

@@ -243,4 +243,38 @@ export let createRange = function (indexes){
     	start: first_bunch[0],
     	length: first_bunch.length
     }
+}
+
+
+
+/**
+ * Sort an array of objects
+ * @param array = array to sort
+ * @param property = string to sort by
+ * @param reverse = boolean
+ * @return array
+ **/
+export let sortItems = function (array, property, reverse = false){
+	function compare(a,b) {
+
+		switch( typeof(a[property]) ){
+
+			case 'boolean':
+				return a[property]
+				break
+
+			default:
+
+				// both objects must have this property
+				if( typeof(a[property]) === 'undefined' || typeof(b[property]) === 'undefined' ) return 0
+
+				if(a[property] > b[property]) return 1
+				if(a[property] < b[property]) return -1
+				return 0
+		}
+	}
+
+	var sorted = array.sort(compare)
+	if( reverse ) sorted.reverse()
+	return sorted
 }

src/js/services/localstorage/middleware.js

@@ -12,7 +12,7 @@ const localstorageMiddleware = (function(){
 
         // append our state to a global variable. This gives us access to debug the store at any point
         window._store = store
-        console.log(action)
+        //console.log(action)
 
         switch( action.type ){
 
@@ -116,10 +116,10 @@ const localstorageMiddleware = (function(){
                 localStorage.setItem('spotify', JSON.stringify(spotify));
                 break;
 
-            case 'SET_VIEW':
+            case 'UI_SET':
                 var ui = JSON.parse( localStorage.getItem('ui') );
                 if( !ui ) ui = {};
-                Object.assign( ui, action.view );
+                Object.assign( ui, action.data );
                 localStorage.setItem('ui', JSON.stringify(ui));
                 break;
         }

src/js/services/ui/actions.js

@@ -72,10 +72,10 @@ export function dragEnd(){
     return { type: 'DRAG_END' }
 }
 
-export function setView( view ){
+export function set( data ){
     return {
-        type: 'SET_VIEW',
-        view: view
+        type: 'UI_SET',
+        data: data
     }
 }
 

src/js/services/ui/reducer.js

@@ -10,13 +10,8 @@ export default function reducer(ui = {}, action){
         case 'DEBUG':
             return Object.assign({}, ui, { debug_response: action.response })
 
-
-        /**
-         * UI views and view modes
-         **/
-
-        case 'SET_VIEW':
-            return Object.assign({}, ui, action.view)
+        case 'UI_SET':
+            return Object.assign({}, ui, action.data)
 
         case 'TOGGLE_SIDEBAR':
             var new_state = !ui.sidebar_open

src/js/views/library/LibraryAlbums.js

@@ -109,7 +109,7 @@ class LibraryAlbums extends React.Component{
 		]
 
 		var actions = (
-			<DropdownField icon="eye" name="View" value={ this.props.view } options={ view_options } handleChange={ value => this.props.uiActions.setView({ library_albums_view: value }) } />
+			<DropdownField icon="eye" name="View" value={ this.props.view } options={ view_options } handleChange={ value => this.props.uiActions.set({ library_albums_view: value }) } />
 		)
 
 		return (

src/js/views/library/LibraryArtists.js

@@ -74,7 +74,7 @@ class LibraryArtists extends React.Component{
 		]
 
 		var actions = (
-			<DropdownField icon="eye" name="View" value={ this.props.view } options={ view_options } handleChange={ value => this.props.uiActions.setView({ library_artists_view: value }) } />
+			<DropdownField icon="eye" name="View" value={ this.props.view } options={ view_options } handleChange={ value => this.props.uiActions.set({ library_artists_view: value }) } />
 		)
 
 		return (

src/js/views/library/LibraryPlaylists.js

@@ -10,6 +10,7 @@ import List from '../../components/List'
 import DropdownField from '../../components/DropdownField'
 import Header from '../../components/Header'
 
+import * as helpers from '../../helpers'
 import * as uiActions from '../../services/ui/actions'
 import * as mopidyActions from '../../services/mopidy/actions'
 import * as spotifyActions from '../../services/spotify/actions'
@@ -23,6 +24,11 @@ class LibraryPlaylists extends React.Component{
 	renderView(){
 		if( !this.props.playlists ) return null
 
+		var playlists = this.props.playlists
+		if( this.props.sort ){
+			playlists = helpers.sortItems(playlists, this.props.sort)
+		}
+
 		if( this.props.view == 'list' ){
 			var columns = [
 				{
@@ -48,7 +54,7 @@ class LibraryPlaylists extends React.Component{
 			]
 			return (
 				<section className="list-wrapper">
-					<List rows={this.props.playlists} columns={columns} link_prefix="/playlist/" show_source_icon={true} />
+					<List rows={playlists} columns={columns} link_prefix="/playlist/" show_source_icon={true} />
 				</section>
 			)
 		}else{
@@ -73,9 +79,25 @@ class LibraryPlaylists extends React.Component{
 			}
 		]
 
+		var sort_options = [
+			{
+				value: 'name',
+				label: 'Name'
+			},
+			{
+				value: 'can_edit',
+				label: 'Editable'
+			},
+			{
+				value: 'tracks.total',
+				label: 'Tracks'
+			}
+		]
+
 		var actions = (
 			<div>
-				<DropdownField icon="eye" name="View" value={ this.props.view } options={ view_options } handleChange={ value => this.props.uiActions.setView({ library_playlists_view: value }) } />
+				<DropdownField icon="sort" name="Sort" value={ this.props.sort } options={ sort_options } handleChange={ value => this.props.uiActions.set({ library_playlists_sort: value }) } />
+				<DropdownField icon="eye" name="View" value={ this.props.view } options={ view_options } handleChange={ value => this.props.uiActions.set({ library_playlists_view: value }) } />
 				<button onClick={ () => this.props.uiActions.openModal('create_playlist', {} ) }>
 					<FontAwesome name="plus" />&nbsp;
 					New
@@ -102,6 +124,7 @@ class LibraryPlaylists extends React.Component{
 const mapStateToProps = (state, ownProps) => {
 	return {
 		view: state.ui.library_playlists_view,
+		sort: state.ui.library_playlists_sort,
 		playlists: state.ui.playlists
 	}
 }