Mergingcurrent_track and current_tracklist; Smarter reducers for UI

src/js/views/Album.js

@@ -14,7 +14,6 @@ import Dater from '../components/Dater'
 import LazyLoadListener from '../components/LazyLoadListener'
 
 import * as mopidyActions from '../services/mopidy/actions'
-import * as lastfmActions from '../services/lastfm/actions'
 import * as spotifyActions from '../services/spotify/actions'
 
 class Album extends React.Component{
@@ -28,9 +27,14 @@ class Album extends React.Component{
 	}
 
 	componentWillReceiveProps( nextProps ){
+		console.log('componentWillReceiveProps')
+
+		// if our URI has changed, fetch new album
 		if( nextProps.params.uri != this.props.params.uri ){
 			this.loadAlbum( nextProps )
-		}else if( !this.props.mopidy.connected && nextProps.mopidy.connected ){
+
+		// if mopidy has just connected AND we're a local album, go get
+		}else if( !this.props.mopidy_connected && nextProps.mopidy_connected ){
 			if( helpers.uriSource( this.props.params.uri ) == 'local' ){
 				this.loadAlbum( nextProps )
 			}
@@ -38,70 +42,51 @@ class Album extends React.Component{
 	}
 
 	loadAlbum( props = this.props ){
-		var source = helpers.uriSource( props.params.uri );
+		switch( helpers.uriSource( props.params.uri ) ){
 
-		if( source == 'spotify' ){
-			this.props.spotifyActions.getAlbum( props.params.uri );
+			case 'spotify':
+				this.props.spotifyActions.getAlbum( props.params.uri );
+				break;
 
-		}else if( source == 'local' && props.mopidy.connected ){
-			this.props.mopidyActions.getAlbum( props.params.uri );
+			case 'local':
+				if( props.mopidy_connected ) this.props.mopidyActions.getAlbum( props.params.uri );
+				break;
 		}
 	}
 
 	loadMore(){
-		if( !this.props.spotify.album || !this.props.spotify.album.tracks.next ) return
-		this.props.spotifyActions.getURL( this.props.spotify.album.tracks.next, 'SPOTIFY_ALBUM_LOADED_MORE' );
+		if( !this.props.album.tracks.next ) return
+		this.props.spotifyActions.getURL( this.props.album.tracks.next, 'SPOTIFY_ALBUM_LOADED_MORE' );
 	}
 
-	album(){
-		var album = {
-			name: false,
-			tracks: {
-				items: []
-			},
-			artists: [],
-			images: []
-		}
-		
-		switch( helpers.uriSource( this.props.params.uri ) ){
-
-			case 'spotify':
-				Object.assign(album, this.props.spotify.album)
-				album.artists = this.props.spotify.artists
-				break
-
-			case 'local':
-				Object.assign(album, this.props.mopidy.album)
-				if( this.props.lastfm.album.image ) album.images = this.props.lastfm.album.image
-				break
-		}
-
-		return album
+	renderThumbnail(){
+		if( !this.props.album.images ) return <Thumbnail size="large" images={[]} />
+		return <Thumbnail size="large" images={ this.props.album.images } />
 	}
 
 	render(){
-		var album = this.album()
+		if( !this.props.album ) return null
 
 		return (
 			<div className="view album-view">
 				<div className="intro">
-					<Thumbnail size="large" images={ album.images } />
-					<ArtistGrid artists={ album.artists } />
+					{ this.renderThumbnail() }
+					<ArtistGrid artists={ this.props.album.artists } />
 					<ul className="details">
-						<li>{ album.tracks.total } tracks, <Dater type="total-time" data={album.tracks.items} /></li>
-						{ album.release_date ? <li>Released <Dater type="date" data={ album.release_date } /></li> : null }
+						<li>{ this.props.album.tracks.total } tracks, <Dater type="total-time" data={this.props.album.tracks.items} /></li>
+						{ this.props.album.release_date ? <li>Released <Dater type="date" data={ this.props.album.release_date } /></li> : null }
 						<li><FontAwesome name={helpers.sourceIcon( this.props.params.uri )} /> {helpers.uriSource( this.props.params.uri )} playlist</li>	
 					</ul>
 				</div>
 				<div className="main">
 
 					<div className="title">
-						<h1>{ album.name }</h1>
-						<h3><ArtistSentence artists={ album.artists } /></h3>
+						<h1>{ this.props.album.name }</h1>
+						<h3><ArtistSentence artists={ this.props.album.artists } /></h3>
 					</div>
 
 					<section className="list-wrapper">
-						<TrackList tracks={ album.tracks.items } />
+						<TrackList tracks={ this.props.album.tracks.items } />
 						<LazyLoadListener loadMore={ () => this.loadMore() }/>
 					</section>
 					
@@ -119,13 +104,15 @@ class Album extends React.Component{
  **/
 
 const mapStateToProps = (state, ownProps) => {
-	return state;
+	return {
+		album: state.ui.album,
+		mopidy_connected: state.mopidy.connected
+	};
 }
 
 const mapDispatchToProps = (dispatch) => {
 	return {
 		mopidyActions: bindActionCreators(mopidyActions, dispatch),
-		lastfmActions: bindActionCreators(lastfmActions, dispatch),
 		spotifyActions: bindActionCreators(spotifyActions, dispatch)
 	}
 }

src/js/views/App.js

@@ -62,7 +62,7 @@ class App extends React.Component{
 
 		switch(e.keyCode){			
 			case 32: // spacebar
-				if( this.props.mopidy.state == 'playing' ){
+				if( this.props.play_state == 'playing' ){
 					this.props.mopidyActions.pause();
 				}else{
 					this.props.mopidyActions.play();
@@ -78,8 +78,7 @@ class App extends React.Component{
 		        <main>
 		      		{this.props.children}
 		        </main>
-		        { this.props.ui.context_menu.test }
-		        <ContextMenu state={this.props.ui.context_menu} />
+		        <ContextMenu state={this.props.context_menu} />
 	        </div>
 		);
 	}
@@ -92,7 +91,10 @@ class App extends React.Component{
  **/
 
 const mapStateToProps = (state, ownProps) => {
-	return state;
+	return {
+		play_state: state.mopidy.play_state,
+		context_menu: state.ui.context_menu
+	}
 }
 
 const mapDispatchToProps = (dispatch) => {

src/js/views/Queue.js

@@ -21,22 +21,6 @@ class Queue extends React.Component{
 		super(props);
 	}
 
-	renderTrackList(){
-		if( this.props.mopidy && this.props.mopidy.tracks ){
-			return (
-				<TrackList
-					show_source_icon={true}
-					context="queue"
-					tracks={this.props.mopidy.tracks} 
-					removeTracks={ tracks => this.removeTracks( tracks ) }
-					playTracks={ tracks => this.playTracks( tracks ) }
-					playTrack={ track => this.playTrack( track ) }
-					/>
-			);
-		}
-		return null;
-	}
-
 	removeTracks( tracks ){
 		var tlids = [];
 		for( var i = 0; i < tracks.length; i++ ){
@@ -60,7 +44,13 @@ class Queue extends React.Component{
 				<FullPlayer />
 
 				<section className="list-wrapper">
-					{ this.renderTrackList() }
+					<TrackList
+						show_source_icon={true}
+						context="queue"
+						tracks={this.props.current_tracklist} 
+						removeTracks={ tracks => this.removeTracks( tracks ) }
+						playTracks={ tracks => this.playTracks( tracks ) }
+						playTrack={ track => this.playTrack( track ) } />
 				</section>
 				
 			</div>
@@ -76,7 +66,9 @@ class Queue extends React.Component{
  **/
 
 const mapStateToProps = (state, ownProps) => {
-	return state;
+	return {
+		current_tracklist: state.ui.current_tracklist
+	}
 }
 
 const mapDispatchToProps = (dispatch) => {