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,17 +30,18 @@ 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 (
+        isStudioAvailable ?
             <div className="studio-shell">
                 <div className="studio-info">
                     <StudioInfo />
@@ -64,17 +70,28 @@ const StudioShell = () => {
                         </Switch>
                     </div>
                 </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>