From 3de3848aa99b0269bb1830d7ef22fe5d6ea2e5ad Mon Sep 17 00:00:00 2001 From: James Barnsley Date: Sun, 12 Nov 2017 09:05:34 +1300 Subject: [PATCH] LoadMore now getMore with custom action callback; Fixing library re-load on re-render --- src/js/services/spotify/actions.js | 22 +++++--------- src/js/services/spotify/middleware.js | 17 +++++++++-- src/js/services/spotify/reducer.js | 8 +++-- src/js/views/Album.js | 2 +- src/js/views/Artist.js | 2 +- src/js/views/Playlist.js | 2 +- src/js/views/User.js | 2 +- src/js/views/discover/DiscoverCategory.js | 2 +- src/js/views/discover/DiscoverNewReleases.js | 2 +- src/js/views/library/LibraryAlbums.js | 12 ++++---- src/js/views/library/LibraryArtists.js | 4 +-- src/js/views/library/LibraryPlaylists.js | 4 +-- src/js/views/library/LibraryTracks.js | 31 ++++++++++++++++---- 13 files changed, 68 insertions(+), 42 deletions(-) diff --git a/src/js/services/spotify/actions.js b/src/js/services/spotify/actions.js index 6f0cf7dc..fdbf4d48 100755 --- a/src/js/services/spotify/actions.js +++ b/src/js/services/spotify/actions.js @@ -289,10 +289,7 @@ export function getTrack(uri){ export function getLibraryTracks(){ return (dispatch, getState) => { - - dispatch({ type: 'SPOTIFY_LIBRARY_TRACKS_LOADED', data: false }); - - sendRequest(dispatch, getState, 'me/tracks?limit=50' ) + sendRequest(dispatch, getState, 'me/tracks?limit=50') .then( response => { dispatch({ @@ -501,24 +498,21 @@ export function getURL(url, action_name, key = false){ } } -export function loadMore(url, loaded_more_action = null, custom_action = null){ +export function getMore(url, core_action = null, custom_action = null){ return (dispatch, getState) => { sendRequest(dispatch, getState, url) .then( response => { - if (loaded_more_action){ + if (core_action){ dispatch(coreActions.loadedMore( - loaded_more_action.parent_type, - loaded_more_action.parent_key, - loaded_more_action.records_type, + core_action.parent_type, + core_action.parent_key, + core_action.records_type, response )); } else if (custom_action){ - dispatch({ - type: custom_action.type, - key: custom_action.key, - data: response - }); + custom_action.data = response; + dispatch(custom_action); } else { dispatch(coreActions.handleException( 'No callback handler for loading more items' diff --git a/src/js/services/spotify/middleware.js b/src/js/services/spotify/middleware.js index 26cf7189..fc22bfcc 100755 --- a/src/js/services/spotify/middleware.js +++ b/src/js/services/spotify/middleware.js @@ -309,12 +309,23 @@ const SpotifyMiddleware = (function(){ next(action) break + case 'SPOTIFY_LIBRARY_TRACKS_LOADED': + case 'SPOTIFY_LIBRARY_TRACKS_LOADED_MORE': + if (action.data){ + store.dispatch({ + type: 'TRACKS_LOADED', + tracks: action.data.items + }); + } + next(action); + break; + case 'SPOTIFY_TRACK_LOADED': store.dispatch({ - type: 'TRACK_LOADED', - key: action.data.uri, - track: action.data + type: 'TRACKS_LOADED', + tracks: [action.data] }); + next(action); break diff --git a/src/js/services/spotify/reducer.js b/src/js/services/spotify/reducer.js index c0e84e36..596db1e8 100755 --- a/src/js/services/spotify/reducer.js +++ b/src/js/services/spotify/reducer.js @@ -210,17 +210,19 @@ export default function reducer(spotify = {}, action){ case 'SPOTIFY_LIBRARY_TRACKS_LOADED': case 'SPOTIFY_LIBRARY_TRACKS_LOADED_MORE': - var tracks = action.data.items + var tracks = action.data.items; + var uris = []; if (tracks){ tracks = helpers.formatTracks(tracks); + uris = helpers.arrayOf('uri', tracks); if (spotify.library_tracks){ - tracks = [...spotify.library_tracks,...tracks] + uris = [...spotify.library_tracks, ...uris] } } return Object.assign({}, spotify, { - library_tracks: tracks, + library_tracks: helpers.removeDuplicates(uris), library_tracks_more: action.data.next }) diff --git a/src/js/views/Album.js b/src/js/views/Album.js index 745dddfc..4b4a43f6 100755 --- a/src/js/views/Album.js +++ b/src/js/views/Album.js @@ -85,7 +85,7 @@ class Album extends React.Component{ } loadMore(){ - this.props.spotifyActions.loadMore( + this.props.spotifyActions.getMore( this.props.album.tracks_more, { parent_type: 'album', diff --git a/src/js/views/Artist.js b/src/js/views/Artist.js index 5b24b6cb..0a831ca4 100755 --- a/src/js/views/Artist.js +++ b/src/js/views/Artist.js @@ -78,7 +78,7 @@ class Artist extends React.Component{ } loadMore(){ - this.props.spotifyActions.loadMore( + this.props.spotifyActions.getMore( this.props.artist.albums_more, { parent_type: 'artist', diff --git a/src/js/views/Playlist.js b/src/js/views/Playlist.js index 8c81714b..a30410ef 100755 --- a/src/js/views/Playlist.js +++ b/src/js/views/Playlist.js @@ -75,7 +75,7 @@ class Playlist extends React.Component{ } loadMore(){ - this.props.spotifyActions.loadMore( + this.props.spotifyActions.getMore( this.props.playlist.tracks_more, { parent_type: 'playlist', diff --git a/src/js/views/User.js b/src/js/views/User.js index 69b04f45..b5a8abc8 100755 --- a/src/js/views/User.js +++ b/src/js/views/User.js @@ -39,7 +39,7 @@ class User extends React.Component{ } loadMore(){ - this.props.spotifyActions.loadMore( + this.props.spotifyActions.getMore( this.props.user.playlists_more, { parent_type: 'user', diff --git a/src/js/views/discover/DiscoverCategory.js b/src/js/views/discover/DiscoverCategory.js index 480e53f7..6e090dea 100755 --- a/src/js/views/discover/DiscoverCategory.js +++ b/src/js/views/discover/DiscoverCategory.js @@ -30,7 +30,7 @@ class DiscoverCategory extends React.Component{ } loadMore(){ - this.props.spotifyActions.loadMore( + this.props.spotifyActions.getMore( this.props.category.playlists_more, null, { diff --git a/src/js/views/discover/DiscoverNewReleases.js b/src/js/views/discover/DiscoverNewReleases.js index 831d59e4..350493a5 100755 --- a/src/js/views/discover/DiscoverNewReleases.js +++ b/src/js/views/discover/DiscoverNewReleases.js @@ -27,7 +27,7 @@ class DiscoverNewReleases extends React.Component{ } loadMore(){ - this.props.spotifyActions.loadMore( + this.props.spotifyActions.getMore( this.props.new_releases_more, null, { diff --git a/src/js/views/library/LibraryAlbums.js b/src/js/views/library/LibraryAlbums.js index 395f9ae3..d5b85119 100755 --- a/src/js/views/library/LibraryAlbums.js +++ b/src/js/views/library/LibraryAlbums.js @@ -47,12 +47,12 @@ class LibraryAlbums extends React.Component{ // We've just connected if (!this.props.mopidy_connected){ - this.props.mopidyActions.getLibraryAlbums() + this.props.mopidyActions.getLibraryAlbums(); } // Filter changed, but we haven't got this provider's library yet if (this.props.source != 'all' && this.props.source != 'local' && newProps.mopidy_library_albums_status != 'finished' && newProps.mopidy_library_albums_status != 'started'){ - this.props.mopidyActions.getLibraryAlbums() + this.props.mopidyActions.getLibraryAlbums(); } } @@ -60,12 +60,12 @@ class LibraryAlbums extends React.Component{ // We've just connected if (!this.props.spotify_connected){ - this.props.spotifyActions.getLibraryAlbums() + this.props.spotifyActions.getLibraryAlbums(); } // Filter changed, but we haven't got this provider's library yet if (this.props.source != 'all' && this.props.source != 'spotify' && newProps.spotify_library_albums_status != 'finished' && newProps.spotify_library_albums_status != 'started'){ - this.props.spotifyActions.getLibraryAlbums() + this.props.spotifyActions.getLibraryAlbums(); } } } @@ -289,9 +289,9 @@ const mapStateToProps = (state, ownProps) => { load_queue: state.ui.load_queue, albums: state.core.albums, mopidy_library_albums: state.mopidy.library_albums, - mopidy_library_albums_status: state.mopidy.library_albums_status, + mopidy_library_albums_status: (state.ui.processes.MOPIDY_LIBRARY_ALBUMS_PROCESSOR !== undefined ? state.ui.processes.MOPIDY_LIBRARY_ALBUMS_PROCESSOR.status : null), spotify_library_albums: state.spotify.library_albums, - spotify_library_albums_status: state.spotify.library_albums_status, + spotify_library_albums_status: (state.ui.processes.SPOTIFY_GET_LIBRARY_ALBUMS_PROCESSOR !== undefined ? state.ui.processes.SPOTIFY_GET_LIBRARY_ALBUMS_PROCESSOR.status : null), view: state.ui.library_albums_view, source: (state.ui.library_albums_source ? state.ui.library_albums_source : 'all'), sort: (state.ui.library_albums_sort ? state.ui.library_albums_sort : 'name'), diff --git a/src/js/views/library/LibraryArtists.js b/src/js/views/library/LibraryArtists.js index 0ccaac70..c03f1968 100755 --- a/src/js/views/library/LibraryArtists.js +++ b/src/js/views/library/LibraryArtists.js @@ -241,9 +241,9 @@ const mapStateToProps = (state, ownProps) => { mopidy_connected: state.mopidy.connected, spotify_connected: state.spotify.connected, mopidy_library_artists: state.mopidy.library_artists, - mopidy_library_artists_status: state.mopidy.library_artists_status, + mopidy_library_artists_status: (state.ui.processes.MOPIDY_LIBRARY_ARTISTS_PROCESSOR !== undefined ? state.ui.processes.MOPIDY_LIBRARY_ARTISTS_PROCESSOR.status : null), spotify_library_artists: state.spotify.library_artists, - spotify_library_artists_status: state.spotify.library_artists_status, + spotify_library_artists_status: (state.ui.processes.SPOTIFY_GET_LIBRARY_ARTISTS_PROCESSOR !== undefined ? state.ui.processes.SPOTIFY_GET_LIBRARY_ARTISTS_PROCESSOR.status : null), artists: state.core.artists, source: (state.ui.library_artists_source ? state.ui.library_artists_source : 'all'), sort: (state.ui.library_artists_sort ? state.ui.library_artists_sort : 'name'), diff --git a/src/js/views/library/LibraryPlaylists.js b/src/js/views/library/LibraryPlaylists.js index fa667c8c..028045ea 100755 --- a/src/js/views/library/LibraryPlaylists.js +++ b/src/js/views/library/LibraryPlaylists.js @@ -268,9 +268,9 @@ const mapStateToProps = (state, ownProps) => { mopidy_connected: state.mopidy.connected, spotify_connected: state.spotify.connected, mopidy_library_playlists: state.mopidy.library_playlists, - mopidy_library_playlists_status: state.mopidy.library_playlists_status, + mopidy_library_playlists_status: (state.ui.processes.MOPIDY_LIBRARY_PLAYLISTS_PROCESSOR !== undefined ? state.ui.processes.MOPIDY_LIBRARY_PLAYLISTS_PROCESSOR.status : null), spotify_library_playlists: state.spotify.library_playlists, - spotify_library_playlists_status: state.spotify.library_playlists_status, + spotify_library_playlists_status: (state.ui.processes.SPOTIFY_GET_LIBRARY_PLAYLISTS_PROCESSOR !== undefined ? state.ui.processes.SPOTIFY_GET_LIBRARY_PLAYLISTS_PROCESSOR.status : null), load_queue: state.ui.load_queue, me_id: (state.spotify.me ? state.spotify.me.id : false), view: state.ui.library_playlists_view, diff --git a/src/js/views/library/LibraryTracks.js b/src/js/views/library/LibraryTracks.js index 47cd29b8..fd9ddf85 100755 --- a/src/js/views/library/LibraryTracks.js +++ b/src/js/views/library/LibraryTracks.js @@ -20,11 +20,19 @@ class LibraryTracks extends React.Component{ // on render componentDidMount(){ - this.props.spotifyActions.getLibraryTracks(); + if (this.props.library_tracks === undefined){ + this.props.spotifyActions.getLibraryTracks(); + } } loadMore(){ - this.props.spotifyActions.getURL(this.props.tracks_more, 'SPOTIFY_LIBRARY_TRACKS_LOADED_MORE' ); + this.props.spotifyActions.getMore( + this.props.library_tracks_more, + null, + { + type: 'SPOTIFY_LIBRARY_TRACKS_LOADED_MORE' + } + ); } render(){ @@ -39,12 +47,22 @@ class LibraryTracks extends React.Component{ ) } + var tracks = []; + if (this.props.library_tracks && this.props.tracks){ + for (var i = 0; i < this.props.library_tracks.length; i++){ + var uri = this.props.library_tracks[i] + if (this.props.tracks.hasOwnProperty(uri)){ + tracks.push(this.props.tracks[uri]) + } + } + } + return (
- { this.props.tracks ? : null } - this.loadMore()}/> + + this.loadMore()}/>
); @@ -61,8 +79,9 @@ class LibraryTracks extends React.Component{ const mapStateToProps = (state, ownProps) => { return { load_queue: state.ui.load_queue, - tracks: state.spotify.library_tracks, - tracks_more: state.spotify.library_tracks_more + tracks: state.core.tracks, + library_tracks: state.spotify.library_tracks, + library_tracks_more: state.spotify.library_tracks_more } }