Get rid of extra piece of state being tracked in redux and update selector to tell if studio load failed. Use that to display 404 page instead.

src/redux/studio.js

@@ -26,9 +26,7 @@ const getInitialState = () => ({
     manager: false,
     curator: false,
     following: false,
-    invited: false,
-    
-    studioNotAvailable: false
+    invited: false
 });
 
 const studioReducer = (state, action) => {
@@ -53,13 +51,6 @@ const studioReducer = (state, action) => {
         if (action.error) {
             log.error(action.error);
         }
-        if (action.fetchType === 'infoStatus' && action.fetchStatus === Status.ERROR) {
-            return {
-                ...state,
-                [action.fetchType]: action.fetchStatus,
-                studioNotAvailable: true
-            };
-        }
         return {
             ...state,
             [action.fetchType]: action.fetchStatus
@@ -100,10 +91,10 @@ const selectStudioDescription = state => state.studio.description;
 const selectStudioImage = state => state.studio.image;
 const selectStudioOpenToAll = state => state.studio.openToAll;
 const selectStudioCommentsAllowed = state => state.studio.commentsAllowed;
+const selectStudioLoadFailed = state => state.studio.infoStatus === Status.ERROR;
 const selectIsFetchingInfo = state => state.studio.infoStatus === Status.FETCHING;
 const selectIsFollowing = state => state.studio.following;
 const selectIsFetchingRoles = state => state.studio.rolesStatus === Status.FETCHING;
-const selectIsStudioAvailable = state => !state.studio.studioNotAvailable;
 
 // Thunks
 const getInfo = () => ((dispatch, getState) => {
@@ -167,8 +158,8 @@ module.exports = {
     selectStudioImage,
     selectStudioOpenToAll,
     selectStudioCommentsAllowed,
+    selectStudioLoadFailed,
     selectIsFetchingInfo,
     selectIsFetchingRoles,
-    selectIsFollowing,
-    selectIsStudioAvailable
+    selectIsFollowing
 };

src/views/studio/studio.jsx

@@ -30,18 +30,19 @@ import {
     activity
 } from './lib/redux-modules';
 
-const {getInitialState, studioReducer, selectIsStudioAvailable} = require('../../redux/studio');
+const {getInitialState, studioReducer, selectStudioLoadFailed} = require('../../redux/studio');
 const {studioReportReducer} = require('../../redux/studio-report');
 const {commentsReducer} = require('../../redux/comments');
 const {studioMutationsReducer} = require('../../redux/studio-mutations');
 
 import './studio.scss';
 
-const StudioShell = ({isStudioAvailable}) => {
+const StudioShell = ({studioLoadFailed}) => {
     const match = useRouteMatch();
 
     return (
-        isStudioAvailable ?
+        studioLoadFailed ?
+            <NotAvailable /> :
             <div className="studio-shell">
                 <div className="studio-info">
                     <StudioInfo />
@@ -70,18 +71,17 @@ const StudioShell = ({isStudioAvailable}) => {
                         </Switch>
                     </div>
                 </div>
-            </div> :
-            <NotAvailable />
+            </div>
     );
 };
 
 StudioShell.propTypes = {
-    isStudioAvailable: PropTypes.bool
+    studioLoadFailed: PropTypes.bool
 };
 
 const ConnectedStudioShell = connect(
     state => ({
-        isStudioAvailable: selectIsStudioAvailable(state)
+        studioLoadFailed: selectStudioLoadFailed(state)
     }),
 )(StudioShell);