accounts-frontend/packages/app/components/ui/bsod/BSoD.tsx

73 lines
1.9 KiB
TypeScript
Raw Normal View History

2016-07-29 23:25:19 +05:30
import React from 'react';
import { FormattedMessage as Message } from 'react-intl';
import logger from 'app/services/logger';
import appInfo from 'app/components/auth/appInfo/AppInfo.intl.json';
import styles from './styles.scss';
import BoxesField from './BoxesField';
import messages from './BSoD.intl.json';
2019-12-07 16:58:52 +05:30
interface State {
lastEventId?: string | void;
}
// TODO: probably it is better to render this view from the App view
// to remove dependencies from store and IntlProvider
2019-12-07 16:58:52 +05:30
class BSoD extends React.Component<{}, State> {
state: State = {};
2018-05-02 23:52:13 +05:30
componentDidMount() {
// poll for event id
const timer = setInterval(() => {
if (!logger.getLastEventId()) {
return;
}
2018-05-02 23:52:13 +05:30
clearInterval(timer);
2018-05-02 23:52:13 +05:30
this.setState({
lastEventId: logger.getLastEventId(),
});
}, 500);
}
2018-05-02 23:52:13 +05:30
render() {
const { lastEventId } = this.state;
2018-05-02 23:52:13 +05:30
let emailUrl = 'mailto:support@ely.by';
2018-05-02 23:52:13 +05:30
if (lastEventId) {
emailUrl += `?subject=Bug report for #${lastEventId}`;
}
2018-05-02 23:52:13 +05:30
return (
<div className={styles.body}>
<canvas
className={styles.canvas}
ref={(el: HTMLCanvasElement | null) => el && new BoxesField(el)}
/>
2018-05-02 23:52:13 +05:30
<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>
);
}
2016-07-29 23:25:19 +05:30
}
2019-12-07 16:58:52 +05:30
export default BSoD;