Lazy loading via awesome component
This commit is contained in:
@ -6,6 +6,7 @@ import { Link } from 'react-router'
|
||||
|
||||
import AlbumGrid from '../../components/AlbumGrid'
|
||||
import Header from '../../components/Header'
|
||||
import LazyLoadListener from '../../components/LazyLoadListener'
|
||||
|
||||
import * as mopidyActions from '../../services/mopidy/actions'
|
||||
import * as spotifyActions from '../../services/spotify/actions'
|
||||
@ -16,11 +17,15 @@ class LibraryAlbums extends React.Component{
|
||||
super(props);
|
||||
}
|
||||
|
||||
// on render
|
||||
componentDidMount(){
|
||||
this.props.spotifyActions.getLibraryAlbums();
|
||||
}
|
||||
|
||||
loadMore(){
|
||||
if( !this.props.spotify.library_albums || !this.props.spotify.library_albums.next ) return
|
||||
this.props.spotifyActions.getURL( this.props.spotify.library_albums.next, 'SPOTIFY_LIBRARY_ALBUMS_LOADED_MORE' );
|
||||
}
|
||||
|
||||
render(){
|
||||
return (
|
||||
<div className="view library-albums-view">
|
||||
@ -29,6 +34,7 @@ class LibraryAlbums extends React.Component{
|
||||
title="My albums"
|
||||
/>
|
||||
{ this.props.spotify.library_albums ? <AlbumGrid albums={this.props.spotify.library_albums.items} /> : null }
|
||||
<LazyLoadListener loadMore={ () => this.loadMore() }/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -4,6 +4,7 @@ import { connect } from 'react-redux'
|
||||
import { bindActionCreators } from 'redux'
|
||||
import { Link } from 'react-router'
|
||||
|
||||
import LazyLoadListener from '../../components/LazyLoadListener'
|
||||
import Header from '../../components/Header'
|
||||
import ArtistGrid from '../../components/ArtistGrid'
|
||||
|
||||
@ -21,6 +22,11 @@ class LibraryArtists extends React.Component{
|
||||
this.props.spotifyActions.getLibraryArtists();
|
||||
}
|
||||
|
||||
loadMore(){
|
||||
if( !this.props.spotify.library_artists || !this.props.spotify.library_artists.next ) return
|
||||
this.props.spotifyActions.getURL( this.props.spotify.library_artists.next, 'SPOTIFY_LIBRARY_ARTISTS_LOADED_MORE' );
|
||||
}
|
||||
|
||||
render(){
|
||||
return (
|
||||
<div className="view library-artists-view">
|
||||
@ -28,7 +34,8 @@ class LibraryArtists extends React.Component{
|
||||
icon="mic"
|
||||
title="My artists"
|
||||
/>
|
||||
{ this.props.spotify.library_artists ? <ArtistGrid artists={this.props.spotify.library_artists.artists.items} /> : null }
|
||||
{ this.props.spotify.library_artists ? <ArtistGrid artists={this.props.spotify.library_artists.items} /> : null }
|
||||
<LazyLoadListener loadMore={ () => this.loadMore() }/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user