Separating artist albums

src/js/util/selectors.js

@@ -4,13 +4,13 @@ import { isLoading } from './helpers';
 
 const getItems = (state) => state.core.items;
 
-const makeItemSelector = (uris) => createSelector(
+const makeItemSelector = (uriOrUris) => createSelector(
   [getItems],
   (items) => {
-    if (Array.isArray(uris)) {
-      return indexToArray(items, uris);
+    if (Array.isArray(uriOrUris)) {
+      return indexToArray(items, uriOrUris);
     }
-    return items[uris];
+    return items[uriOrUris];
   },
 );
 

src/js/views/Artist.js

@@ -162,8 +162,8 @@ class Artist extends React.Component {
     let {
       tracks,
       related_artists,
-      albums,
     } = artist;
+    let { albums } = this.props;
 
     if (sort && albums) {
       albums = sortItems(albums, sort, sort_reverse);
@@ -402,8 +402,6 @@ class Artist extends React.Component {
       history,
     } = this.props;
 
-    console.log('artist render', loading)
-
     if (loading) {
       return <Loader body loading />;
     } else if (!artist) {
@@ -525,14 +523,16 @@ const mapStateToProps = (state, ownProps) => {
   const loadingSelector = makeLoadingSelector([`(.*)${uri}(.*)`]);
   const artistSelector = makeItemSelector(uri);
   const artist = artistSelector(state);
+  let albums = [];
   if (artist && artist.albums_uris) {
     const albumsSelector = makeItemSelector(artist.albums_uris);
-    artist.albums = albumsSelector(state);
+    albums = albumsSelector(state);
   }
 
   return {
     uri,
     artist,
+    albums,
     loading: loadingSelector(state),
     theme: state.ui.theme,
     slim_mode: state.ui.slim_mode,

src/js/views/Playlist.js

@@ -27,6 +27,7 @@ import {
   decodeMopidyUri,
 } from '../util/helpers';
 import { i18n, I18n } from '../locale';
+import { makeItemSelector, makeLoadingSelector } from '../util/selectors';
 
 class Playlist extends React.Component {
   constructor(props) {
@@ -272,16 +273,14 @@ class Playlist extends React.Component {
     const {
       uri,
       playlist,
-      load_queue,
+      loading,
       slim_mode,
     } = this.props;
 
     console.log('RENDERING')
 
-    const playlist_id = getFromUri('playlistid', uri);
-
     if (!playlist) {
-      if (isLoading(load_queue, [`(.*)${playlist_id}(.*)`])) {
+      if (loading) {
         return <Loader body loading />;
       }
       return (
@@ -351,13 +350,6 @@ class Playlist extends React.Component {
 
         {this.renderActions()}
 
-        {
-          (!playlist.tracks || playlist.tracks.length <= 0)
-          && isLoading(load_queue, [`(.*)${playlist_id}/tracks(.*)`])
-          && (
-            <Loader body loading />
-          )
-        }
         <section className="list-wrapper">
           <TrackList
             uri={playlist.uri}
@@ -368,6 +360,8 @@ class Playlist extends React.Component {
             reorderTracks={this.reorderTracks}
           />
         </section>
+
+        {loading && <Loader body loading />}
       </div>
     );
   }
@@ -379,10 +373,6 @@ const mapStateToProps = (state, ownProps) => {
       allow_reporting,
       slim_mode,
       theme,
-      load_queue,
-    } = {},
-    core: {
-      items,
     } = {},
     spotify: {
       library_playlists: spotify_library_playlists,
@@ -395,14 +385,17 @@ const mapStateToProps = (state, ownProps) => {
   } = state;
 
   const uri = decodeMopidyUri(ownProps.match.params.uri);
+  const playlistId = getFromUri('playlistid', uri);
+  const itemSelector = makeItemSelector(uri);
+  const loadingSelector = makeLoadingSelector([`(.*)${playlistId}(?!.*(following))(.*)`]);
 
   return {
     uri,
     allow_reporting,
     slim_mode,
     theme,
-    load_queue,
-    playlist: items[uri],
+    loading: loadingSelector(state),
+    playlist: itemSelector(state),
     spotify_library_playlists,
     local_library_playlists,
     spotify_authorized,