Refactor App for better ErrorHandling when i18next is not ready

imports/ui/components/ErrorBoundary/ErrorBoundary.js

@@ -4,9 +4,7 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { translate } from 'react-i18next';
 import { Row, Col } from 'react-bootstrap';
-import { withTracker } from 'meteor/react-meteor-data';
 import ravenLogger from '/imports/startup/client/ravenLogger';
 import './ErrorBoundary.scss';
 
@@ -14,7 +12,6 @@ import './ErrorBoundary.scss';
 class ErrorBoundary extends Component {
   constructor(props) {
     super(props);
-    this.t = props.t;
     this.state = { hasError: false };
   }
 
@@ -29,33 +26,41 @@ class ErrorBoundary extends Component {
   }
 
   render() {
+    const {
+      appName, title, subTitle, children
+    } = this.props;
     if (this.state.hasError) {
       // You can render any custom fallback UI
       return (
         <div className="error-boundary">
           <Row className="align-items-center justify-content-center">
             <Col xs={12} sm={6} md={5} lg={4}>
-              <h1 className="page-header">{this.t('AppNameFull')}</h1>
+              <h1 className="page-header">{appName}</h1>
-              <h4 className="page-header">{this.t('general-error-title')}</h4>
+              <h4 className="page-header">{title}</h4>
-              <p>
+              <p>{subTitle}</p>
-                {this.t('general-error-description')}
-              </p>
             </Col>
           </Row>
         </div>
       );
     }
-    return this.props.children;
+    return children;
   }
 }
 
 ErrorBoundary.propTypes = {
-  t: PropTypes.func.isRequired
+  appName: PropTypes.string,
+  title: PropTypes.string,
+  subTitle: PropTypes.string,
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node
+  ]).isRequired
 };
 
 ErrorBoundary.defaultProps = {
+  appName: 'All Against Fire!',
+  title: 'Upppps: Something has gone wrong',
+  subTitle: 'We are investigating the problem, try again in a while'
 };
 
-export default translate([], { wait: true })(withTracker(props => ({
+export default ErrorBoundary;
-  // props.something
-}))(ErrorBoundary));

imports/ui/layouts/App/App.js

@@ -37,16 +37,16 @@ import VerifyEmail from '../../pages/VerifyEmail/VerifyEmail';
 import RecoverPassword from '../../pages/RecoverPassword/RecoverPassword';
 import ResetPassword from '../../pages/ResetPassword/ResetPassword';
 import Profile from '../../pages/Profile/Profile';
-import NotFound from '../../pages/NotFound/NotFound';
-import FiresMap from '../../pages/FiresMap/FiresMap';
 import Fires from '../../pages/Fires/Fires';
 import Sandbox from '../../pages/Sandbox/Sandbox';
+import ZonesMap from '../../pages/ZonesMap/ZonesMap';
+import FiresMap from '../../pages/FiresMap/FiresMap';
+import NotFound from '../../pages/NotFound/NotFound';
 import Terms from '../../pages/Terms/Terms';
 import About from '../../pages/About/About';
 import Privacy from '../../pages/Privacy/Privacy';
 import License from '../../pages/License/License';
 import Credits from '../../pages/Credits/Credits';
-import ZonesMap from '../../pages/ZonesMap/ZonesMap';
 import Footer from '../../components/Footer/Footer';
 import Feedback from '../../components/Feedback/Feedback';
 import ReSendEmail from '../../components/ReSendEmail/ReSendEmail';
@@ -57,9 +57,6 @@ import './App.scss';
 
 class LocationListener extends Component {
   // https://stackoverflow.com/questions/43512450/react-router-v4-route-onchange-event
-  static contextTypes = {
-    router: PropTypes.object
-  };
 
   componentDidMount() {
     this.handleLocationChange(this.context.router.history.location);
@@ -75,21 +72,35 @@ class LocationListener extends Component {
     // your staff here
     console.log(`----- location: '${location.pathname}'`);
     Meteor.Piwik.trackPage(location.pathname);
-    // Meteor.isReadyForSpiderable = true;
   }
 
+  // https://stackoverflow.com/questions/39133797/react-only-return-props-children
   render() {
     return this.props.children;
   }
 }
 
+LocationListener.contextTypes = {
+  router: PropTypes.object
+};
+
+LocationListener.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node
+  ]).isRequired
+};
+
 const App = props => (
   /* https://react.i18next.com/components/i18nextprovider.html */
-  <I18nextProvider i18n={i18n}>
+  <div>
+    {props.i18nReady.get() &&
      <ErrorBoundary>
+       <I18nextProvider i18n={i18n}>
+         <ErrorBoundary appName={i18n.t('AppNameFull')} title={i18n.t('general-error-title')} subTitle={i18n.t('general-error-description')}>
            <Router history={history}>
              <LocationListener>
-        { !props.loading ?
+               { !props.loading &&
                  <div className="App">
                    <Helmet>
                      <meta charSet="utf-8" />
@@ -104,20 +115,15 @@ const App = props => (
                    <Grid>
                      <Switch>
                        <Route exact name="index" path="/" component={Index} />
-                {/* <Authenticated exact path="/documents" component={Documents} {...props} />
-                <Authenticated exact path="/documents/new" component={NewDocument} {...props} />
-                <Authenticated exact path="/documents/:_id" component={ViewDocument} {...props} />
-                <Authenticated exact path="/documents/:_id/edit" component={EditDocument} {...props} />
-                */}
                        <Authenticated exact path="/subscriptions" component={Subscriptions} {...props} />
                        <Authenticated exact path="/subscriptions/new" component={NewSubscription} {...props} />
                        <Authenticated exact path="/subscriptions/:_id" component={ViewSubscription} {...props} />
                        <Authenticated exact path="/subscriptions/:_id/edit" component={EditSubscription} {...props} />
                        <Authenticated exact path="/profile" component={Profile} {...props} />
                        <Authenticated exact path="/status" component={Status} {...props} />
-                {/* <Route path="/fires/:type(with-industries)" component={FiresMap} industries {...props} /> */}
                        <Route path="/fires" component={FiresMap} industries={false} {...props} />
                        <Route path="/zones" component={ZonesMap} {...props} />
+
                        <Route path="/fire/:type(active|archive|alert)/:id" component={Fires} {...props} />
                        <Route path="/fire/:id" component={Fires} {...props} />
                        <Public path="/auth/:token" component={Auth} {...props} />
@@ -126,7 +132,6 @@ const App = props => (
                        <Route path="/logout" component={Logout} {...props} />
                        <Route path="/sandbox" component={Sandbox} {...props} />
                        <Route path="/error" component={TestError} {...props} />
-                {/* <Route path="/subscriptions" render={props => <FireSubscription focusInput {...props} />} /> */}
 
                        <Route name="verify-email" path="/verify-email/:token" component={VerifyEmail} />
                        <Route name="recover-password" path="/recover-password" component={RecoverPassword} />
@@ -142,15 +147,15 @@ const App = props => (
                    </Grid>
                    <Footer />
                    <Reconnect {...props} />
-            <Feedback history={history} {...props} />
+                   <Feedback {...props} />
-            {props.i18nReady.get() &&
+                   {props.i18nReady.get() && <Blaze template="cookieConsent" /> }
-            <Blaze template="cookieConsent" />
+                 </div>}
-            }
-          </div> : ''}
              </LocationListener>
            </Router>
          </ErrorBoundary>
        </I18nextProvider>
+     </ErrorBoundary> }
+  </div>
 );
 
 App.defaultProps = {