Users now using index

src/js/services/spotify/actions.js

@@ -713,29 +713,43 @@ export function getLibraryArtists(){
 export function getUser( uri ){
     return (dispatch, getState) => {
 
-        dispatch({ type: 'SPOTIFY_USER_LOADED', data: false });
+        // get the user
-
-        var user = {};
-
-        // get both the artist and the top tracks
-        $.when(
-
         sendRequest( dispatch, getState, 'users/'+ helpers.getFromUri('userid',uri) )
             .then( response => {
-                    Object.assign(user, response);
+                dispatch({
-                }),
+                    type: 'USER_LOADED',
-
+                    uri: response.uri,
-            sendRequest( dispatch, getState, 'users/'+ helpers.getFromUri('userid', uri) +'/playlists?limit=50' )
+                    user: response
-                .then( response => {
+                });
-                    Object.assign(user, { playlists: response.items, playlists_more: response.next, playlists_total: response.total });
             })
 
-        ).then( () => {
+        // get the first page of playlists
+        sendRequest( dispatch, getState, 'users/'+ helpers.getFromUri('userid', uri) +'/playlists?limit=40' )
+            .then( response => {
+
+                var playlists = []
+                for (var i = 0; i < response.items.length; i++){
+                    playlists.push(Object.assign(
+                        {},
+                        response.items[i],
+                        {
+                            can_edit: (getState().spotify.me && response.items[i].owner.id == getState().spotify.me.id),
+                            tracks_total: response.items[i].tracks.total
+                        }
+                    ))
+                }
+
                 dispatch({
-                type: 'SPOTIFY_USER_LOADED',
+                    type: 'PLAYLISTS_LOADED',
-                data: user
+                    playlists: playlists
                 });
+
+                dispatch({
+                    type: 'SPOTIFY_USER_PLAYLISTS_LOADED',
+                    uri: uri,
+                    data: response
                 });
+            })
     }
 }
 

src/js/services/spotify/middleware.js

@@ -123,6 +123,16 @@ const SpotifyMiddleware = (function(){
                 });
                 break
 
+            case 'SPOTIFY_USER_FOLLOWING_LOADED':
+                store.dispatch({
+                    type: 'USER_LOADED',
+                    uri: action.uri,
+                    user: {
+                        is_following: action.is_following
+                    }
+                });
+                break
+
             case 'SPOTIFY_NEW_RELEASES_LOADED':
                 store.dispatch({
                     type: 'ALBUMS_LOADED',
@@ -150,6 +160,38 @@ const SpotifyMiddleware = (function(){
                 });
                 break
 
+            case 'SPOTIFY_USER_PLAYLISTS_LOADED':
+                var playlists = []
+                for( var i = 0; i < action.data.items.length; i++ ){
+                    var playlist = Object.assign(
+                        {},
+                        action.data.items[i],
+                        {
+                            can_edit: (store.getState().spotify.authorized && store.getState().spotify.me && action.data.items[i].owner.id == store.getState().spotify.me.id),
+                            tracks_total: action.data.items[i].tracks.total
+                        }
+                    )
+
+                    // remove our tracklist. It'll overwrite any full records otherwise
+                    delete playlist.tracks
+
+                    playlists.push(playlist)
+                }
+
+                store.dispatch({
+                    type: 'PLAYLISTS_LOADED',
+                    playlists: playlists
+                });
+
+                store.dispatch({
+                    type: 'USER_PLAYLISTS_LOADED',
+                    uri: action.uri,
+                    uris: helpers.asURIs(playlists),
+                    more: action.data.next,
+                    total: action.data.total
+                });
+                break
+
             case 'SPOTIFY_LIBRARY_PLAYLISTS_LOADED':
                 var playlists = []
                 for( var i = 0; i < action.playlists.length; i++ ){

src/js/services/ui/actions.js

@@ -19,7 +19,6 @@ export function hideContextMenu(){
 }
 
 export function startSearch( query ){
-    console.log('STARTING NOW')
 	return {
 		type: 'SEARCH_STARTED',
         query: query

src/js/services/ui/reducer.js

@@ -269,23 +269,39 @@ export default function reducer(ui = {}, action){
 
 
         /**
-         * User
+         * User profiles
          **/
 
-        case 'SPOTIFY_USER_LOADED':
+        case 'USER_LOADED':
-            if( !action.data ) return Object.assign({}, ui, { user: false })
+            var users = Object.assign([], ui.users)
-            return Object.assign({}, ui, { user: action.data })
+
+            if (users[action.uri]){
+                var user = Object.assign({}, users[action.uri], action.user)
+            }else{
+                var user = Object.assign({}, action.user)
+            }
+
+            users[action.uri] = user
+            return Object.assign({}, ui, { users: users });
+
+        case 'USER_PLAYLISTS_LOADED':
+            var users = Object.assign([], ui.users)
+            var playlists_uris = []
+            if (users[action.uri].playlists_uris) playlists_uris = users[action.uri].playlists_uris
+
+            var artist = Object.assign(
+                {}, 
+                users[action.uri],
+                {
+                    playlists_uris: [...playlists_uris, ...action.uris],
+                    playlists_more: action.more,
+                    playlists_total: action.total
+                }
+            )
+            users[action.uri] = artist
+            return Object.assign({}, ui, { users: users });
 
-        case 'SPOTIFY_USER_PLAYLISTS_LOADED_MORE':
-            var user = Object.assign({}, ui.user, {
-                playlists: [ ...ui.user.playlists, ...action.data.items ],
-                playlists_more: action.data.next
-            })
-            return Object.assign({}, ui, { user: user });
 
-        case 'USER_FOLLOWING_LOADED':
-            var user = Object.assign({}, ui.user, { following: action.is_following })
-            return Object.assign({}, ui, { user: user, following_loading: false });
 
 
         /**

src/js/views/User.js

@@ -29,12 +29,12 @@ class User extends React.Component{
 	}
 
 	loadUser( props = this.props ){
-		this.props.spotifyActions.getUser( props.params.uri )
+		if (!props.user) this.props.spotifyActions.getUser( props.params.uri )
 	}
 
 	loadMore(){
 		if( !this.props.user.playlists_more ) return
-		this.props.spotifyActions.getURL( this.props.user.playlists_more, 'SPOTIFY_USER_PLAYLISTS_LOADED_MORE' )
+		this.props.spotifyActions.getURL( this.props.user.playlists_more, 'SPOTIFY_USER_PLAYLISTS_LOADED', this.props.params.uri )
 	}
 
 	renderMeFlag(){
@@ -50,6 +50,16 @@ class User extends React.Component{
 	render(){
 		if( !this.props.user ) return null
 
+		var playlists = []
+		if (this.props.user.playlists_uris){
+			for (var i = 0; i < this.props.user.playlists_uris.length; i++){
+				var uri = this.props.user.playlists_uris[i]
+				if (this.props.playlists.hasOwnProperty(uri)){
+					playlists.push(this.props.playlists[uri])
+				}
+			}
+		}
+
 		return (
 			<div className="view user-view">
 			
@@ -65,14 +75,14 @@ class User extends React.Component{
 					</div>
 
 					<ul className="details">
-						<li>{ this.props.user.playlists_total.toLocaleString() } playlists</li>
+						<li>{ this.props.user.playlists_total ? this.props.user.playlists_total.toLocaleString() : 0 } playlists</li>
 						<li>{ this.props.user.followers.total.toLocaleString() } followers</li>
 					</ul>
 				</div>
 				<div className="main">
 
 					<section className="grid-wrapper">
-						{ this.props.user.playlists ? <PlaylistGrid playlists={ this.props.user.playlists } /> : null }
+						<PlaylistGrid playlists={playlists} />
 						<LazyLoadListener loadMore={ () => this.loadMore() }/>
 					</section>
 					
@@ -86,7 +96,9 @@ const mapStateToProps = (state, ownProps) => {
 	return {
 		spotify_authorized: state.spotify.authorized,
 		me: state.spotify.me,
-		user: state.ui.user
+		playlists: state.ui.playlists,
+		user: (state.ui.users && typeof(state.ui.users[ownProps.params.uri]) !== 'undefined' ? state.ui.users[ownProps.params.uri] : false ),
+		users: state.ui.users
 	};
 }