From 96ad8a75c12a67c804affb9d5525e6ad3479c8ce Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Sat, 19 Nov 2016 13:06:08 +1300
Subject: [PATCH] Weening out old full props; Dropzone add to playlist

---
 src/js/components/AlbumLink.js                | 21 ------------
 src/js/components/ContextMenu.js              |  5 ---
 src/js/components/Dropzones.js                |  4 ++-
 src/js/components/Modal/AddToPlaylistModal.js |  4 +--
 src/js/components/Modal/Modal.js              |  2 +-
 src/js/components/Track.js                    |  7 ++--
 src/js/services/localstorage/middleware.js    |  2 +-
 src/js/services/ui/actions.js                 |  8 +----
 src/js/views/Album.js                         |  4 +--
 src/js/views/Artist.js                        |  2 +-
 src/js/views/Queue.js                         |  1 -
 src/js/views/discover/Discover.js             | 32 ++++++-------------
 src/js/views/library/LibraryAlbums.js         | 11 ++++---
 src/js/views/library/LibraryArtists.js        | 11 ++++---
 src/js/views/library/LibraryLocalAlbums.js    | 13 +++++---
 src/js/views/library/LibraryLocalArtists.js   | 13 +++++---
 src/js/views/library/LibraryLocalDirectory.js | 13 +++++---
 src/js/views/library/LibraryTracks.js         | 11 ++++---
 18 files changed, 70 insertions(+), 94 deletions(-)
 delete mode 100755 src/js/components/AlbumLink.js

diff --git a/src/js/components/AlbumLink.js b/src/js/components/AlbumLink.js
deleted file mode 100755
index 0a2e2ab1..00000000
--- a/src/js/components/AlbumLink.js
+++ /dev/null
@@ -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>
-		);
-	}
-}
\ No newline at end of file
diff --git a/src/js/components/ContextMenu.js b/src/js/components/ContextMenu.js
index a7578330..8ba2ecb0 100755
--- a/src/js/components/ContextMenu.js
+++ b/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();
diff --git a/src/js/components/Dropzones.js b/src/js/components/Dropzones.js
index 58f76ffa..62089ab7 100755
--- a/src/js/components/Dropzones.js
+++ b/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
 		}
 	}
 
diff --git a/src/js/components/Modal/AddToPlaylistModal.js b/src/js/components/Modal/AddToPlaylistModal.js
index d9845ac4..db627498 100755
--- a/src/js/components/Modal/AddToPlaylistModal.js
+++ b/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()
 	}
 
diff --git a/src/js/components/Modal/Modal.js b/src/js/components/Modal/Modal.js
index 05156240..5f230379 100755
--- a/src/js/components/Modal/Modal.js
+++ b/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 }
 
diff --git a/src/js/components/Track.js b/src/js/components/Track.js
index e4a1a81e..d722a49a 100755
--- a/src/js/components/Track.js
+++ b/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 }
diff --git a/src/js/services/localstorage/middleware.js b/src/js/services/localstorage/middleware.js
index 68da3581..101873b3 100755
--- a/src/js/services/localstorage/middleware.js
+++ b/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 ){
 
diff --git a/src/js/services/ui/actions.js b/src/js/services/ui/actions.js
index 086a454b..ac025682 100755
--- a/src/js/services/ui/actions.js
+++ b/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':
diff --git a/src/js/views/Album.js b/src/js/views/Album.js
index 9d6ee0da..1239d377 100755
--- a/src/js/views/Album.js
+++ b/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">
diff --git a/src/js/views/Artist.js b/src/js/views/Artist.js
index 7d289d3d..906f68a2 100755
--- a/src/js/views/Artist.js
+++ b/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">
diff --git a/src/js/views/Queue.js b/src/js/views/Queue.js
index 81760c66..e21bee31 100755
--- a/src/js/views/Queue.js
+++ b/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'
diff --git a/src/js/views/discover/Discover.js b/src/js/views/discover/Discover.js
index d9e78078..f08fe007 100755
--- a/src/js/views/discover/Discover.js
+++ b/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) => {
diff --git a/src/js/views/library/LibraryAlbums.js b/src/js/views/library/LibraryAlbums.js
index d883250b..e19799a7 100755
--- a/src/js/views/library/LibraryAlbums.js
+++ b/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) => {
diff --git a/src/js/views/library/LibraryArtists.js b/src/js/views/library/LibraryArtists.js
index 668230d5..428aa614 100755
--- a/src/js/views/library/LibraryArtists.js
+++ b/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) => {
diff --git a/src/js/views/library/LibraryLocalAlbums.js b/src/js/views/library/LibraryLocalAlbums.js
index 4efed70c..24c77cd3 100755
--- a/src/js/views/library/LibraryLocalAlbums.js
+++ b/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) => {
diff --git a/src/js/views/library/LibraryLocalArtists.js b/src/js/views/library/LibraryLocalArtists.js
index a6d1ce26..cb860d1e 100755
--- a/src/js/views/library/LibraryLocalArtists.js
+++ b/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) => {
diff --git a/src/js/views/library/LibraryLocalDirectory.js b/src/js/views/library/LibraryLocalDirectory.js
index 9fac756f..c35281ec 100755
--- a/src/js/views/library/LibraryLocalDirectory.js
+++ b/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) => {
diff --git a/src/js/views/library/LibraryTracks.js b/src/js/views/library/LibraryTracks.js
index 58646ed2..71ab13ac 100755
--- a/src/js/views/library/LibraryTracks.js
+++ b/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) => {