bigbluebutton-Github/bigbluebutton-html5/imports/ui/components/fallback-errors/fallback-view/component.jsx

65 lines
1.6 KiB
JavaScript

import React from 'react';
import { defineMessages, injectIntl } from 'react-intl';
import PropTypes from 'prop-types';
import Button from '/imports/ui/components/button/component';
import { styles } from './styles';
const intlMessages = defineMessages({
title: {
id: 'app.error.fallback.view.title',
description: 'title for presentation when fallback is showed',
},
description: {
id: 'app.error.fallback.view.description',
description: 'description for presentation when fallback is showed',
},
reloadButton: {
id: 'app.error.fallback.view.reloadButton',
description: 'Button label when fallback is showed',
},
});
const propTypes = {
intl: PropTypes.shape({
formatMessage: PropTypes.func.isRequired,
}).isRequired,
error: PropTypes.shape({
message: PropTypes.string.isRequired,
}),
};
const defaultProps = {
error: {
message: '',
},
};
const FallbackView = ({ error, intl }) => (
<div className={styles.background}>
<h1 className={styles.codeError}>
{intl.formatMessage(intlMessages.title)}
</h1>
<h1 className={styles.message}>
{intl.formatMessage(intlMessages.description)}
</h1>
<div className={styles.separator} />
<div className={styles.sessionMessage}>
{error.message}
</div>
<div>
<Button
size="sm"
color="primary"
className={styles.button}
onClick={() => window.location.reload()}
label={intl.formatMessage(intlMessages.reloadButton)}
/>
</div>
</div>
);
FallbackView.propTypes = propTypes;
FallbackView.defaultProps = defaultProps;
export default injectIntl(FallbackView);