Add to playlist fix; Search lazy loading

src/js/components/Modal/AddToPlaylistModal.js

@@ -35,7 +35,7 @@ export default class AddToPlaylistModal extends React.Component{
 									<FontAwesome className="source" name={helpers.sourceIcon(playlist.uri)} />
 									&nbsp;
 									<span className="name">{ playlist.name }</span>
-									{ playlist.tracks ? <span className="grey-text">&nbsp;{ playlist.tracks.total } tracks</span> : null }
+									{ playlist.tracks_total ? <span className="grey-text">&nbsp;{ playlist.tracks_total } tracks</span> : null }
 								</div>
 							)
 						})

src/js/services/spotify/actions.js

@@ -426,7 +426,7 @@ export function getSearchResults( query, type = 'album,artist,playlist,track', l
                     albums_uris: helpers.asURIs(response.albums.items),
                     albums_more: response.albums.next,
                     tracks: response.tracks.items,
-                    tracks_more: response.tracks.more
+                    tracks_more: response.tracks.next
                 });
             });
 	}

src/js/services/spotify/middleware.js

@@ -46,7 +46,7 @@ const SpotifyMiddleware = (function(){
                     store.dispatch( uiActions.createNotification( "Must be logged in to Spotify to do that", 'bad' ) )
                     return
                 }
-                store.dispatch( spotifyActions.addTracksToPlaylist( action.playlist_uri, action.tracks_uris ))
+                store.dispatch( spotifyActions.addTracksToPlaylist( action.uri, action.tracks_uris ))
                 break
 
 
@@ -222,6 +222,68 @@ const SpotifyMiddleware = (function(){
                 });
                 break
 
+            case 'SPOTIFY_SEARCH_RESULTS_LOADED_MORE_TRACKS':
+                store.dispatch({
+                    type: 'SEARCH_RESULTS_LOADED',
+                    tracks: action.data.tracks.items,
+                    tracks_more: action.data.tracks.next
+                });
+                break
+
+            case 'SPOTIFY_SEARCH_RESULTS_LOADED_MORE_ARTISTS':
+                
+                store.dispatch({
+                    type: 'ARTISTS_LOADED',
+                    artists: action.data.artists.items
+                });
+
+                store.dispatch({
+                    type: 'SEARCH_RESULTS_LOADED',
+                    playlists_uris: helpers.asURIs(action.data.playlists.items),
+                    playlists_more: action.data.playlists.next
+                });
+                break
+
+            case 'SPOTIFY_SEARCH_RESULTS_LOADED_MORE_ALBUMS':
+
+                store.dispatch({
+                    type: 'ALBUMS_LOADED',
+                    albums: action.data.albums.items
+                });
+
+                store.dispatch({
+                    type: 'SEARCH_RESULTS_LOADED',
+                    albums_uris: helpers.asURIs(action.data.albums.items),
+                    albums_more: action.data.albums.next
+                });
+                break
+
+            case 'SPOTIFY_SEARCH_RESULTS_LOADED_MORE_PLAYLISTS':
+
+                var playlists = []
+                for (var i = 0; i < action.data.playlists.items.length; i++){
+                    playlists.push(Object.assign(
+                        {},
+                        action.data.playlists.items[i],
+                        {
+                            can_edit: (getState().spotify.me && action.data.playlists.items[i].owner.id == getState().spotify.me.id),
+                            tracks_total: action.data.playlists.items[i].tracks.total
+                        }
+                    ))
+                }
+
+                store.dispatch({
+                    type: 'PLAYLISTS_LOADED',
+                    playlists: playlists
+                });
+
+                store.dispatch({
+                    type: 'SEARCH_RESULTS_LOADED',
+                    playlists_uris: helpers.asURIs(action.data.playlists.items),
+                    playlists_more: action.data.playlists.next
+                });
+                break
+
             // This action is irrelevant to us, pass it on to the next middleware
             default:
                 return next(action);

src/js/services/ui/reducer.js

@@ -297,6 +297,7 @@ export default function reducer(ui = {}, action){
             var playlists = Object.assign([], ui.playlists)
 
             if (playlists[action.uri]){
+                console.log([playlists[action.uri],action.playlist])
                 var playlist = Object.assign({}, playlists[action.uri], action.playlist)
             }else{
                 var playlist = Object.assign({}, action.playlist)
@@ -406,8 +407,21 @@ export default function reducer(ui = {}, action){
          * Search results
          **/
 
+        case 'SEARCH_STARTED':
+            return Object.assign({}, ui, {
+                search_results: {
+                    artists_more: null,
+                    artists_uris: [],
+                    albums_more: null,
+                    albums_uris: [],
+                    playlists_more: null,
+                    playlists_uris: [],
+                    tracks: [],
+                    tracks_more: null,
+                }
+            });
+
         case 'SEARCH_RESULTS_LOADED':
-            console.log(action)
 
             // artists
             if (ui.search_results && ui.search_results.artists_uris){
@@ -417,6 +431,12 @@ export default function reducer(ui = {}, action){
             }
             if (action.artists_uris) artists_uris = [...artists_uris, ...action.artists_uris]
 
+            // more tracks
+            if (typeof(action.artists_more) !== 'undefined') var artists_more = action.artists_more
+            else if (ui.search_results && ui.search_results.artists_more) var artists_more = ui.search_results.artists_more
+            else var artists_more = null
+
+
             // albums
             if (ui.search_results && ui.search_results.albums_uris){
                 var albums_uris = ui.search_results.albums_uris
@@ -425,6 +445,12 @@ export default function reducer(ui = {}, action){
             }
             if (action.albums_uris) albums_uris = [...albums_uris, ...action.albums_uris]
 
+            // more tracks
+            if (typeof(action.albums_more) !== 'undefined') var albums_more = action.albums_more
+            else if (ui.search_results && ui.search_results.albums_more) var albums_more = ui.search_results.albums_more
+            else var albums_more = null
+
+
             // playlists
             if (ui.search_results && ui.search_results.playlists_uris){
                 var playlists_uris = ui.search_results.playlists_uris
@@ -433,6 +459,12 @@ export default function reducer(ui = {}, action){
             }
             if (action.playlists_uris) playlists_uris = [...playlists_uris, ...action.playlists_uris]
 
+            // more tracks
+            if (typeof(action.playlists_more) !== 'undefined') var playlists_more = action.playlists_more
+            else if (ui.search_results && ui.search_results.playlists_more) var playlists_more = ui.search_results.playlists_more
+            else var playlists_more = null
+
+
             // tracks
             if (ui.search_results && ui.search_results.tracks){
                 var tracks = ui.search_results.tracks
@@ -441,54 +473,24 @@ export default function reducer(ui = {}, action){
             }
             if (action.tracks) tracks = [...tracks, ...action.tracks]
 
+            // more tracks
+            if (typeof(action.tracks_more) !== 'undefined') var tracks_more = action.tracks_more
+            else if (ui.search_results && ui.search_results.tracks_more) var tracks_more = ui.search_results.tracks_more
+            else var tracks_more = null
+
             return Object.assign({}, ui, {
                 search_results: {
-                    artists_more: (action.artists_more ? action.artists_more : null),
+                    artists_more: artists_more,
                     artists_uris: artists_uris,
-                    albums_more: (action.albums_more ? action.albums_more : null),
+                    albums_more: albums_more,
                     albums_uris: albums_uris,
-                    playlists_more: (action.playlists_more ? action.playlists_more : null),
+                    playlists_more: playlists_more,
                     playlists_uris: playlists_uris,
                     tracks: tracks,
-                    tracks_more: (action.tracks_more ? action.tracks.tracks_more : null)
+                    tracks_more: tracks_more
                 }
             });
 
-        case 'SPOTIFY_SEARCH_RESULTS_LOADED_MORE_ARTISTS':
-            var results = Object.assign(
-                {}, 
-                ui.search_results, 
-                { 
-                    artists_uris: [...ui.search_results.artists_uris, ...action.data.artists_uris],
-                    artists_more: action.data.artists.next
-                }
-            )
-            return Object.assign({}, ui, { search_results: results })
-
-        case 'SPOTIFY_SEARCH_RESULTS_LOADED_MORE_ALBUMS':
-            var albums = [...ui.search_results.albums, ...action.data.albums.items]
-            var results = Object.assign({}, ui.search_results, { 
-                albums: albums,
-                albums_more: action.data.albums.next
-            })
-            return Object.assign({}, ui, { search_results: results })
-
-        case 'SPOTIFY_SEARCH_RESULTS_LOADED_MORE_PLAYLISTS':
-            var playlists = [...ui.search_results.playlists, ...action.data.playlists.items]
-            var results = Object.assign({}, ui.search_results, { 
-                playlists: playlists,
-                playlists_more: action.data.playlists.next
-            })
-            return Object.assign({}, ui, { search_results: results })
-
-        case 'SPOTIFY_SEARCH_RESULTS_LOADED_MORE_TRACKS':
-            var tracks = [...ui.search_results.tracks, ...action.data.tracks.items]
-            var results = Object.assign({}, ui.search_results, { 
-                tracks: tracks,
-                tracks_more: action.data.tracks.next
-            })
-            return Object.assign({}, ui, { search_results: results })
-
 
         /**
          * Modals

src/js/views/Playlist.js

@@ -173,7 +173,7 @@ class Playlist extends React.Component{
 
 const mapStateToProps = (state, ownProps) => {
 	return {
-		playlist: state.ui.playlists[helpers.indexFriendlyUri(ownProps.params.uri)],
+		playlist: (state.ui.playlists && typeof(state.ui.playlists[ownProps.params.uri]) !== 'undefined' ? state.ui.playlists[ownProps.params.uri] : false ),
 		mopidy_connected: state.mopidy.connected,
 		spotify_authorized: state.spotify.authorized,
 		spotify_userid: state.spotify.me.id

src/js/views/Search.js

@@ -47,15 +47,9 @@ class Search extends React.Component{
 	}
 
 	loadMore(type){
-		if( !this.props.search_results[type] || 
+		if( this.props[type+'_more'] ){
-			!this.props.search_results[type+'_more'] ){
+			this.props.spotifyActions.getURL( this.props[type+'_more'], 'SPOTIFY_SEARCH_RESULTS_LOADED_MORE_'+type.toUpperCase());
-			return
 		}
-
-		this.props.spotifyActions.getURL( 
-			this.props.search_results[type+'_more'], 
-			'SPOTIFY_SEARCH_RESULTS_LOADED_MORE_'+ type.toUpperCase()
-		);
 	}
 
 	renderResults(){
@@ -186,6 +180,7 @@ const mapStateToProps = (state, ownProps) => {
 		mopidy_connected: state.mopidy.connected,
 		uri_schemes: state.mopidy.uri_schemes,
 		tracks: (state.ui.search_results ? state.ui.search_results.tracks : []),
+		tracks_more: (state.ui.search_results && state.ui.search_results.tracks_more ? state.ui.search_results.tracks_more : null),
 		artists: state.ui.artists,
 		artists_uris: (state.ui.search_results ? state.ui.search_results.artists_uris : []),
 		artists_more: (state.ui.search_results ? state.ui.search_results.artists_more : null),