Lazy loading keys; Spotify new releases in Spotify reducer, handling duplicates bug

This commit is contained in:
James Barnsley
2018-09-03 14:22:27 +12:00
parent 3344cf5db4
commit 93be7e096b
11 changed files with 14015 additions and 10771 deletions

View File

@ -7,7 +7,7 @@ export default class LazyLoadListener extends React.Component{
constructor(props){
super(props);
this.state = {
listening: false,
listening: (this.props.loadKey ? true : false),
loadKey: this.props.loadKey
}
@ -23,7 +23,7 @@ export default class LazyLoadListener extends React.Component{
}
componentWillReceiveProps(nextProps){
if (nextProps.loadKey !== this.state.loadKey){
if (nextProps.loadKey && nextProps.loadKey !== this.state.loadKey){
this.setState({
loadKey: nextProps.loadKey,
listening: true

View File

@ -158,27 +158,6 @@ export default function reducer(core = {}, action){
return Object.assign({}, core, { users: users });
case 'NEW_RELEASES_LOADED':
if (!action.uris){
return Object.assign({}, core, {
new_releases: null,
new_releases_more: null,
new_releases_total: null
});
}
var new_releases = [];
if (core.new_releases){
new_releases = Object.assign([], core.new_releases);
}
return Object.assign({}, core, {
new_releases: [...new_releases, ...action.uris],
new_releases_more: action.more,
new_releases_total: action.total
});
case 'ARTIST_ALBUMS_LOADED':
var artists = Object.assign({}, core.artists)
var albums_uris = [];

View File

@ -106,12 +106,14 @@ const SpotifyMiddleware = (function(){
type: 'ALBUMS_LOADED',
albums: action.data.albums.items
});
store.dispatch({
type: 'NEW_RELEASES_LOADED',
uris: helpers.arrayOf('uri',action.data.albums.items),
more: action.data.albums.next,
total: action.data.albums.total
});
// Collate result into the three key values we want
action.uris = helpers.arrayOf('uri', action.data.albums.items);
action.more = action.data.albums.next;
action.total = action.data.albums.total;
// And pass on to our reducer
next(action);
break
case 'SPOTIFY_ARTIST_ALBUMS_LOADED':

View File

@ -68,17 +68,17 @@ export default function reducer(spotify = {}, action){
case 'SPOTIFY_FEATURED_PLAYLISTS_LOADED':
return Object.assign({}, spotify, { featured_playlists: action.data })
case 'SPOTIFY_NEW_RELEASES_LOADED':
return Object.assign({}, spotify, { new_releases: action.data });
case 'SPOTIFY_NEW_RELEASES_LOADED_MORE':
console.log([ ...spotify.new_releases.items, ...action.data.albums.items]);
return Object.assign({}, spotify, { new_releases: {
href: action.data.albums.href,
next: action.data.albums.next,
previous: action.data.albums.previous,
items: [ ...spotify.new_releases.items, ...action.data.albums.items]
}});
case 'SPOTIFY_NEW_RELEASES_LOADED':
var new_releases = [];
if (spotify.new_releases){
new_releases = Object.assign([], spotify.new_releases);
}
return Object.assign({}, spotify, {
new_releases: helpers.removeDuplicates([...new_releases, ...action.uris]),
new_releases_more: action.more,
new_releases_total: action.total
});
case 'SPOTIFY_DISCOVER_LOADED':
if (!action.data ){

View File

@ -32,17 +32,11 @@ class DiscoverNewReleases extends React.Component{
}
loadMore(){
// TODO: Figure out how to check for duplicated requests
// perhaps we catch this at Spotify actions, by checking for
// pending requests on the same URL, and invalidate the Promise?
this.props.spotifyActions.getMore(
this.props.new_releases_more,
null,
{
type: 'SPOTIFY_NEW_RELEASES_LOADED',
key: null
type: 'SPOTIFY_NEW_RELEASES_LOADED'
}
);
}
@ -111,12 +105,11 @@ class DiscoverNewReleases extends React.Component{
)
}
var albums = []
var albums = [];
if (this.props.new_releases){
for (var i = 0; i < this.props.new_releases.length; i++){
var uri = this.props.new_releases[i]
for (var uri of this.props.new_releases){
if (this.props.albums.hasOwnProperty(uri)){
albums.push(this.props.albums[uri])
albums.push(this.props.albums[uri]);
}
}
}
@ -166,9 +159,9 @@ const mapStateToProps = (state, ownProps) => {
load_queue: state.ui.load_queue,
artists: state.core.artists,
albums: state.core.albums,
new_releases: state.core.new_releases,
new_releases_more: state.core.new_releases_more,
new_releases_total: state.core.new_releases_total
new_releases: state.spotify.new_releases,
new_releases_more: state.spotify.new_releases_more,
new_releases_total: state.spotify.new_releases_total
}
}

View File

@ -184,7 +184,7 @@ class LibraryAlbums extends React.Component{
className="album-list"
link_prefix={global.baseURL+"album/"} />
<LazyLoadListener
loadKey={total_albums}
loadKey={this.state.limit}
showLoader={this.state.limit < total_albums}
loadMore={() => this.setState({limit: this.state.limit + this.state.per_page})}
/>
@ -197,7 +197,7 @@ class LibraryAlbums extends React.Component{
handleContextMenu={(e,item) => this.handleContextMenu(e,item)}
albums={albums} />
<LazyLoadListener
loadKey={total_albums}
loadKey={this.state.limit}
showLoader={this.state.limit < total_albums}
loadMore={() => this.setState({limit: this.state.limit + this.state.per_page})}
/>

View File

@ -160,7 +160,7 @@ class LibraryArtists extends React.Component{
className="artist-list"
link_prefix={global.baseURL+"artist/"} />
<LazyLoadListener
loadKey={total_artists}
loadKey={this.state.limit}
showLoader={this.state.limit < total_artists}
loadMore={() => this.loadMore()}
/>
@ -173,7 +173,7 @@ class LibraryArtists extends React.Component{
handleContextMenu={(e,item) => this.handleContextMenu(e,item)}
artists={artists} />
<LazyLoadListener
loadKey={total_artists}
loadKey={this.state.limit}
showLoader={this.state.limit < total_artists}
loadMore={() => this.loadMore()}
/>

View File

@ -156,7 +156,7 @@ class LibraryPlaylists extends React.Component{
className="playlist-list"
link_prefix={global.baseURL+"playlist/"} />
<LazyLoadListener
loadKey="playlists"
loadKey={this.state.limit}
loading={this.state.limit < total_playlists}
loadMore={() => this.setState({limit: this.state.limit + this.state.per_page})}
/>
@ -169,7 +169,7 @@ class LibraryPlaylists extends React.Component{
handleContextMenu={(e,item) => this.handleContextMenu(e,item)}
playlists={playlists} />
<LazyLoadListener
loadKey="playlists"
loadKey={this.state.limit}
loading={this.state.limit < total_playlists}
loadMore={() => this.setState({limit: this.state.limit + this.state.per_page})}
/>