From 9097a6be49722ad28b69f5a2bfb1be2779ab12c4 Mon Sep 17 00:00:00 2001 From: Vesa Luusua Date: Thu, 23 Feb 2023 17:47:39 +0200 Subject: [PATCH] Improve error handling possibilities for PageBuilder --- src/containers/LandingPage/FallbackPage.js | 39 +++++++++++++------ src/containers/LandingPage/LandingPage.js | 21 ++++------ src/containers/PageBuilder/PageBuilder.js | 12 +++++- .../PrivacyPolicyPage/PrivacyPolicyPage.js | 19 ++++----- .../TermsOfServicePage/TermsOfServicePage.js | 20 ++++------ 5 files changed, 59 insertions(+), 52 deletions(-) diff --git a/src/containers/LandingPage/FallbackPage.js b/src/containers/LandingPage/FallbackPage.js index 0e5fa509ee..0bbfc768df 100644 --- a/src/containers/LandingPage/FallbackPage.js +++ b/src/containers/LandingPage/FallbackPage.js @@ -3,11 +3,13 @@ import PageBuilder from '../PageBuilder/PageBuilder'; import css from './FallbackPage.module.css'; // Create fallback content (array of sections) in page asset format: -export const fallbackSections = { +export const fallbackSections = error => ({ sections: [ { sectionType: 'customMaintenance', sectionId: 'maintenance-mode', + // pass possible error to SectionMaintenanceMode component + error, }, ], meta: { @@ -20,37 +22,50 @@ export const fallbackSections = { content: 'Home page fetch failed', }, }, -}; +}); // Note: this microcopy/translation does not come from translation file. // It needs to be something that is not part of fetched assets but built-in text const SectionMaintenanceMode = props => { - const { sectionId } = props; + const { sectionId, error } = props; + // 404 means that the landing-page asset was not found from the expected asset path + // which is defined in config.js + const is404 = error?.status === 404; return (
-
-

Maintenance mode

-

- The marketplace is not fully operational at the moment. Try refreshing the page and if - that does not solve the issue, contact the marketplace admins. -

-
+ {is404 ? ( +
+

Maintenance mode

+

+ The marketplace is not fully operational at the moment. +
+ Try refreshing the page and if that does not solve the issue, contact the marketplace + admins. +

+
+ ) : ( +
+

Oops, something went wrong!

+

{error?.message}

+
+ )}
); }; // This is the fallback page, in case there's no Landing Page asset defined in Console. const FallbackPage = props => { + const { error, ...rest } = props; return ( ); }; diff --git a/src/containers/LandingPage/LandingPage.js b/src/containers/LandingPage/LandingPage.js index 857a239ece..109862ca1f 100644 --- a/src/containers/LandingPage/LandingPage.js +++ b/src/containers/LandingPage/LandingPage.js @@ -2,10 +2,9 @@ import React from 'react'; import { bool, object } from 'prop-types'; import { compose } from 'redux'; import { connect } from 'react-redux'; -import { withRouter } from 'react-router-dom'; -import { injectIntl, intlShape } from '../../util/reactIntl'; import { camelize } from '../../util/string'; +import { propTypes } from '../../util/types'; import PageBuilder from '../../containers/PageBuilder/PageBuilder'; @@ -13,27 +12,27 @@ import FallbackPage from './FallbackPage'; import { ASSET_NAME } from './LandingPage.duck'; export const LandingPageComponent = props => { - const { pageAssetsData, inProgress } = props; + const { pageAssetsData, inProgress, error } = props; return ( } + error={error} + fallbackPage={} /> ); }; LandingPageComponent.propTypes = { - // from injectIntl - intl: intlShape.isRequired, pageAssetsData: object, inProgress: bool, + error: propTypes.error, }; const mapStateToProps = state => { - const { pageAssetsData, inProgress } = state.hostedAssets || {}; - return { pageAssetsData, inProgress }; + const { pageAssetsData, inProgress, error } = state.hostedAssets || {}; + return { pageAssetsData, inProgress, error }; }; // Note: it is important that the withRouter HOC is **outside** the @@ -42,10 +41,6 @@ const mapStateToProps = state => { // lifecycle hook. // // See: https://github.com/ReactTraining/react-router/issues/4671 -const LandingPage = compose( - withRouter, - connect(mapStateToProps), - injectIntl -)(LandingPageComponent); +const LandingPage = compose(connect(mapStateToProps))(LandingPageComponent); export default LandingPage; diff --git a/src/containers/PageBuilder/PageBuilder.js b/src/containers/PageBuilder/PageBuilder.js index 0acf02e93c..9ff01796fc 100644 --- a/src/containers/PageBuilder/PageBuilder.js +++ b/src/containers/PageBuilder/PageBuilder.js @@ -73,9 +73,17 @@ const getMetadata = (meta, schemaType, fieldOptions) => { * @returns page component */ const PageBuilder = props => { - const { pageAssetsData, inProgress, fallbackPage, schemaType, options, ...pageProps } = props; + const { + pageAssetsData, + inProgress, + error, + fallbackPage, + schemaType, + options, + ...pageProps + } = props; - if (!pageAssetsData && fallbackPage && !inProgress) { + if (!pageAssetsData && fallbackPage && !inProgress && error) { return fallbackPage; } diff --git a/src/containers/PrivacyPolicyPage/PrivacyPolicyPage.js b/src/containers/PrivacyPolicyPage/PrivacyPolicyPage.js index 85b6a05688..927032153c 100644 --- a/src/containers/PrivacyPolicyPage/PrivacyPolicyPage.js +++ b/src/containers/PrivacyPolicyPage/PrivacyPolicyPage.js @@ -2,10 +2,9 @@ import React from 'react'; import { bool, object } from 'prop-types'; import { compose } from 'redux'; import { connect } from 'react-redux'; -import { withRouter } from 'react-router-dom'; -import { injectIntl, intlShape } from '../../util/reactIntl'; import { camelize } from '../../util/string'; +import { propTypes } from '../../util/types'; import { H1 } from '../PageBuilder/Primitives/Heading'; import PageBuilder, { SectionBuilder } from '../../containers/PageBuilder/PageBuilder'; @@ -47,27 +46,27 @@ const PrivacyPolicyContent = props => { // Presentational component for PrivacyPolicyPage const PrivacyPolicyPageComponent = props => { - const { pageAssetsData, inProgress } = props; + const { pageAssetsData, inProgress, error } = props; return ( } /> ); }; PrivacyPolicyPageComponent.propTypes = { - // from injectIntl - intl: intlShape.isRequired, pageAssetsData: object, inProgress: bool, + error: propTypes.error, }; const mapStateToProps = state => { - const { pageAssetsData, inProgress } = state.hostedAssets || {}; - return { pageAssetsData, inProgress }; + const { pageAssetsData, inProgress, error } = state.hostedAssets || {}; + return { pageAssetsData, inProgress, error }; }; // Note: it is important that the withRouter HOC is **outside** the @@ -76,11 +75,7 @@ const mapStateToProps = state => { // lifecycle hook. // // See: https://github.com/ReactTraining/react-router/issues/4671 -const PrivacyPolicyPage = compose( - withRouter, - connect(mapStateToProps), - injectIntl -)(PrivacyPolicyPageComponent); +const PrivacyPolicyPage = compose(connect(mapStateToProps))(PrivacyPolicyPageComponent); const PRIVACY_POLICY_ASSET_NAME = ASSET_NAME; export { PRIVACY_POLICY_ASSET_NAME, PrivacyPolicyPageComponent, PrivacyPolicyContent }; diff --git a/src/containers/TermsOfServicePage/TermsOfServicePage.js b/src/containers/TermsOfServicePage/TermsOfServicePage.js index 56817ac50e..91ee32feb2 100644 --- a/src/containers/TermsOfServicePage/TermsOfServicePage.js +++ b/src/containers/TermsOfServicePage/TermsOfServicePage.js @@ -2,11 +2,9 @@ import React from 'react'; import { bool, object } from 'prop-types'; import { compose } from 'redux'; import { connect } from 'react-redux'; -import { withRouter } from 'react-router-dom'; -import config from '../../config'; -import { injectIntl, intlShape } from '../../util/reactIntl'; import { camelize } from '../../util/string'; +import { propTypes } from '../../util/types'; import { H1 } from '../PageBuilder/Primitives/Heading'; import PageBuilder, { SectionBuilder } from '../../containers/PageBuilder/PageBuilder'; @@ -48,27 +46,27 @@ const TermsOfServiceContent = props => { // Presentational component for TermsOfServicePage const TermsOfServicePageComponent = props => { - const { pageAssetsData, inProgress } = props; + const { pageAssetsData, inProgress, error } = props; return ( } /> ); }; TermsOfServicePageComponent.propTypes = { - // from injectIntl - intl: intlShape.isRequired, pageAssetsData: object, inProgress: bool, + error: propTypes.error, }; const mapStateToProps = state => { - const { pageAssetsData, inProgress } = state.hostedAssets || {}; - return { pageAssetsData, inProgress }; + const { pageAssetsData, inProgress, error } = state.hostedAssets || {}; + return { pageAssetsData, inProgress, error }; }; // Note: it is important that the withRouter HOC is **outside** the @@ -77,11 +75,7 @@ const mapStateToProps = state => { // lifecycle hook. // // See: https://github.com/ReactTraining/react-router/issues/4671 -const TermsOfServicePage = compose( - withRouter, - connect(mapStateToProps), - injectIntl -)(TermsOfServicePageComponent); +const TermsOfServicePage = compose(connect(mapStateToProps))(TermsOfServicePageComponent); const TOS_ASSET_NAME = ASSET_NAME; export { TOS_ASSET_NAME, TermsOfServicePageComponent, TermsOfServiceContent };