Set up studios view with 404 page

src/redux/studio.js

@@ -26,7 +26,9 @@ const getInitialState = () => ({
     manager: false,
     curator: false,
     following: false,
-    invited: false
+    invited: false,
+    
+    studioNotAvailable: false
 });
 
 const studioReducer = (state, action) => {
@@ -51,6 +53,13 @@ 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
@@ -94,6 +103,7 @@ const selectStudioCommentsAllowed = state => state.studio.commentsAllowed;
 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) => {
@@ -159,5 +169,6 @@ module.exports = {
     selectStudioCommentsAllowed,
     selectIsFetchingInfo,
     selectIsFetchingRoles,
-    selectIsFollowing
+    selectIsFollowing,
+    selectIsStudioAvailable
 };

src/views/studio/studio.jsx

@@ -6,9 +6,14 @@ import {
     Redirect,
     useRouteMatch
 } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+
 
 import Page from '../../components/page/www/page.jsx';
 import render from '../../lib/render.jsx';
+import NotAvailable from '../../components/not-available/not-available.jsx';
+
 
 import StudioTabNav from './studio-tab-nav.jsx';
 import StudioProjects from './studio-projects.jsx';
@@ -25,56 +30,68 @@ import {
     activity
 } from './lib/redux-modules';
 
-const {getInitialState, studioReducer} = require('../../redux/studio');
+const {getInitialState, studioReducer, selectIsStudioAvailable} = 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 = () => {
+const StudioShell = ({isStudioAvailable}) => {
     const match = useRouteMatch();
 
     return (
-        <div className="studio-shell">
-            <div className="studio-info">
-                <StudioInfo />
-            </div>
-            <div className="studio-tabs">
-                <StudioTabNav />
-                <div>
-                    <Switch>
-                        <Route path={`${match.path}/curators`}>
-                            <StudioManagers />
-                            <StudioCurators />
-                        </Route>
-                        <Route path={`${match.path}/comments`}>
-                            <StudioComments />
-                        </Route>
-                        <Route path={`${match.path}/activity`}>
-                            <StudioActivity />
-                        </Route>
-                        <Route path={`${match.path}/projects`}>
-                            {/* We can force /projects back to / this way */}
-                            <Redirect to={match.url} />
-                        </Route>
-                        <Route path={match.path}>
-                            <StudioProjects />
-                        </Route>
-                    </Switch>
+        isStudioAvailable ?
+            <div className="studio-shell">
+                <div className="studio-info">
+                    <StudioInfo />
                 </div>
-            </div>
-        </div>
+                <div className="studio-tabs">
+                    <StudioTabNav />
+                    <div>
+                        <Switch>
+                            <Route path={`${match.path}/curators`}>
+                                <StudioManagers />
+                                <StudioCurators />
+                            </Route>
+                            <Route path={`${match.path}/comments`}>
+                                <StudioComments />
+                            </Route>
+                            <Route path={`${match.path}/activity`}>
+                                <StudioActivity />
+                            </Route>
+                            <Route path={`${match.path}/projects`}>
+                                {/* We can force /projects back to / this way */}
+                                <Redirect to={match.url} />
+                            </Route>
+                            <Route path={match.path}>
+                                <StudioProjects />
+                            </Route>
+                        </Switch>
+                    </div>
+                </div>
+            </div> :
+            <NotAvailable />
     );
 };
 
+StudioShell.propTypes = {
+    isStudioAvailable: PropTypes.bool
+};
+
+const ConnectedStudioShell = connect(
+    state => ({
+        isStudioAvailable: selectIsStudioAvailable(state)
+    }),
+)(StudioShell);
+
 render(
     <Page className="studio-page">
         <Router>
             <Switch>
                 {/* Use variable studioPath to support /studio-playground/ or future route */}
                 <Route path="/:studioPath/:studioId">
-                    <StudioShell />
+                    <ConnectedStudioShell />
                 </Route>
             </Switch>
         </Router>