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.

src/components/browser-modal/browser-modal.jsx

@@ -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;

src/playground/error-boundary-hoc.jsx

@@ -0,0 +1,18 @@
+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;

src/playground/index.jsx

@@ -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;