Stateful pagination on Browse Directories, fixes #406

src/js/views/library/LibraryBrowseDirectory.js

@@ -11,6 +11,7 @@ import DropdownField from '../../components/Fields/DropdownField';
 import Icon from '../../components/Icon';
 import URILink from '../../components/URILink';
 import ErrorBoundary from '../../components/ErrorBoundary';
+import LazyLoadListener from '../../components/LazyLoadListener';
 import * as uiActions from '../../services/ui/actions';
 import * as mopidyActions from '../../services/mopidy/actions';
 import * as spotifyActions from '../../services/spotify/actions';
@@ -20,7 +21,25 @@ import {
 import { arrayOf, sortItems } from '../../util/arrays';
 
 class LibraryBrowseDirectory extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      filter: '',
+      limit: 50,
+      per_page: 50,
+    };
+  }
+
   componentDidMount() {
+    // Restore any limit defined in our location state
+    const state = (this.props.location.state ? this.props.location.state : {});
+    if (state.limit) {
+      this.setState({
+        limit: state.limit,
+      });
+    }
+
     this.props.uiActions.setWindowTitle('Browse');
     this.loadDirectory();
   }
@@ -48,6 +67,17 @@ class LibraryBrowseDirectory extends React.Component {
     }
   }
 
+  loadMore() {
+    const new_limit = this.state.limit + this.state.per_page;
+
+    this.setState({ limit: new_limit });
+
+    // Set our pagination to location state
+    const state = (this.props.location && this.props.location.state ? this.props.location.state : {});
+    state.limit = new_limit;
+    this.props.history.replace({ state });
+  }
+
   playAll(e, tracks) {
     const tracks_uris = arrayOf('uri', tracks);
     this.props.mopidyActions.playURIs(tracks_uris, `iris:browse:${this.props.uri}`);
@@ -98,7 +128,7 @@ class LibraryBrowseDirectory extends React.Component {
   }
 
   renderSubdirectories(subdirectories) {
-    if (this.props.view == 'list') {
+    if (this.props.view === 'list') {
       return (
         <List
           nocontext
@@ -143,12 +173,20 @@ class LibraryBrowseDirectory extends React.Component {
       );
     }
 
-    let tracks = (this.props.directory.tracks && this.props.directory.tracks.length > 0 ? this.props.directory.tracks : null);
-    tracks = sortItems(tracks, 'name');
-
     let subdirectories = (this.props.directory.subdirectories && this.props.directory.subdirectories.length > 0 ? this.props.directory.subdirectories : null);
     subdirectories = sortItems(subdirectories, 'name');
 
+    const total_items = (tracks ? tracks.length : 0) + (subdirectories ? subdirectories.length : 0);
+    subdirectories = subdirectories.slice(0, this.state.limit);
+    let all_tracks = null;
+    let tracks = null;
+    let limit_remaining = this.state.limit - subdirectories;
+    if (limit_remaining > 0) {
+      all_tracks = (this.props.directory.tracks && this.props.directory.tracks.length > 0 ? this.props.directory.tracks : null);
+      all_tracks = sortItems(all_tracks, 'name');
+      tracks = all_tracks.slice(0, limit_remaining);
+    }
+
     const view_options = [
       {
         label: 'Thumbnails',
@@ -171,7 +209,7 @@ class LibraryBrowseDirectory extends React.Component {
           handleChange={(value) => { this.props.uiActions.set({ library_directory_view: value }); this.props.uiActions.hideContextMenu(); }}
         />
         {tracks && (
-          <a className="button button--no-hover" onClick={(e) => { this.props.uiActions.hideContextMenu(); this.playAll(e, tracks); }}>
+          <a className="button button--no-hover" onClick={(e) => { this.props.uiActions.hideContextMenu(); this.playAll(e, all_tracks); }}>
             <Icon name="play_circle_filled" />
             Play all
           </a>
@@ -198,12 +236,18 @@ class LibraryBrowseDirectory extends React.Component {
 
             {tracks && (
               <TrackList
-                tracks={this.props.directory.tracks}
+                tracks={tracks}
                 uri={`iris:browse:${this.props.uri}`}
                 className="library-local-track-list"
               />
             )}
 
+            <LazyLoadListener
+              loadKey={total_items > this.state.limit ? this.state.limit : total_items}
+              showLoader={this.state.limit < total_items}
+              loadMore={() => this.loadMore()}
+            />
+
           </ErrorBoundary>
         </section>
       </div>