Weening out old full props; Dropzone add to playlist

src/js/components/AlbumLink.js

@@ -1,21 +0,0 @@
-
-import React, { PropTypes } from 'react'
-import FontAwesome from 'react-fontawesome'
-import { Link } from 'react-router'
-
-export default class AlbumLink extends React.Component{
-
-	constructor(props) {
-		super(props);
-	}
-
-	render(){
-		if( !this.props.album ) return <span>-</span>
-		if( !this.props.album.uri ) return <span>{ this.props.album.name }</span>
-
-		var link = '/album/' + this.props.album.uri;
-		return (
-			<Link to={link} className="album-link">{ this.props.album.name }</Link>
-		);
-	}
-}

src/js/components/ContextMenu.js

@@ -89,11 +89,6 @@ class ContextMenu extends React.Component{
 		this.props.uiActions.hideContextMenu();
 	}
 
-	addToPlaylist(){
-		this.props.uiActions.openModal( 'AddToPlaylistModal', { track_indexes: this.props.context_menu.data.selected_tracks_indexes })
-		this.props.uiActions.hideContextMenu();
-	}
-
 	removeFromPlaylist(){
 		this.props.uiActions.removeTracksFromPlaylist( this.props.playlist.uri, this.props.context_menu.data.selected_tracks_indexes )
 		this.props.uiActions.hideContextMenu();

src/js/components/Dropzones.js

@@ -49,11 +49,13 @@ class Dropzones extends React.Component{
 		}
 
 		switch( target.action ){
-
 			case 'enqueue':
 				this.props.mopidyActions.enqueueTracks( uris )
 				break
 
+			case 'add_to_playlist':
+				this.props.uiActions.openModal( 'add_to_playlist', { tracks_uris: uris } )
+				break
 		}
 	}
 

src/js/components/Modal/AddToPlaylistModal.js

@@ -3,14 +3,14 @@ import React, { PropTypes } from 'react'
 import Icon from '../Icon'
 import * as helpers from '../../helpers'
 
-class AddToPlaylistModal extends React.Component{
+export default class AddToPlaylistModal extends React.Component{
 
 	constructor(props){
 		super(props)
 	}
 
 	playlistSelected( playlist_uri ){
-		this.props.uiActions.addTracksToPlaylist( playlist_uri, this.props.data.track_indexes )
+		this.props.uiActions.addTracksToPlaylist( playlist_uri, this.props.tracks_uris )
 		this.props.uiActions.closeModal()
 	}
 

src/js/components/Modal/Modal.js

@@ -29,7 +29,7 @@ class Modal extends React.Component{
 				</div>
 				<div className="content">
 
-					{ this.props.modal.name == 'add_to_playlist' ? <AddToPlaylistModal uiActions={this.props.uiActions} context_menu={this.props.context_menu.data} /> : null }
+					{ this.props.modal.name == 'add_to_playlist' ? <AddToPlaylistModal uiActions={this.props.uiActions} playlists={this.props.playlists} tracks_uris={this.props.modal.data.tracks_uris} /> : null }
 					{ this.props.modal.name == 'create_playlist' ? <CreatePlaylistModal uiActions={this.props.uiActions} /> : null }
 					{ this.props.modal.name == 'edit_playlist' ? <EditPlaylistModal uiActions={this.props.uiActions} data={this.props.modal.data} /> : null }
 

src/js/components/Track.js

@@ -1,10 +1,11 @@
 
 import React, { PropTypes } from 'react'
+import { Link } from 'react-router'
 import FontAwesome from 'react-fontawesome'
 import ArtistSentence from './ArtistSentence'
-import AlbumLink from './AlbumLink'
 import Dater from './Dater'
-var helpers = require('../helpers.js')
+
+import * as helpers from '../helpers'
 
 export default class Track extends React.Component{
 
@@ -55,7 +56,7 @@ export default class Track extends React.Component{
 						{ track.artists ? <ArtistSentence artists={track.artists} /> : '-' }
 					</span>
 					<span className="col album">
-						{ track.album ? <AlbumLink album={track.album} /> : '-' }
+						{ track.album ? <Link to={'/album/'+track.album.uri}>{track.album.name}</Link> : '-' }
 					</span>
 					<span className="col duration">
 						{ track.duration_ms ? <Dater type="length" data={track.duration_ms} /> : null }

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 ){
 

src/js/services/ui/actions.js

@@ -144,13 +144,7 @@ export function removeTracksFromPlaylist( playlist_uri, tracks_indexes ){
     }
 }
 
-export function addTracksToPlaylist( playlist_uri, tracks ){
-
-    var tracks_uris = []
-    for( var i = 0; i < tracks.length; i++ ){
-        tracks_uris.push( tracks[i].uri )
-    }
-
+export function addTracksToPlaylist( playlist_uri, tracks_uris ){
     switch( helpers.uriSource( playlist_uri ) ){
 
         case 'spotify':

src/js/views/Album.js

@@ -3,7 +3,6 @@ import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 import FontAwesome from 'react-fontawesome'
-let helpers = require('../helpers.js')
 
 import TrackList from '../components/TrackList'
 import Thumbnail from '../components/Thumbnail'
@@ -14,6 +13,7 @@ import FollowButton from '../components/FollowButton'
 import Dater from '../components/Dater'
 import LazyLoadListener from '../components/LazyLoadListener'
 
+import * as helpers from '../helpers'
 import * as mopidyActions from '../services/mopidy/actions'
 import * as spotifyActions from '../services/spotify/actions'
 
@@ -75,7 +75,7 @@ class Album extends React.Component{
 
 					<div className="actions">
 						<button className="large primary" onClick={ e => this.play() }>Play</button>
-						<FollowButton uri={this.props.params.uri} addText="Add to library" removeText="Remove from library" />
+						{ helpers.uriSource(this.props.params.uri) == 'spotify' ? <FollowButton uri={this.props.params.uri} addText="Add to library" removeText="Remove from library" /> : null }
 					</div>
 
 					<ul className="details">

src/js/views/Artist.js

@@ -72,7 +72,7 @@ class Artist extends React.Component{
 
 					<div className="actions">
 						<button className="large primary" onClick={ e => this.play() }>Start radio</button>
-						<FollowButton uri={this.props.params.uri} removeText="Unfollow" addText="Follow" />
+						{ helpers.uriSource(this.props.params.uri) == 'spotify' ? <FollowButton uri={this.props.params.uri} removeText="Unfollow" addText="Follow" /> : null }						
 					</div>
 
 					<ul className="details">

src/js/views/Queue.js

@@ -8,7 +8,6 @@ import TrackList from '../components/TrackList'
 import Track from '../components/Track'
 import FullPlayer from '../components/FullPlayer'
 import ArtistSentence from '../components/ArtistSentence'
-import AlbumLink from '../components/AlbumLink'
 import Header from '../components/Header'
 
 import * as uiActions from '../services/ui/actions'

src/js/views/discover/Discover.js

@@ -5,6 +5,7 @@ import { bindActionCreators } from 'redux'
 
 import Header from '../../components/Header'
 
+import * as helpers from '../../helpers'
 import * as spotifyActions from '../../services/spotify/actions'
 
 class Discover extends React.Component{
@@ -13,28 +14,13 @@ class Discover extends React.Component{
 		super(props);
 	}
 
-	// on render
-	componentDidMount(){
-		this.props.spotifyActions.getPlaylist( this.props.params.uri );
-	}
-
-	// when props changed
-	componentWillReceiveProps( nextProps ){
-		if( nextProps.params.uri != this.props.params.uri ){
-			this.props.spotifyActions.getPlaylist( nextProps.params.uri );
-		}
-	}
-
 	render(){
-		if( this.props.spotify.playlist ){
-			return (
-				<div className="view discover-view">
-					<Header icon="compass" title="Discover" />
-					<h1>To come</h1>
-				</div>
-			);
-		}
-		return null;
+		return (
+			<div className="view discover-view">
+				<Header icon="compass" title="Discover" />
+				<h1>To come</h1>
+			</div>
+		)
 	}
 }
 
@@ -46,7 +32,9 @@ class Discover extends React.Component{
  **/
 
 const mapStateToProps = (state, ownProps) => {
-	return state;
+	return {
+
+	}
 }
 
 const mapDispatchToProps = (dispatch) => {

src/js/views/library/LibraryAlbums.js

@@ -22,8 +22,8 @@ class LibraryAlbums extends React.Component{
 	}
 
 	loadMore(){
-		if( !this.props.spotify.library_albums_more ) return
-		this.props.spotifyActions.getURL( this.props.spotify.library_albums_more, 'SPOTIFY_LIBRARY_ALBUMS_LOADED_MORE' );
+		if( !this.props.albums_more ) return
+		this.props.spotifyActions.getURL( this.props.albums_more, 'SPOTIFY_LIBRARY_ALBUMS_LOADED_MORE' );
 	}
 
 	render(){
@@ -34,7 +34,7 @@ class LibraryAlbums extends React.Component{
 					title="My albums"
 					/>
 				<section className="grid-wrapper">
-					{ this.props.spotify.library_albums ? <AlbumGrid albums={this.props.spotify.library_albums} /> : null }
+					{ this.props.albums ? <AlbumGrid albums={this.props.albums} /> : null }
 				</section>
 				<LazyLoadListener loadMore={ () => this.loadMore() }/>
 			</div>
@@ -50,7 +50,10 @@ class LibraryAlbums extends React.Component{
  **/
 
 const mapStateToProps = (state, ownProps) => {
-	return state;
+	return {
+		albums: state.spotify.library_albums,
+		albums_more: state.spotify.library_albums_more,
+	}
 }
 
 const mapDispatchToProps = (dispatch) => {

src/js/views/library/LibraryArtists.js

@@ -23,8 +23,8 @@ class LibraryArtists extends React.Component{
 	}
 
 	loadMore(){
-		if( !this.props.spotify.library_artists_more ) return
-		this.props.spotifyActions.getURL( this.props.spotify.library_artists_more, 'SPOTIFY_LIBRARY_ARTISTS_LOADED_MORE' );
+		if( !this.props.artists_more ) return
+		this.props.spotifyActions.getURL( this.props.artists_more, 'SPOTIFY_LIBRARY_ARTISTS_LOADED_MORE' );
 	}
 
 	render(){
@@ -32,7 +32,7 @@ class LibraryArtists extends React.Component{
 			<div className="view library-artists-view">
 				<Header icon="mic" title="My artists" />
 				<section className="grid-wrapper">
-					{ this.props.spotify.library_artists ? <ArtistGrid artists={this.props.spotify.library_artists} /> : null }
+					{ this.props.artists ? <ArtistGrid artists={this.props.artists} /> : null }
 				</section>
 				<LazyLoadListener loadMore={ () => this.loadMore() }/>
 			</div>
@@ -48,7 +48,10 @@ class LibraryArtists extends React.Component{
  **/
 
 const mapStateToProps = (state, ownProps) => {
-	return state;
+	return {
+		artists: state.spotify.library_artists,
+		artists_more: state.spotify.library_artists_more
+	}
 }
 
 const mapDispatchToProps = (dispatch) => {

src/js/views/library/LibraryLocalAlbums.js

@@ -21,25 +21,25 @@ class LibraryLocalAlbums extends React.Component{
 	}
 
 	componentWillReceiveProps( nextProps ){
-		if( !this.props.mopidy.connected && nextProps.mopidy.connected ){
+		if( !this.props.mopidy_connected && nextProps.mopidy_connected ){
 			this.loadAlbums(nextProps);
 		}
 	}
 
 	loadAlbums(props = this.props){
-		if( props.mopidy.connected ){
+		if( props.mopidy_connected ){
 			this.props.mopidyActions.getAlbums();
 		}
 	}
 
 	render(){
-		if( !this.props.mopidy.albums ) return null
+		if( !this.props.albums ) return null
 
 		return (
 			<div className="view library-local-view">
 				<Header icon="music" title="Local albums" />
 				<div>
-					<List columns={[{ name: 'name', width: '100'}]} rows={this.props.mopidy.albums} link_prefix="/album/" />
+					<List columns={[{ name: 'name', width: '100'}]} rows={this.props.albums} link_prefix="/album/" />
 				</div>
 			</div>
 		);
@@ -54,7 +54,10 @@ class LibraryLocalAlbums extends React.Component{
  **/
 
 const mapStateToProps = (state, ownProps) => {
-	return state;
+	return {
+		mopidy_connected: state.mopidy.connected,
+		albums: state.mopidy.albums
+	}
 }
 
 const mapDispatchToProps = (dispatch) => {

src/js/views/library/LibraryLocalArtists.js

@@ -21,25 +21,25 @@ class LibraryLocalArtists extends React.Component{
 	}
 
 	componentWillReceiveProps( nextProps ){
-		if( !this.props.mopidy.connected && nextProps.mopidy.connected ){
+		if( !this.props.mopidy_connected && nextProps.mopidy_connected ){
 			this.loadArtists(nextProps);
 		}
 	}
 
 	loadArtists(props = this.props){
-		if( props.mopidy.connected ){
+		if( props.mopidy_connected ){
 			this.props.mopidyActions.getArtists();
 		}
 	}
 
 	render(){
-		if( !this.props.mopidy.artists ) return null
+		if( !this.props.artists ) return null
 
 		return (
 			<div className="view library-local-view">
 				<Header icon="music" title="Local artists" />
 				<section className="list-wrapper">
-					<List columns={[{ name: 'name', width: '100'}]} rows={this.props.mopidy.artists} link_prefix="/artist/" />
+					<List columns={[{ name: 'name', width: '100'}]} rows={this.props.artists} link_prefix="/artist/" />
 				</section>
 			</div>
 		);
@@ -54,7 +54,10 @@ class LibraryLocalArtists extends React.Component{
  **/
 
 const mapStateToProps = (state, ownProps) => {
-	return state;
+	return {
+		mopidy_connected: state.mopidy.connected,
+		artists: state.mopidy.artists
+	}
 }
 
 const mapDispatchToProps = (dispatch) => {

src/js/views/library/LibraryLocalDirectory.js

@@ -24,7 +24,7 @@ class LibraryLocalDirectory extends React.Component{
 	componentWillReceiveProps( nextProps ){
 
 		// mopidy goes online
-		if( !this.props.mopidy.connected && nextProps.mopidy.connected ){
+		if( !this.props.mopidy_connected && nextProps.mopidy_connected ){
 			this.loadDirectory( nextProps );
 		}
 
@@ -35,19 +35,19 @@ class LibraryLocalDirectory extends React.Component{
 	}
 
 	loadDirectory( props = this.props ){
-		if( props.mopidy.connected ){
+		if( props.mopidy_connected ){
 			this.props.mopidyActions.getDirectory( props.params.uri );
 		}
 	}
 
 	render(){
-		if( !this.props.mopidy.directory ) return null
+		if( !this.props.directory ) return null
 
 		return (
 			<div className="view library-local-view">
 				<Header icon="music" title="Local files" />
 				<section className="list-wrapper">
-					<List columns={[{ name: 'name', width: '100'}]} rows={this.props.mopidy.directory} link_prefix="/library/local/directory/" />
+					<List columns={[{ name: 'name', width: '100'}]} rows={this.props.directory} link_prefix="/library/local/directory/" />
 				</section>
 			</div>
 		);
@@ -62,7 +62,10 @@ class LibraryLocalDirectory extends React.Component{
  **/
 
 const mapStateToProps = (state, ownProps) => {
-	return state;
+	return {
+		mopidy_connected: state.mopidy.connected,
+		directory: state.mopidy.directory
+	}
 }
 
 const mapDispatchToProps = (dispatch) => {

src/js/views/library/LibraryTracks.js

@@ -23,8 +23,8 @@ class LibraryTracks extends React.Component{
 	}
 
 	loadMore(){
-		if( !this.props.spotify.library_tracks_more ) return
-		this.props.spotifyActions.getURL( this.props.spotify.library_tracks_more, 'SPOTIFY_LIBRARY_TRACKS_LOADED_MORE' );
+		if( !this.props.tracks_more ) return
+		this.props.spotifyActions.getURL( this.props.tracks_more, 'SPOTIFY_LIBRARY_TRACKS_LOADED_MORE' );
 	}
 
 	render(){
@@ -32,7 +32,7 @@ class LibraryTracks extends React.Component{
 			<div className="view library-tracks-view">
 				<Header icon="music" title="My tracks" />
 				<section className="list-wrapper">
-					{ this.props.spotify.library_tracks ? <TrackList tracks={this.props.spotify.library_tracks} /> : null }
+					{ this.props.tracks ? <TrackList tracks={this.props.tracks} /> : null }
 				</section>
 				<LazyLoadListener loadMore={ () => this.loadMore() }/>
 			</div>
@@ -48,7 +48,10 @@ class LibraryTracks extends React.Component{
  **/
 
 const mapStateToProps = (state, ownProps) => {
-	return state;
+	return {
+		tracks: state.spotify.library_tracks,
+		tracks_more: state.spotify.library_tracks_more
+	}
 }
 
 const mapDispatchToProps = (dispatch) => {