secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Lazy loading via awesome component

Browse Source
This commit is contained in:
James Barnsley
2016-11-01 08:57:28 +13:00
parent 25c973205a
commit b302cd2ac0
17 changed files with 496 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/js/views/Artist.js
View File

@ -3,6 +3,7 @@ import React, { PropTypes } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import LazyLoadListener from '../components/LazyLoadListener'
import Header from '../components/Header'
import TrackList from '../components/TrackList'
import AlbumGrid from '../components/AlbumGrid'
@ -30,6 +31,11 @@ class Artist extends React.Component{
}
}
loadMore(){
if( !this.props.spotify.artist_albums || !this.props.spotify.artist_albums.next ) return
this.props.spotifyActions.getURL( this.props.spotify.artist_albums.next, 'SPOTIFY_ARTIST_ALBUMS_LOADED_MORE' );
}
render(){
if( this.props.spotify.artist ){
return (
@ -58,6 +64,7 @@ class Artist extends React.Component{
<h4 className="left-padding">Albums</h4>
{ this.props.spotify.artist_albums ? <AlbumGrid className="no-top-padding" albums={ this.props.spotify.artist_albums.items } /> : null }
<LazyLoadListener loadMore={ () => this.loadMore() }/>
</div>
);
}

7
src/js/views/discover/DiscoverCategory.js
View File

@ -5,6 +5,7 @@ import { bindActionCreators } from 'redux'
import Header from '../../components/Header'
import PlaylistGrid from '../../components/PlaylistGrid'
import LazyLoadListener from '../../components/LazyLoadListener'
import * as spotifyActions from '../../services/spotify/actions'
@ -26,6 +27,11 @@ class DiscoverCategory extends React.Component{
}
}
loadMore(){
if( !this.props.spotify.new_releases || !this.props.spotify.new_releases.next ) return
this.props.spotifyActions.getURL( this.props.spotify.new_releases.next, 'SPOTIFY_NEW_RELEASES_LOADED_MORE' );
}
render(){
if( !this.props.spotify.category ) return null;
@ -33,6 +39,7 @@ class DiscoverCategory extends React.Component{
<div className="view discover-categories-view">
<Header icon="grid" title={this.props.spotify.category.name} />
{ this.props.spotify.category_playlists ? <PlaylistGrid playlists={this.props.spotify.category_playlists.items} /> : null }
<LazyLoadListener loadMore={ () => this.loadMore() }/>
</div>
);
}

10
src/js/views/discover/DiscoverNewReleases.js
View File

@ -5,7 +5,9 @@ import { bindActionCreators } from 'redux'
import Header from '../../components/Header'
import AlbumGrid from '../../components/AlbumGrid'
import LazyLoadListener from '../../components/LazyLoadListener'
import * as uiActions from '../../services/ui/actions'
import * as spotifyActions from '../../services/spotify/actions'
class DiscoverNewReleases extends React.Component{
@ -14,16 +16,21 @@ class DiscoverNewReleases extends React.Component{
super(props);
}
// on render
componentDidMount(){
this.props.spotifyActions.getNewReleases();
}
loadMore(){
if( !this.props.spotify.new_releases || !this.props.spotify.new_releases.next ) return
this.props.spotifyActions.getURL( this.props.spotify.new_releases.next, 'SPOTIFY_NEW_RELEASES_LOADED_MORE' );
}
render(){
return (
<div className="view discover-new-releases-view">
<Header icon="leaf" title="New Releases" />
{ this.props.spotify.new_releases ? <AlbumGrid albums={this.props.spotify.new_releases.items} /> : null }
<LazyLoadListener loadMore={ () => this.loadMore() }/>
</div>
);
}
@ -42,6 +49,7 @@ const mapStateToProps = (state, ownProps) => {
const mapDispatchToProps = (dispatch) => {
return {
uiActions: bindActionCreators(uiActions, dispatch),
spotifyActions: bindActionCreators(spotifyActions, dispatch)
}
}

8
src/js/views/library/LibraryAlbums.js
View File

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

9
src/js/views/library/LibraryArtists.js
View File

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