Skip to content
Snippets Groups Projects
Commit 924c2aef authored by chrisgarrity's avatar chrisgarrity
Browse files

Make Error Boundary into HOC

Don’t translate IE error modal, if there are errors during the `connect` process the `IntlProvider` doesn’t get set up and the error modal can’t be shown.
parent a569a170
Branches
Tags
No related merge requests found
......@@ -2,7 +2,6 @@ import PropTypes from 'prop-types';
import React from 'react';
import ReactModal from 'react-modal';
import Box from '../box/box.jsx';
import {defineMessages, injectIntl, intlShape, FormattedMessage} from 'react-intl';
import styles from './browser-modal.css';
......@@ -18,16 +17,14 @@ const BrowserModal = ({intl, ...props}) => (
<ReactModal
isOpen
className={styles.modalContent}
contentLabel={intl.formatMessage({...messages.label})}
contentLabel="Internet Explorer is not supported"
overlayClassName={styles.modalOverlay}
onRequestClose={props.onBack}
>
<Box className={styles.illustration} />
<Box className={styles.body}>
<h2>
<FormattedMessage {...messages.label} />
</h2>
<h2>Internet Explorer is not supported</h2>
<p>
{ /* eslint-disable max-len */ }
<FormattedMessage
......@@ -43,42 +40,25 @@ const BrowserModal = ({intl, ...props}) => (
className={styles.backButton}
onClick={props.onBack}
>
<FormattedMessage
defaultMessage="Back"
description="Label for button go back when browser is unsupported"
id="gui.unsupportedBrowser.back"
/>
Back
</button>
</Box>
<div className={styles.faqLinkText}>
<FormattedMessage
defaultMessage="To learn more, go to the {previewFaqLink}."
description="Scratch 3.0 FAQ description"
id="gui.unsupportedBrowser.previewfaq"
values={{
previewFaqLink: (
<a
className={styles.faqLink}
href="//scratch.mit.edu/preview-faq"
>
<FormattedMessage
defaultMessage="preview FAQ"
description="link to Scratch 3.0 FAQ page"
id="gui.unsupportedBrowser.previewfaqlink"
/>
</a>
)
}}
/>
To learn more, go to the {' '}
<a
className={styles.faqLink}
href="//scratch.mit.edu/preview-faq"
>
preview FAQ
</a>.
</div>
</Box>
</ReactModal>
);
BrowserModal.propTypes = {
intl: intlShape.isRequired,
onBack: PropTypes.func.isRequired
};
export default injectIntl(BrowserModal);
export default BrowserModal;
import React from 'react';
import ErrorBoundary from '../containers/error-boundary.jsx';
/*
* Higher Order Component to provide error boundary for wrapped component
* @param {React.Component} WrappedComponent - component to provide state for
* @returns {React.Component} component with error boundary
*/
const ErrorBoundaryHOC = function (WrappedComponent) {
const ErrorBoundaryWrapper = props => (
<ErrorBoundary>
<WrappedComponent {...props} />
</ErrorBoundary>
);
return ErrorBoundaryWrapper;
};
export default ErrorBoundaryHOC;
......@@ -6,7 +6,7 @@ import Modal from 'react-modal';
import analytics from '../lib/analytics';
import GUI from '../containers/gui.jsx';
import ProjectLoaderHOC from './project-loader-hoc.jsx';
import ErrorBoundary from '../containers/error-boundary.jsx';
import ErrorBoundaryHOC from './error-boundary-hoc.jsx';
import styles from './index.css';
......@@ -18,13 +18,7 @@ if (process.env.NODE_ENV === 'production' && typeof window === 'object') {
// Register "base" page view
analytics.pageview('/');
const ErrorWrappedGUI = props => (
<ErrorBoundary>
<GUI {...props} />
</ErrorBoundary>
);
const App = ProjectLoaderHOC(ErrorWrappedGUI);
const App = ProjectLoaderHOC(ErrorBoundaryHOC(GUI));
const appTarget = document.createElement('div');
appTarget.className = styles.app;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment