Fiddling with thunk; More library endpoints

src/js/views/Album.js

@@ -15,40 +15,22 @@ class Album extends React.Component{
 
 	// on render
 	componentDidMount(){
-		this.props.spotifyActions.loadAlbum( this.props.params.uri );
+		this.props.spotifyActions.getAlbum( this.props.params.uri );
 	}
 
 	// when props changed
 	componentWillReceiveProps( nextProps ){
 		if( nextProps.params.uri != this.props.params.uri ){
-			this.props.spotifyActions.loadAlbum( nextProps.params.uri );
+			this.props.spotifyActions.getAlbum( nextProps.params.uri );
 		}
 	}
 
-	playTracks( tracks ){
-		var uris = [];
-		for( var i = 0; i < tracks.length; i++ ){
-			uris.push( tracks[i].uri )
-		}
-		this.props.mopidyActions.playTracks( uris )
-	}
-
-	playTrack( track ){		
-		var uris = [track.uri];
-		this.props.mopidyActions.playTracks( uris )
-	}
-
 	render(){
 		if( this.props.spotify.album ){
 			return (
 				<div>
 					<h3>{ this.props.spotify.album.name }</h3>
-					<TrackList
-						tracks={this.props.spotify.album.tracks.items} 
-						removeTracks={ null }
-						playTracks={ tracks => this.playTracks( tracks ) }
-						playTrack={ track => this.playTrack( track ) }
-						/>
+					<TrackList tracks={this.props.spotify.album.tracks.items} />
 				</div>
 			);
 		}

src/js/views/App.js

@@ -31,6 +31,8 @@ class App extends React.Component{
 	        	<ul role="nav">
 					<li><Link to="/queue">Now playing</Link></li>
 					<li><Link to="/library/artists">Library: My artists</Link></li>
+					<li><Link to="/library/albums">Library: My albums</Link></li>
+					<li><Link to="/library/playlists">Library: My playlists</Link></li>
 					<li><Link to="/settings">Settings</Link></li>
 		        </ul>
 		        {this.props.children}

src/js/views/Artist.js

@@ -16,13 +16,13 @@ class Artist extends React.Component{
 
 	// on render
 	componentDidMount(){
-		this.props.spotifyActions.loadArtist( this.props.params.uri );
+		this.props.spotifyActions.getArtist( this.props.params.uri );
 	}
 
 	// when props changed
 	componentWillReceiveProps( nextProps ){
 		if( nextProps.params.uri != this.props.params.uri ){
-			this.props.spotifyActions.loadArtist( nextProps.params.uri );
+			this.props.spotifyActions.getArtist( nextProps.params.uri );
 		}
 	}
 
@@ -32,7 +32,7 @@ class Artist extends React.Component{
 				<div>
 					<h3>{ this.props.spotify.artist.name }</h3>
 					<p>{ this.props.spotify.artist.followers.total.toLocaleString() } followers</p>
-					{ this.props.spotify.artist_top_tracks ? <TrackList tracks={ this.props.spotify.artist_top_tracks.tracks } /> : null }
+					{ this.props.spotify.artist.tracks ? <TrackList tracks={ this.props.spotify.artist.tracks } /> : null }
 					{ this.props.spotify.artist_albums ? <AlbumGrid items={ this.props.spotify.artist_albums } /> : null }
 				</div>
 			);

src/js/views/LibraryAlbums.js

@@ -0,0 +1,54 @@
+
+import React, { PropTypes } from 'react'
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+import { Link } from 'react-router'
+
+import AlbumGrid from '../components/AlbumGrid'
+
+import * as mopidyActions from '../services/mopidy/actions'
+import * as spotifyActions from '../services/spotify/actions'
+
+class LibraryAlbums extends React.Component{
+
+	constructor(props) {
+		super(props);
+	}
+
+	// on render
+	componentDidMount(){
+		this.props.spotifyActions.getLibraryAlbums();
+	}
+
+	render(){
+		if( this.props.spotify.libraryAlbums ){
+			return (
+				<div>
+					<h3>My albums</h3>
+					<AlbumGrid items={this.props.spotify.libraryAlbums} />
+				</div>
+			);
+		}
+		return null;
+	}
+}
+
+
+/**
+ * Export our component
+ *
+ * We also integrate our global store, using connect()
+ **/
+
+const mapStateToProps = (state, ownProps) => {
+	return state;
+}
+
+const mapDispatchToProps = (dispatch) => {
+	return {
+		mopidyActions: bindActionCreators(mopidyActions, dispatch),
+		spotifyActions: bindActionCreators(spotifyActions, dispatch)
+	}
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(LibraryAlbums)

src/js/views/LibraryArtists.js

@@ -15,7 +15,7 @@ class LibraryArtists extends React.Component{
 
 	// on render
 	componentDidMount(){
-		this.props.spotifyActions.loadLibraryArtists();
+		this.props.spotifyActions.getLibraryArtists();
 	}
 
 	render(){

src/js/views/LibraryTracks.js

@@ -0,0 +1,54 @@
+
+import React, { PropTypes } from 'react'
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+import { Link } from 'react-router'
+
+import TrackList from '../components/TrackList'
+
+import * as mopidyActions from '../services/mopidy/actions'
+import * as spotifyActions from '../services/spotify/actions'
+
+class LibraryTracks extends React.Component{
+
+	constructor(props) {
+		super(props);
+	}
+
+	// on render
+	componentDidMount(){
+		this.props.spotifyActions.getLibraryTracks();
+	}
+
+	render(){
+		if( this.props.spotify.libraryAlbums ){
+			return (
+				<div>
+					<h3>My tracks</h3>
+					<TrackList tracks={this.props.spotify.libraryTracks.tracks} />
+				</div>
+			);
+		}
+		return null;
+	}
+}
+
+
+/**
+ * Export our component
+ *
+ * We also integrate our global store, using connect()
+ **/
+
+const mapStateToProps = (state, ownProps) => {
+	return state;
+}
+
+const mapDispatchToProps = (dispatch) => {
+	return {
+		mopidyActions: bindActionCreators(mopidyActions, dispatch),
+		spotifyActions: bindActionCreators(spotifyActions, dispatch)
+	}
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(LibraryTracks)