LoadMore now getMore with custom action callback; Fixing library re-load on re-render

This commit is contained in:
James Barnsley
2017-11-12 09:05:34 +13:00
parent 091de03559
commit 3de3848aa9
13 changed files with 68 additions and 42 deletions

View File

@ -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'

View File

@ -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

View File

@ -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
})

View File

@ -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',

View File

@ -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',

View File

@ -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',

View File

@ -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',

View File

@ -30,7 +30,7 @@ class DiscoverCategory extends React.Component{
}
loadMore(){
this.props.spotifyActions.loadMore(
this.props.spotifyActions.getMore(
this.props.category.playlists_more,
null,
{

View File

@ -27,7 +27,7 @@ class DiscoverNewReleases extends React.Component{
}
loadMore(){
this.props.spotifyActions.loadMore(
this.props.spotifyActions.getMore(
this.props.new_releases_more,
null,
{

View File

@ -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'),

View File

@ -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'),

View File

@ -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,

View File

@ -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 (
<div className="view library-tracks-view">
<Header icon="music" title="My tracks" />
<section className="content-wrapper">
{ this.props.tracks ? <TrackList tracks={this.props.tracks} /> : null }
<LazyLoadListener loading={this.props.tracks_more} loadMore={() => this.loadMore()}/>
<TrackList tracks={tracks} />
<LazyLoadListener loading={this.props.library_tracks_more} loadMore={() => this.loadMore()}/>
</section>
</div>
);
@ -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
}
}