Tidying up load checkers

src/js/views/Album.js

@@ -213,9 +213,10 @@ class Album extends React.Component {
       filter,
     } = this.state;
 
-    if (loading) {
-      return <Loader body loading />;
-    } else if (!album) {
+    if (!album) {
+      if (loading) {
+        return <Loader body loading />;
+      }
       return (
         <ErrorMessage type="not-found" title="Not found">
           <p>
@@ -366,7 +367,7 @@ class Album extends React.Component {
 const mapStateToProps = (state, ownProps) => {
   const uri = decodeURIComponent(ownProps.match.params.uri);
   const itemSelector = makeItemSelector(uri);
-  const loadingSelector = makeLoadingSelector([`(.*)${uri}(.*)`, '^((?!contains).)*$', '^((?!me/albums).)*$']);
+  const loadingSelector = makeLoadingSelector([`(.*)${uri}(.*)`, '^((?!contains).)*$', '^((?!me\/albums).)*$']);
   return {
     uri,
     slim_mode: state.ui.slim_mode,

src/js/views/Artist.js

@@ -486,9 +486,10 @@ class Artist extends React.Component {
       history,
     } = this.props;
 
-    if (loading) {
-      return <Loader body loading />;
-    } else if (!artist) {
+    if (!artist) {
+      if (loading) {
+        return <Loader body loading />;
+      }
       return (
         <ErrorMessage type="not-found" title="Not found">
           <p>
@@ -604,7 +605,7 @@ class Artist extends React.Component {
 
 const mapStateToProps = (state, ownProps) => {
   const uri = decodeURIComponent(ownProps.match.params.uri);
-  const loadingSelector = makeLoadingSelector([`(.*)${uri}(.*)`, '^((?!contains).)*$', '^((?!/albums).)*$', '^((?!related-artists).)*$', '^((?!top-tracks).)*$']);
+  const loadingSelector = makeLoadingSelector([`(.*)${uri}(.*)`, '^((?!contains).)*$', '^((?!albums).)*$', '^((?!related-artists).)*$', '^((?!top-tracks).)*$']);
   const artistSelector = makeItemSelector(uri);
   const artist = artistSelector(state);
   let albums = null;

src/js/views/Playlist.js

@@ -499,7 +499,7 @@ const mapStateToProps = (state, ownProps) => {
 
   const uri = decodeUri(ownProps.match.params.uri);
   const itemSelector = makeItemSelector(uri);
-  const loadingSelector = makeLoadingSelector([`(.*)${uri}(?!.*(following))(.*)`]);
+  const loadingSelector = makeLoadingSelector([`(.*)${uri}(.*)`, '^((?!contains).)*$', '^((?!tracks).)*$']);
   const loadingTracksSelector = makeLoadingSelector([`(.*)${uri}(.*)tracks(.*)`]);
 
   return {

src/js/views/Track.js

@@ -228,12 +228,19 @@ class Track extends React.Component {
       loadingLyrics,
     } = this.props;
 
-    if (loading) {
-      return <Loader body loading />;
+    if (!track) {
+      if (loading) {
+        return <Loader body loading />;
+      }
+      return (
+        <ErrorMessage type="not-found" title="Not found">
+          <p>
+            {i18n('errors.uri_not_found', { uri })}
+          </p>
+        </ErrorMessage>
+      );
     }
 
-    if (!track) return null;
-
     return (
       <div className="view track-view content-wrapper">
 
@@ -328,8 +335,6 @@ const mapStateToProps = (state, ownProps) => {
   const loadingLyricsSelector = makeLoadingSelector([`^genius_(.*)lyrics_${uri}$`]);
   const trackSelector = makeItemSelector(uri);
 
-  console.debug(`^(?!genius)(.*)${uri}(.*)(?!contains)(.*)$`)
-
   return {
     uri,
     slim_mode: state.ui.slim_mode,

src/js/views/modals/EditPlaylist.js

@@ -10,6 +10,8 @@ import * as spotifyActions from '../../services/spotify/actions';
 import { uriSource } from '../../util/helpers';
 import { i18n, I18n } from '../../locale';
 import Button from '../../components/Button';
+import { decodeUri } from '../../util/format';
+import { makeItemSelector, makeLoadingSelector } from '../../util/selectors';
 
 class EditPlaylist extends React.Component {
   constructor(props) {
@@ -142,7 +144,7 @@ class EditPlaylist extends React.Component {
       image,
     } = this.state;
 
-    switch (uriSource(this.props.uri)) {
+    switch (uriSource(uri)) {
       case 'spotify':
         return (
           <div>
@@ -269,20 +271,14 @@ class EditPlaylist extends React.Component {
 }
 
 const mapStateToProps = (state, ownProps) => {
-  // Decode the URI, and then re-encode selected characters
-  // This is needed as Mopidy encodes *some* characters in playlist URIs (but not other characters)
-  // We need to retain ":" because this a reserved URI separator
-  let uri = decodeURIComponent(ownProps.match.params.uri);
-  uri = uri.replace(/\s/g, '%20');	// space
-  uri = uri.replace(/\[/g, '%5B');	// [
-  uri = uri.replace(/\]/g, '%5D');	// ]
-  uri = uri.replace(/\(/g, '%28');	// (
-  uri = uri.replace(/\)/g, '%29');	// )
-  uri = uri.replace(/\#/g, '%23');	// #
+  const uri = decodeUri(ownProps.match.params.uri);
+  const itemSelector = makeItemSelector(uri);
+  const loadingSelector = makeLoadingSelector([`(.*)${uri}(.*)`, '^((?!contains).)*$', '^((?!tracks).)*$']);
 
   return {
     uri,
-    playlist: (state.core.items[uri] !== undefined ? state.core.items[uri] : null),
+    playlist: itemSelector(state),
+    loading: loadingSelector(state),
   };
 };