Dropdown field; preliminary

src/js/views/library/LibraryArtists.js

@@ -7,7 +7,10 @@ import { Link } from 'react-router'
 import LazyLoadListener from '../../components/LazyLoadListener'
 import Header from '../../components/Header'
 import ArtistGrid from '../../components/ArtistGrid'
+import List from '../../components/List'
+import DropdownField from '../../components/DropdownField'
 
+import * as uiActions from '../../services/ui/actions'
 import * as mopidyActions from '../../services/mopidy/actions'
 import * as spotifyActions from '../../services/spotify/actions'
 
@@ -27,13 +30,55 @@ class LibraryArtists extends React.Component{
 		this.props.spotifyActions.getURL( this.props.artists_more, 'SPOTIFY_LIBRARY_ARTISTS_LOADED_MORE' );
 	}
 
+	renderView(){
+		if( !this.props.artists ) return null
+
+		if( this.props.view == 'list' ){
+			var columns = [
+				{
+					width: 30,
+					name: 'name'
+				},
+				{
+					width: 10,
+					name: 'followers.total'
+				}
+			]
+			return (
+				<section className="list-wrapper">
+					<List rows={this.props.artists} columns={columns} link_prefix="/artist/" />
+				</section>
+			)
+		}else{
+			return (
+				<section className="grid-wrapper">
+					<ArtistGrid artists={this.props.artists} />
+				</section>				
+			)
+		}
+	}
+
 	render(){
+
+		var view_options = [
+			{
+				value: 'thumbnails',
+				label: 'Thumbnails'
+			},
+			{
+				value: 'list',
+				label: 'List'
+			}
+		]
+
+		var actions = (
+			<DropdownField icon="eye" name="View" value={ this.props.view } options={ view_options } handleChange={ value => this.props.uiActions.setView({ library_artists_view: value }) } />
+		)
+
 		return (
 			<div className="view library-artists-view">
-				<Header icon="mic" title="My artists" />
-				<section className="grid-wrapper">
-					{ this.props.artists ? <ArtistGrid artists={this.props.artists} /> : null }
-				</section>
+				<Header icon="mic" title="My artists" actions={actions} />				
+				{ this.renderView() }
 				<LazyLoadListener loadMore={ () => this.loadMore() }/>
 			</div>
 		);
@@ -49,6 +94,7 @@ class LibraryArtists extends React.Component{
 
 const mapStateToProps = (state, ownProps) => {
 	return {
+		view: state.ui.library_artists_view,
 		artists: state.spotify.library_artists,
 		artists_more: state.spotify.library_artists_more
 	}
@@ -56,6 +102,7 @@ const mapStateToProps = (state, ownProps) => {
 
 const mapDispatchToProps = (dispatch) => {
 	return {
+		uiActions: bindActionCreators(uiActions, dispatch),
 		mopidyActions: bindActionCreators(mopidyActions, dispatch),
 		spotifyActions: bindActionCreators(spotifyActions, dispatch)
 	}

src/js/views/library/LibraryTracks.js

@@ -33,8 +33,8 @@ class LibraryTracks extends React.Component{
 				<Header icon="music" title="My tracks" />
 				<section className="list-wrapper">
 					{ this.props.tracks ? <TrackList tracks={this.props.tracks} /> : null }
+					<LazyLoadListener loadMore={ () => this.loadMore() }/>
 				</section>
-				<LazyLoadListener loadMore={ () => this.loadMore() }/>
 			</div>
 		);
 	}