Spaces:
Running
Running
File size: 2,462 Bytes
6bcb42f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
import PropTypes from 'prop-types';
import React from 'react';
import Box from '../box/box.jsx';
import {FormattedMessage} from 'react-intl';
import styles from './crash-message.css';
import reloadIcon from './reload.svg';
const CrashMessage = props => (
<div className={styles.crashWrapper}>
<Box className={styles.body}>
<img
className={styles.reloadIcon}
src={reloadIcon}
/>
<p className={styles.header}>
<FormattedMessage
defaultMessage="Oops! Something went wrong."
description="Crash Message title"
id="gui.crashMessage.label"
/>
</p>
<p>
<FormattedMessage
defaultMessage={'We are so sorry, but it looks like the page has crashed.' +
' Please refresh your page to try' +
' again.' +
' If the problem persists, please report this error to our Discord.'}
description="Message to inform the user that page has crashed."
id="tw.gui.crashMessage.description"
/>
</p>
{props.errorMessage && (
<p className={styles.errorMessage}>
{props.errorMessage}
</p>
)}
{props.eventId && (
<p>
<FormattedMessage
defaultMessage="Your error was logged with id {errorId}"
description="Message to inform the user that page has crashed."
id="gui.crashMessage.errorNumber"
values={{
errorId: props.eventId
}}
/>
</p>
)}
<button
className={styles.reloadButton}
onClick={props.onReload}
>
<FormattedMessage
defaultMessage="Reload"
description="Button to reload the page when page crashes"
id="gui.crashMessage.reload"
/>
</button>
</Box>
</div>
);
CrashMessage.propTypes = {
eventId: PropTypes.string,
errorMessage: PropTypes.string,
onReload: PropTypes.func.isRequired
};
export default CrashMessage;
|