accounts-frontend/src/components/ui/bsod/BSoD.js

75 lines
2.3 KiB
JavaScript
Raw Normal View History

// @flow
2016-07-29 23:25:19 +05:30
import React from 'react';
import { FormattedMessage as Message } from 'react-intl';
import { IntlProvider } from 'components/i18n';
2018-05-02 23:52:13 +05:30
import logger from 'services/logger';
import appInfo from 'components/auth/appInfo/AppInfo.intl.json';
import styles from './styles.scss';
import BoxesField from './BoxesField';
import messages from './BSoD.intl.json';
// TODO: probably it is better to render this view from the App view
// to remove dependencies from store and IntlProvider
2018-05-02 23:52:13 +05:30
export default class BSoD extends React.Component<{
store: Object
}, {
lastEventId?: string,
}> {
state = {};
componentDidMount() {
// poll for event id
const timer = setInterval(() => {
if (!logger.getLastEventId()) {
return;
}
clearInterval(timer);
this.setState({
lastEventId: logger.getLastEventId()
});
}, 500);
}
render() {
const {store} = this.props;
const {lastEventId} = this.state;
let emailUrl = 'mailto:support@ely.by';
if (lastEventId) {
emailUrl += `?subject=Bug report for #${lastEventId}`;
}
return (
<IntlProvider store={store}>
<div className={styles.body}>
<canvas className={styles.canvas}
ref={(el: ?HTMLCanvasElement) => el && new BoxesField(el)}
/>
<div className={styles.wrapper}>
<div className={styles.title}>
<Message {...appInfo.appName} />
</div>
<div className={styles.lineWithMargin}>
<Message {...messages.criticalErrorHappened} />
</div>
<div className={styles.line}>
<Message {...messages.reloadPageOrContactUs} />
</div>
<a href={emailUrl} className={styles.support}>
support@ely.by
</a>
<div className={styles.easterEgg}>
<Message {...messages.alsoYouCanInteractWithBackground}/>
</div>
</div>
</div>
2018-05-02 23:52:13 +05:30
</IntlProvider>
);
}
2016-07-29 23:25:19 +05:30
}