Preserving loaded directory's URI for matching on render

src/js/views/library/LibraryBrowse.js

@@ -1,15 +1,16 @@
-
 import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import Header from '../../components/Header';
 import GridItem from '../../components/GridItem';
+import Loader from '../../components/Loader';
 import Icon from '../../components/Icon';
 import ErrorBoundary from '../../components/ErrorBoundary';
 import * as uiActions from '../../services/ui/actions';
 import * as mopidyActions from '../../services/mopidy/actions';
 import { formatImages, encodeUri } from '../../util/format';
 import { I18n, i18n } from '../../locale';
+import { makeLoadingSelector } from '../../util/selectors';
 
 class LibraryBrowse extends React.Component {
   componentDidMount() {
@@ -27,10 +28,23 @@ class LibraryBrowse extends React.Component {
     getDirectory(null);
   }
 
-  render() {
+  render = () => {
+    const {
+      loading,
+      directory,
+      mopidyActions,
+    } = this.props;
+
+    if (!directory) {
+      if (loading) {
+        return <Loader body loading />;
+      }
+      return null;
+    }
+
     const grid_items = [];
-    if (this.props.directory) {
-      for (const subdirectory of this.props.directory.subdirectories) {
+    if (directory.subdirectories) {
+      for (const subdirectory of directory.subdirectories) {
         switch (subdirectory.name) {
           case 'Dirble':
             subdirectory.icons = ['/iris/assets/backgrounds/browse-dirble.jpg'];
@@ -101,7 +115,7 @@ class LibraryBrowse extends React.Component {
       <div className="view library-local-view">
         <Header>
           <Icon name="folder" type="material" />
-					<I18n path="library.browse.title" />
+          <I18n path="library.browse.title" />
         </Header>
         <section className="content-wrapper">
           <div className="grid grid--tiles">
@@ -113,7 +127,7 @@ class LibraryBrowse extends React.Component {
                       item={item}
                       key={index}
                       link={item.link}
-                      mopidyActions={this.props.mopidyActions}
+                      mopidyActions={mopidyActions}
                       type="browse"
                     />
 								  ),
@@ -127,11 +141,24 @@ class LibraryBrowse extends React.Component {
   }
 }
 
-const mapStateToProps = (state) => ({
-  load_queue: state.ui.load_queue,
-  directory: state.mopidy.directory,
-  view: state.ui.library_directory_view,
-});
+const mapStateToProps = (state) => {
+  const {
+    mopidy: {
+      directory: _directory = {},
+    },
+    ui: {
+      library_directory_view: view,
+    },
+  } = state;
+  const directory = _directory && _directory.uri === null ? _directory : null;
+  const loadingSelector = makeLoadingSelector(['(.*)mopidy_library.browse(.*)']);
+
+  return {
+    loading: loadingSelector(state),
+    directory,
+    view,
+  };
+};
 
 const mapDispatchToProps = (dispatch) => ({
   uiActions: bindActionCreators(uiActions, dispatch),

src/js/views/library/LibraryBrowseDirectory.js

@@ -15,13 +15,12 @@ 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';
-import {
-  isLoading,
-} from '../../util/helpers';
 import { arrayOf, sortItems, applyFilter } from '../../util/arrays';
 import { i18n, I18n } from '../../locale';
 import Button from '../../components/Button';
-import { encodeUri } from '../../util/format';
+import { encodeUri, decodeUri } from '../../util/format';
+import { makeLoadingSelector } from '../../util/selectors';
+import ErrorMessage from '../../components/ErrorMessage';
 
 class LibraryBrowseDirectory extends React.Component {
   constructor(props) {
@@ -168,8 +167,8 @@ class LibraryBrowseDirectory extends React.Component {
     const {
       uri,
       directory,
-      load_queue,
       uiActions,
+      loading,
       view,
     } = this.props;
     const {
@@ -180,12 +179,16 @@ class LibraryBrowseDirectory extends React.Component {
 
     let title = i18n('library.browse_directory.title');
 
-    if (!directory || isLoading(load_queue, ['mopidy_browse'])) {
+    if (!directory || (!directory.subdirectories && !directory.tracks)) {
+      if (loading) {
+        return <Loader body loading />;
+      }
       return (
-        <div className="view library-local-view">
-          <Header icon="music" title={title} uiActions={uiActions} />
-          <Loader body loading />
-        </div>
+        <ErrorMessage type="not-found" title="Not found">
+          <p>
+            <I18n path="errors.uri_not_found" uri={uri} />
+          </p>
+        </ErrorMessage>
       );
     }
 
@@ -302,23 +305,26 @@ class LibraryBrowseDirectory 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 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, '%26');		// &
-  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 {
+    mopidy: {
+      directory: _directory = {},
+    },
+    ui: {
+      library_directory_view: view,
+    },
+  } = state;
+  const uri = decodeUri(ownProps.match.params.uri);
+  const uriMatcher = [uri, decodeURIComponent(uri)]; // Lenient matching due to encoding diffs
+  const directory = _directory && uriMatcher.includes(_directory.uri)
+    ? _directory
+    : undefined;
+  const loadingSelector = makeLoadingSelector(['mopidy_library.(browse|lookup)']);
 
   return {
     uri,
-    load_queue: state.ui.load_queue,
-    directory: state.mopidy.directory,
-    view: state.ui.library_directory_view,
+    loading: loadingSelector(state),
+    directory,
+    view,
   };
 };