Commit 04035031 authored by Karishma Chadha's avatar Karishma Chadha

Set up studios view with 404 page

parent dbec1c7a
...@@ -26,7 +26,9 @@ const getInitialState = () => ({ ...@@ -26,7 +26,9 @@ const getInitialState = () => ({
manager: false, manager: false,
curator: false, curator: false,
following: false, following: false,
invited: false invited: false,
studioNotAvailable: false
}); });
const studioReducer = (state, action) => { const studioReducer = (state, action) => {
...@@ -51,6 +53,13 @@ const studioReducer = (state, action) => { ...@@ -51,6 +53,13 @@ const studioReducer = (state, action) => {
if (action.error) { if (action.error) {
log.error(action.error); log.error(action.error);
} }
if (action.fetchType === 'infoStatus' && action.fetchStatus === Status.ERROR) {
return {
...state,
[action.fetchType]: action.fetchStatus,
studioNotAvailable: true
};
}
return { return {
...state, ...state,
[action.fetchType]: action.fetchStatus [action.fetchType]: action.fetchStatus
...@@ -94,6 +103,7 @@ const selectStudioCommentsAllowed = state => state.studio.commentsAllowed; ...@@ -94,6 +103,7 @@ const selectStudioCommentsAllowed = state => state.studio.commentsAllowed;
const selectIsFetchingInfo = state => state.studio.infoStatus === Status.FETCHING; const selectIsFetchingInfo = state => state.studio.infoStatus === Status.FETCHING;
const selectIsFollowing = state => state.studio.following; const selectIsFollowing = state => state.studio.following;
const selectIsFetchingRoles = state => state.studio.rolesStatus === Status.FETCHING; const selectIsFetchingRoles = state => state.studio.rolesStatus === Status.FETCHING;
const selectIsStudioAvailable = state => !state.studio.studioNotAvailable;
// Thunks // Thunks
const getInfo = () => ((dispatch, getState) => { const getInfo = () => ((dispatch, getState) => {
...@@ -159,5 +169,6 @@ module.exports = { ...@@ -159,5 +169,6 @@ module.exports = {
selectStudioCommentsAllowed, selectStudioCommentsAllowed,
selectIsFetchingInfo, selectIsFetchingInfo,
selectIsFetchingRoles, selectIsFetchingRoles,
selectIsFollowing selectIsFollowing,
selectIsStudioAvailable
}; };
...@@ -6,9 +6,14 @@ import { ...@@ -6,9 +6,14 @@ import {
Redirect, Redirect,
useRouteMatch useRouteMatch
} from 'react-router-dom'; } from 'react-router-dom';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import Page from '../../components/page/www/page.jsx'; import Page from '../../components/page/www/page.jsx';
import render from '../../lib/render.jsx'; import render from '../../lib/render.jsx';
import NotAvailable from '../../components/not-available/not-available.jsx';
import StudioTabNav from './studio-tab-nav.jsx'; import StudioTabNav from './studio-tab-nav.jsx';
import StudioProjects from './studio-projects.jsx'; import StudioProjects from './studio-projects.jsx';
...@@ -25,56 +30,68 @@ import { ...@@ -25,56 +30,68 @@ import {
activity activity
} from './lib/redux-modules'; } from './lib/redux-modules';
const {getInitialState, studioReducer} = require('../../redux/studio'); const {getInitialState, studioReducer, selectIsStudioAvailable} = require('../../redux/studio');
const {studioReportReducer} = require('../../redux/studio-report'); const {studioReportReducer} = require('../../redux/studio-report');
const {commentsReducer} = require('../../redux/comments'); const {commentsReducer} = require('../../redux/comments');
const {studioMutationsReducer} = require('../../redux/studio-mutations'); const {studioMutationsReducer} = require('../../redux/studio-mutations');
import './studio.scss'; import './studio.scss';
const StudioShell = () => { const StudioShell = ({isStudioAvailable}) => {
const match = useRouteMatch(); const match = useRouteMatch();
return ( return (
<div className="studio-shell"> isStudioAvailable ?
<div className="studio-info"> <div className="studio-shell">
<StudioInfo /> <div className="studio-info">
</div> <StudioInfo />
<div className="studio-tabs"> </div>
<StudioTabNav /> <div className="studio-tabs">
<div> <StudioTabNav />
<Switch> <div>
<Route path={`${match.path}/curators`}> <Switch>
<StudioManagers /> <Route path={`${match.path}/curators`}>
<StudioCurators /> <StudioManagers />
</Route> <StudioCurators />
<Route path={`${match.path}/comments`}> </Route>
<StudioComments /> <Route path={`${match.path}/comments`}>
</Route> <StudioComments />
<Route path={`${match.path}/activity`}> </Route>
<StudioActivity /> <Route path={`${match.path}/activity`}>
</Route> <StudioActivity />
<Route path={`${match.path}/projects`}> </Route>
{/* We can force /projects back to / this way */} <Route path={`${match.path}/projects`}>
<Redirect to={match.url} /> {/* We can force /projects back to / this way */}
</Route> <Redirect to={match.url} />
<Route path={match.path}> </Route>
<StudioProjects /> <Route path={match.path}>
</Route> <StudioProjects />
</Switch> </Route>
</Switch>
</div>
</div> </div>
</div> </div> :
</div> <NotAvailable />
); );
}; };
StudioShell.propTypes = {
isStudioAvailable: PropTypes.bool
};
const ConnectedStudioShell = connect(
state => ({
isStudioAvailable: selectIsStudioAvailable(state)
}),
)(StudioShell);
render( render(
<Page className="studio-page"> <Page className="studio-page">
<Router> <Router>
<Switch> <Switch>
{/* Use variable studioPath to support /studio-playground/ or future route */} {/* Use variable studioPath to support /studio-playground/ or future route */}
<Route path="/:studioPath/:studioId"> <Route path="/:studioPath/:studioId">
<StudioShell /> <ConnectedStudioShell />
</Route> </Route>
</Switch> </Switch>
</Router> </Router>
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment