From 040350314b17841a3cd953e4e594d8db402ff74a Mon Sep 17 00:00:00 2001 From: Karishma Chadha Date: Mon, 10 May 2021 11:50:10 -0400 Subject: [PATCH 1/2] Set up studios view with 404 page --- src/redux/studio.js | 15 ++++++- src/views/studio/studio.jsx | 79 ++++++++++++++++++++++--------------- 2 files changed, 61 insertions(+), 33 deletions(-) diff --git a/src/redux/studio.js b/src/redux/studio.js index bfe677399..929242866 100644 --- a/src/redux/studio.js +++ b/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 }; diff --git a/src/views/studio/studio.jsx b/src/views/studio/studio.jsx index 001fc3655..b4bbd5814 100644 --- a/src/views/studio/studio.jsx +++ b/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 ( -
-
- -
-
- -
- - - - - - - - - - - - - {/* We can force /projects back to / this way */} - - - - - - + isStudioAvailable ? +
+
+
-
-
+
+ +
+ + + + + + + + + + + + + {/* We can force /projects back to / this way */} + + + + + + +
+
+
: + ); }; +StudioShell.propTypes = { + isStudioAvailable: PropTypes.bool +}; + +const ConnectedStudioShell = connect( + state => ({ + isStudioAvailable: selectIsStudioAvailable(state) + }), +)(StudioShell); + render( {/* Use variable studioPath to support /studio-playground/ or future route */} - + From 1b2b5953386b263a8523c9edf1d89cc682980acd Mon Sep 17 00:00:00 2001 From: Karishma Chadha Date: Mon, 10 May 2021 14:01:17 -0400 Subject: [PATCH 2/2] 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 | 17 ++++------------- src/views/studio/studio.jsx | 14 +++++++------- 2 files changed, 11 insertions(+), 20 deletions(-) diff --git a/src/redux/studio.js b/src/redux/studio.js index 929242866..29cfb39b1 100644 --- a/src/redux/studio.js +++ b/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 }; diff --git a/src/views/studio/studio.jsx b/src/views/studio/studio.jsx index b4bbd5814..37ebb9517 100644 --- a/src/views/studio/studio.jsx +++ b/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 ? + :
@@ -70,18 +71,17 @@ const StudioShell = ({isStudioAvailable}) => {
-
: - + ); }; StudioShell.propTypes = { - isStudioAvailable: PropTypes.bool + studioLoadFailed: PropTypes.bool }; const ConnectedStudioShell = connect( state => ({ - isStudioAvailable: selectIsStudioAvailable(state) + studioLoadFailed: selectStudioLoadFailed(state) }), )(StudioShell);