Dropdown field; preliminary

src/js/components/Dater.js

@@ -87,8 +87,21 @@ export default class Dater extends React.Component{
 			case 'ago':
 				var date = new Date(this.props.data)
 				var diff = new Date() - date
-				// todo: calculate nice diff
-				return diff
+				
+				var seconds = Math.floor(diff / 1000)
+				var minutes = Math.floor(diff / (1000 * 60))
+				var hours = Math.floor(diff / (1000 * 60 * 60))
+				var days = Math.floor(diff / (1000 * 60 * 60 * 24))
+
+				if (seconds < 60){
+				    return seconds + " seconds";
+				}else if (minutes < 60){
+				    return minutes + " minutes";
+				}else if (hours < 24){
+				    return hours + " hours";
+				}else{
+				    return days + " days"
+				}
 				break
 
 			default:

src/js/components/DropdownField.js

@@ -0,0 +1,53 @@
+
+import React, { PropTypes } from 'react'
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+import FontAwesome from 'react-fontawesome'
+
+export default class DropdownField extends React.Component{
+
+	constructor(props) {
+		super(props);
+
+		this.state = {
+			expanded: false
+		}
+	}
+
+	handleChange(value){
+		this.setState({ expanded: !this.state.expanded })
+		return this.props.handleChange( value )
+	}
+
+	handleToggle(){
+		this.setState({ expanded: !this.state.expanded })
+	}
+
+	render(){
+		if( !this.props.options ) return null
+
+		var classname = 'dropdown-field'
+		if( this.state.expanded ) classname += ' expanded'
+
+		return (
+			<div className={classname}>
+				<div className="label" onClick={ () => this.handleToggle() }>
+					<FontAwesome name={this.props.icon} />
+					<span className="text">&nbsp; { this.props.name }</span>
+				</div>
+				<div className="options">
+					{
+						this.props.options.map( option => {
+							return (
+								<div className="option" key={ option.value } onClick={ e => this.handleChange(option.value) }>
+									{ option.value == this.props.value ? <FontAwesome name="check" /> : null }
+									{ option.label }
+								</div>
+							)
+						})
+					}
+				</div>
+			</div>
+		)
+	}
+}

src/js/services/spotify/reducer.js

@@ -119,7 +119,7 @@ export default function reducer(spotify = {}, action){
                 )
             }
             return Object.assign({}, spotify, { 
-                library_tracks: tracks, 
+                library_tracks: [...spotify.library_tracks, ...tracks], 
                 library_tracks_more: action.data.next 
             });
 

src/js/services/ui/actions.js

@@ -59,6 +59,13 @@ export function dragEnd(){
     return { type: 'DRAG_END' }
 }
 
+export function setView( view ){
+    return {
+        type: 'SET_VIEW',
+        view: view
+    }
+}
+
 export function reorderPlaylistTracks( uri, indexes, insert_before, snapshot_id = false ){
     var range = helpers.createRange( indexes );
     switch( helpers.uriSource( uri ) ){

src/js/services/ui/reducer.js

@@ -7,6 +7,14 @@ export default function reducer(ui = {}, action){
         case 'LAZY_LOADING':
             return Object.assign({}, ui, { lazy_loading: action.start });
 
+
+        /**
+         * View views
+         **/
+        case 'SET_VIEW':
+            return Object.assign({}, ui, action.view)
+
+
         /**
          * Context menu
          **/
@@ -286,6 +294,7 @@ export default function reducer(ui = {}, action){
             var playlist = Object.assign({}, ui.playlist, { following: action.is_following })
             return Object.assign({}, ui, { playlist: playlist, following_loading: false });
 
+
         /**
          * Library Playlists
          **/

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>
 		);
 	}

src/scss/app.scss

@@ -18,6 +18,7 @@
 @import 'components/lists';
 @import 'components/grid';
 @import 'components/header';
+@import 'components/dropdown-field';
 
 @import 'views/artist';
 @import 'views/user';

src/scss/components/_dropdown-field.scss

@@ -0,0 +1,51 @@
+
+.dropdown-field {
+	font-size: 14px;
+	font-weight: 600;
+	text-transform: uppercase;
+	position: relative;
+
+	.label {
+		padding: 18px 10px;		
+		cursor: pointer;
+	}
+
+	&.expanded {
+		.label {
+			background: $dark_grey;
+			color: #FFFFFF;
+		}
+		.options {
+			display: block;
+		}
+	}
+
+	.options {
+		color: #FFFFFF;
+		position: absolute;
+		top: 54px;
+		right: 0px;
+		z-index: 97;
+		background: $dark_grey;
+		display: none;
+
+		.option {
+			position: relative;
+			padding: 10px 16px 10px 34px;
+			border-top: 1px solid lighten($dark_grey, 10%);
+			cursor: pointer;
+
+			.fa {
+				position: absolute;
+				top: 13px;
+				left: 12px;
+				font-size: 12px;
+			}
+
+			&:hover {
+				background: lighten($dark_grey, 10%);
+			}
+		}
+	}
+}
+