comunes/todos-contra-el-fuego-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor App for better ErrorHandling when i18next is not ready

Browse source
This commit is contained in:
vjrj 2018-03-03 11:41:43 +01:00
parent e175762c4e
commit dfd31e69ca
2 changed files with 93 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

31
imports/ui/components/ErrorBoundary/ErrorBoundary.js
View file

@ -4,9 +4,7 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { translate } from 'react-i18next';
import { Row, Col } from 'react-bootstrap'; import { Row, Col } from 'react-bootstrap';
import { withTracker } from 'meteor/react-meteor-data';
import ravenLogger from '/imports/startup/client/ravenLogger'; import ravenLogger from '/imports/startup/client/ravenLogger';
import './ErrorBoundary.scss'; import './ErrorBoundary.scss';
@ -14,7 +12,6 @@ import './ErrorBoundary.scss';
class ErrorBoundary extends Component { class ErrorBoundary extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.t = props.t;
this.state = { hasError: false }; this.state = { hasError: false };
} }
@ -29,33 +26,41 @@ class ErrorBoundary extends Component {
} }
render() { render() {
const {
appName, title, subTitle, children
} = this.props;
if (this.state.hasError) { if (this.state.hasError) {
// You can render any custom fallback UI // You can render any custom fallback UI
return ( return (
<div className="error-boundary"> <div className="error-boundary">
<Row className="align-items-center justify-content-center"> <Row className="align-items-center justify-content-center">
<Col xs={12} sm={6} md={5} lg={4}> <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> </Col>
</Row> </Row>
</div> </div>
); );
} }
return this.props.children; return children;
} }
} }
ErrorBoundary.propTypes = { 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 = { 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));

145
imports/ui/layouts/App/App.js
View file

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