LoadMore now getMore with custom action callback; Fixing library re-load on re-render
This commit is contained in:
@ -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'
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
|
||||
@ -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
|
||||
})
|
||||
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -30,7 +30,7 @@ class DiscoverCategory extends React.Component{
|
||||
}
|
||||
|
||||
loadMore(){
|
||||
this.props.spotifyActions.loadMore(
|
||||
this.props.spotifyActions.getMore(
|
||||
this.props.category.playlists_more,
|
||||
null,
|
||||
{
|
||||
|
||||
@ -27,7 +27,7 @@ class DiscoverNewReleases extends React.Component{
|
||||
}
|
||||
|
||||
loadMore(){
|
||||
this.props.spotifyActions.loadMore(
|
||||
this.props.spotifyActions.getMore(
|
||||
this.props.new_releases_more,
|
||||
null,
|
||||
{
|
||||
|
||||
@ -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'),
|
||||
|
||||
@ -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'),
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user