Upgrading lists

src/js/views/library/LibraryAlbums.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import List from '../../components/List';
 import Header from '../../components/Header';
 import DropdownField from '../../components/Fields/DropdownField';
 import FilterField from '../../components/Fields/FilterField';
 import { Grid } from '../../components/Grid';
+import { List } from '../../components/List';
 import Icon from '../../components/Icon';
 import * as coreActions from '../../services/core/actions';
 import * as uiActions from '../../services/ui/actions';
@@ -179,13 +179,11 @@ class LibraryAlbums extends React.Component {
       return (
         <section className="content-wrapper">
           <List
-            handleContextMenu={this.handleContextMenu}
-            rows={albums}
+            items={albums}
+            details={['followers', 'listeners']}
+            right_column={['source', 'albums']}
+            className="artists"
             thumbnail
-            details={['artists']}
-            right_column={['added_at', 'tracks']}
-            className="albums"
-            link_prefix="/album/"
           />
         </section>
       );

src/js/views/library/LibraryArtists.js

@@ -2,10 +2,10 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import Header from '../../components/Header';
-import List from '../../components/List';
 import DropdownField from '../../components/Fields/DropdownField';
 import FilterField from '../../components/Fields/FilterField';
 import { Grid } from '../../components/Grid';
+import { List } from '../../components/List';
 import Icon from '../../components/Icon';
 import * as uiActions from '../../services/ui/actions';
 import * as coreActions from '../../services/core/actions';
@@ -165,13 +165,11 @@ class LibraryArtists extends React.Component {
       return (
         <section className="content-wrapper">
           <List
-            handleContextMenu={(e, item) => this.handleContextMenu(e, item)}
-            rows={artists}
-            thumbnail
+            items={artists}
             details={['followers', 'listeners']}
             right_column={['source', 'albums']}
             className="artists"
-            link_prefix="/artist/"
+            thumbnail
           />
         </section>
       );

src/js/views/library/LibraryBrowseDirectory.js

@@ -3,13 +3,12 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import Loader from '../../components/Loader';
 import Header from '../../components/Header';
-import List from '../../components/List';
 import TrackList from '../../components/TrackList';
 import { Grid } from '../../components/Grid';
+import { List } from '../../components/List';
 import DropdownField from '../../components/Fields/DropdownField';
 import FilterField from '../../components/Fields/FilterField';
 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';
@@ -43,9 +42,9 @@ const Subdirectories = ({ items, view }) => {
   if (view === 'list') {
     return (
       <List
-        rows={items}
+        items={items}
         className="library-local-directory-list"
-        link={link}
+        getLink={link}
         nocontext
       />
     );

src/js/views/library/LibraryPlaylists.js

@@ -1,14 +1,12 @@
-
 import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import Button from '../../components/Button';
 import { Grid } from '../../components/Grid';
-import List from '../../components/List';
+import { List } from '../../components/List';
 import DropdownField from '../../components/Fields/DropdownField';
 import Header from '../../components/Header';
 import FilterField from '../../components/Fields/FilterField';
-import LazyLoadListener from '../../components/LazyLoadListener';
 import Icon from '../../components/Icon';
 import * as coreActions from '../../services/core/actions';
 import * as uiActions from '../../services/ui/actions';
@@ -152,13 +150,10 @@ class LibraryPlaylists extends React.Component {
       return (
         <section className="content-wrapper">
           <List
-            handleContextMenu={(e, item) => this.handleContextMenu(e, item)}
-            rows={playlists}
+            items={playlists}
             thumbnail
             details={['owner', 'tracks', 'last_modified']}
             right_column={['source']}
-            className="playlists"
-            link_prefix="/playlist/"
           />
         </section>
       );

src/js/views/library/LibraryTracks.js

@@ -1,4 +1,3 @@
-
 import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
@@ -32,8 +31,6 @@ class LibraryTracks extends React.Component {
 
     this.state = {
       filter: '',
-      limit: 50,
-      per_page: 50,
     };
   }
 
@@ -47,13 +44,6 @@ class LibraryTracks extends React.Component {
       },
     } = this.props;
 
-    // Restore any limit defined in our location state
-    if (state.limit) {
-      this.setState({
-        limit: state.limit,
-      });
-    }
-
     setWindowTitle(i18n('library.tracks.title'));
     this.getMopidyLibrary();
     this.getSpotifyLibrary();
@@ -126,23 +116,6 @@ class LibraryTracks extends React.Component {
     });
   }
 
-  loadMore = () => {
-    const {
-      limit,
-      per_page,
-    } = this.state;
-    const {
-      location: {
-        state,
-      },
-      history,
-    } = this.props;
-
-    const new_limit = limit + per_page;
-    this.setState({ limit: new_limit });
-    history.replace({ state: { ...state, limit: new_limit } });
-  }
-
   setSort = (value) => {
     const {
       sort,