Fixed: Refreshing artist/album details shows 404 until store loads

frontend/src/Album/Details/AlbumDetailsPageConnector.js

@@ -5,6 +5,8 @@ import { createSelector } from 'reselect';
 import { push } from 'connected-react-router';
 import NotFound from 'Components/NotFound';
 import { fetchAlbums, clearAlbums } from 'Store/Actions/albumActions';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import AlbumDetailsConnector from './AlbumDetailsConnector';
 
@@ -12,15 +14,16 @@ function createMapStateToProps() {
   return createSelector(
     (state, { match }) => match,
     (state) => state.albums,
-    (match, albums) => {
+    (state) => state.artist,
+    (match, albums, artist) => {
       const foreignAlbumId = match.params.foreignAlbumId;
-      const isAlbumsFetching = albums.isFetching;
+      const isFetching = albums.isFetching || artist.isFetching;
-      const isAlbumsPopulated = albums.isPopulated;
+      const isPopulated = albums.isPopulated && artist.isPopulated;
 
       return {
         foreignAlbumId,
-        isAlbumsFetching,
+        isFetching,
-        isAlbumsPopulated
+        isPopulated
       };
     }
   );
@@ -71,8 +74,8 @@ class AlbumDetailsPageConnector extends Component {
   render() {
     const {
       foreignAlbumId,
-      isAlbumsFetching,
+      isFetching,
-      isAlbumsPopulated
+      isPopulated
     } = this.props;
 
     if (!foreignAlbumId) {
@@ -83,19 +86,18 @@ class AlbumDetailsPageConnector extends Component {
       );
     }
 
-    if (isAlbumsFetching || !this.state.hasMounted) {
+    if ((isFetching || !this.state.hasMounted) ||
+        (!isFetching && !isPopulated)) {
       return (
+        <PageContent title='loading'>
+          <PageContentBodyConnector>
             <LoadingIndicator />
+          </PageContentBodyConnector>
+        </PageContent>
       );
     }
 
-    if (!isAlbumsFetching && !isAlbumsPopulated) {
+    if (!isFetching && isPopulated && this.state.hasMounted) {
-      return (
-        <LoadingIndicator />
-      );
-    }
-
-    if (!isAlbumsFetching && isAlbumsPopulated && this.state.hasMounted) {
       return (
         <AlbumDetailsConnector
           foreignAlbumId={foreignAlbumId}
@@ -111,8 +113,8 @@ AlbumDetailsPageConnector.propTypes = {
   push: PropTypes.func.isRequired,
   fetchAlbums: PropTypes.func.isRequired,
   clearAlbums: PropTypes.func.isRequired,
-  isAlbumsFetching: PropTypes.bool.isRequired,
+  isFetching: PropTypes.bool.isRequired,
-  isAlbumsPopulated: PropTypes.bool.isRequired
+  isPopulated: PropTypes.bool.isRequired
 };
 
 export default connect(createMapStateToProps, mapDispatchToProps)(AlbumDetailsPageConnector);

frontend/src/Artist/Details/ArtistDetails.css

@@ -8,6 +8,12 @@
   height: 310px;
 }
 
+.errorMessage {
+  margin-top: 20px;
+  text-align: center;
+  font-size: 20px;
+}
+
 .backdrop {
   position: absolute;
   z-index: -1;

frontend/src/Artist/Details/ArtistDetailsPageConnector.js

@@ -4,25 +4,42 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { push } from 'connected-react-router';
-import createAllArtistSelector from 'Store/Selectors/createAllArtistSelector';
+import getErrorMessage from 'Utilities/Object/getErrorMessage';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import NotFound from 'Components/NotFound';
 import ArtistDetailsConnector from './ArtistDetailsConnector';
+import styles from './ArtistDetails.css';
 
 function createMapStateToProps() {
   return createSelector(
     (state, { match }) => match,
-    createAllArtistSelector(),
+    (state) => state.artist,
-    (match, allArtists) => {
+    (match, artist) => {
       const foreignArtistId = match.params.foreignArtistId;
-      const artistIndex = _.findIndex(allArtists, { foreignArtistId });
+      const {
+        isFetching,
+        isPopulated,
+        error,
+        items
+      } = artist;
+
+      const artistIndex = _.findIndex(items, { foreignArtistId });
 
       if (artistIndex > -1) {
         return {
+          isFetching,
+          isPopulated,
           foreignArtistId
         };
       }
 
-      return {};
+      return {
+        isFetching,
+        isPopulated,
+        error
+      };
     }
   );
 }
@@ -48,9 +65,30 @@ class ArtistDetailsPageConnector extends Component {
 
   render() {
     const {
-      foreignArtistId
+      foreignArtistId,
+      isFetching,
+      isPopulated,
+      error
     } = this.props;
 
+    if (isFetching && !isPopulated) {
+      return (
+        <PageContent title='loading'>
+          <PageContentBodyConnector>
+            <LoadingIndicator />
+          </PageContentBodyConnector>
+        </PageContent>
+      );
+    }
+
+    if (!isFetching && !!error) {
+      return (
+        <div className={styles.errorMessage}>
+          {getErrorMessage(error, 'Failed to load artist from API')}
+        </div>
+      );
+    }
+
     if (!foreignArtistId) {
       return (
         <NotFound
@@ -69,6 +107,9 @@ class ArtistDetailsPageConnector extends Component {
 
 ArtistDetailsPageConnector.propTypes = {
   foreignArtistId: PropTypes.string,
+  isFetching: PropTypes.bool.isRequired,
+  isPopulated: PropTypes.bool.isRequired,
+  error: PropTypes.object,
   match: PropTypes.shape({ params: PropTypes.shape({ foreignArtistId: PropTypes.string.isRequired }).isRequired }).isRequired,
   push: PropTypes.func.isRequired
 };