Merge pull request #5370 from kchadha/studio-404-page

Set up studios view with 404 page
This commit is contained in:
Karishma Chadha 2021-05-10 17:49:30 -04:00 committed by GitHub
commit a9d70b2cc0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 49 additions and 30 deletions

View file

@ -91,6 +91,7 @@ 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;
@ -157,6 +158,7 @@ module.exports = {
selectStudioImage,
selectStudioOpenToAll,
selectStudioCommentsAllowed,
selectStudioLoadFailed,
selectIsFetchingInfo,
selectIsFetchingRoles,
selectIsFollowing

View file

@ -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, 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 = () => {
const StudioShell = ({studioLoadFailed}) => {
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>
studioLoadFailed ?
<NotAvailable /> :
<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>
</div>
</div>
</div>
</div>
);
};
StudioShell.propTypes = {
studioLoadFailed: PropTypes.bool
};
const ConnectedStudioShell = connect(
state => ({
studioLoadFailed: selectStudioLoadFailed(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>