Centralised SmartList for grids and lists

src/js/views/Queue.js

@@ -51,15 +51,6 @@ const Artwork = ({
 }
 
 class Queue extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      limit: 50,
-      per_page: 50,
-    };
-  }
-
   componentDidMount() {
     const {
       uiActions: {
@@ -93,21 +84,6 @@ class Queue extends React.Component {
     }
   }
 
-  loadMore = () => {
-    const { limit, per_page } = this.state;
-    const { location, history } = this.props;
-    const new_limit = limit + per_page;
-
-    this.setState({ limit: new_limit });
-
-    // Set our pagination to location state
-    const state = location && location.state
-      ? location.state
-      : {};
-    state.limit = new_limit;
-    history.replace({ state });
-  }
-
   removeTracks = (track_indexes) => {
     const {
       queue_tracks,
@@ -218,10 +194,6 @@ class Queue extends React.Component {
       },
     } = this.props;
 
-    const { limit } = this.state;
-    const total_queue_tracks = queue_tracks.length;
-    const tracks = queue_tracks.slice(0, limit);
-
     let current_track_image = null;
     if (current_track && current_track_uri) {
       if (current_track.images !== undefined && current_track.images) {
@@ -312,23 +284,13 @@ class Queue extends React.Component {
               show_source_icon
               track_context="queue"
               className="queue-track-list"
-              tracks={tracks}
+              tracks={queue_tracks}
               removeTracks={this.removeTracks}
               playTracks={this.playTracks}
               playTrack={this.playTrack}
               reorderTracks={this.reorderTracks}
             />
           </section>
-
-          <LazyLoadListener
-            loadKey={
-              total_queue_tracks > limit
-                ? limit
-                : total_queue_tracks
-            }
-            showLoader={limit < total_queue_tracks}
-            loadMore={this.loadMore}
-          />
         </div>
       </div>
     );

src/js/views/library/LibraryBrowseDirectory.js

@@ -59,25 +59,16 @@ class LibraryBrowseDirectory extends React.Component {
 
     this.state = {
       filter: '',
-      limit: 50,
-      per_page: 50,
     };
   }
 
   componentDidMount() {
     const {
-      location: {
-        state: {
-          limit,
-        } = {},
-      },
       uiActions: {
         setWindowTitle,
       },
     } = this.props;
 
-    if (limit) this.setState({ limit });
-
     setWindowTitle(i18n('library.browse_directory.title'));
     this.loadDirectory();
   }
@@ -101,27 +92,6 @@ class LibraryBrowseDirectory extends React.Component {
     getDirectory(uri);
   }
 
-  loadMore = () => {
-    const {
-      limit: prevLimit,
-      per_page,
-    } = this.state;
-    const {
-      history,
-      location: {
-        state: prevState = {},
-      },
-    } = this.props;
-
-    const limit = prevLimit + per_page;
-    this.setState({ limit });
-
-    history.replace({
-      ...prevState,
-      limit,
-    });
-  }
-
   playAll = () => {
     const {
       uri,
@@ -158,11 +128,7 @@ class LibraryBrowseDirectory extends React.Component {
       view,
       name,
     } = this.props;
-    const {
-      filter,
-      per_page,
-      limit,
-    } = this.state;
+    const { filter } = this.state;
 
     if (!directory || (!directory.subdirectories && !directory.tracks)) {
       if (loading) {
@@ -177,24 +143,13 @@ class LibraryBrowseDirectory extends React.Component {
       );
     }
 
-    let subdirectories = (directory.subdirectories && directory.subdirectories.length > 0 ? directory.subdirectories : null);
+    let subdirectories = directory?.subdirectories;
+    let tracks = directory?.tracks;
     subdirectories = sortItems(subdirectories, 'name');
+    tracks = sortItems(tracks, 'name');
     if (filter && filter !== '') {
       subdirectories = applyFilter('name', filter, subdirectories);
-    }
-
-    const total_items = (directory.tracks ? directory.tracks.length : 0) + (subdirectories ? subdirectories.length : 0);
-    subdirectories = subdirectories.slice(0, limit);
-    let all_tracks = null;
-    let tracks = null;
-    const limit_remaining = limit - subdirectories.length;
-    if (limit_remaining > 0 && directory.tracks && directory.tracks.length) {
-      all_tracks = directory.tracks;
-      all_tracks = sortItems(all_tracks, 'name');
-      if (filter && filter !== '') {
-        tracks = applyFilter('name', filter, tracks);
-      }
-      tracks = all_tracks.slice(0, limit_remaining);
+      tracks = applyFilter('name', filter, tracks);
     }
 
     const view_options = [
@@ -212,7 +167,7 @@ class LibraryBrowseDirectory extends React.Component {
       <>
         <FilterField
           initialValue={filter}
-          handleChange={(value) => this.setState({ filter: value, limit: per_page })}
+          handleChange={(value) => this.setState({ filter: value })}
           onSubmit={() => uiActions.hideContextMenu()}
         />
         <DropdownField
@@ -259,18 +214,10 @@ class LibraryBrowseDirectory extends React.Component {
 
             <Subdirectories items={subdirectories} view={view} />
 
-            {tracks && (
-              <TrackList
-                tracks={tracks}
-                uri={`iris:browse:${uri}`}
-                className="library-local-track-list"
-              />
-            )}
-
-            <LazyLoadListener
-              loadKey={total_items > limit ? limit : total_items}
-              showLoader={limit < total_items}
-              loadMore={this.loadMore}
+            <TrackList
+              tracks={tracks}
+              uri={`iris:browse:${uri}`}
+              className="library-local-track-list"
             />
 
           </ErrorBoundary>