diff options
Diffstat (limited to 'src/components/services/content/WebviewErrorHandler.tsx')
-rw-r--r-- | src/components/services/content/WebviewErrorHandler.tsx | 96 |
1 files changed, 96 insertions, 0 deletions
diff --git a/src/components/services/content/WebviewErrorHandler.tsx b/src/components/services/content/WebviewErrorHandler.tsx new file mode 100644 index 000000000..b99c15006 --- /dev/null +++ b/src/components/services/content/WebviewErrorHandler.tsx | |||
@@ -0,0 +1,96 @@ | |||
1 | import { Component, ReactElement } from 'react'; | ||
2 | import { observer } from 'mobx-react'; | ||
3 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; | ||
4 | import withStyles, { WithStylesProps } from 'react-jss'; | ||
5 | import Button from '../../ui/button'; | ||
6 | import { H1 } from '../../ui/headline'; | ||
7 | |||
8 | const messages = defineMessages({ | ||
9 | headline: { | ||
10 | id: 'service.errorHandler.headline', | ||
11 | defaultMessage: 'Oh no!', | ||
12 | }, | ||
13 | text: { | ||
14 | id: 'service.errorHandler.text', | ||
15 | defaultMessage: '{name} has failed to load.', | ||
16 | }, | ||
17 | action: { | ||
18 | id: 'service.errorHandler.action', | ||
19 | defaultMessage: 'Reload {name}', | ||
20 | }, | ||
21 | editAction: { | ||
22 | id: 'service.errorHandler.editAction', | ||
23 | defaultMessage: 'Edit {name}', | ||
24 | }, | ||
25 | errorMessage: { | ||
26 | id: 'service.errorHandler.message', | ||
27 | defaultMessage: 'Error', | ||
28 | }, | ||
29 | }); | ||
30 | |||
31 | const styles = theme => ({ | ||
32 | component: { | ||
33 | left: 0, | ||
34 | position: 'absolute', | ||
35 | top: 0, | ||
36 | width: '100%', | ||
37 | zIndex: 0, | ||
38 | alignItems: 'center', | ||
39 | background: theme.colorWebviewErrorHandlerBackground, | ||
40 | display: 'flex', | ||
41 | flexDirection: 'column', | ||
42 | justifyContent: 'center', | ||
43 | textAlign: 'center', | ||
44 | }, | ||
45 | buttonContainer: { | ||
46 | display: 'flex', | ||
47 | flexDirection: 'row', | ||
48 | height: 'auto', | ||
49 | margin: [40, 0, 20], | ||
50 | |||
51 | '& button': { | ||
52 | margin: [0, 10, 0, 10], | ||
53 | }, | ||
54 | }, | ||
55 | }); | ||
56 | |||
57 | interface IProps extends WithStylesProps<typeof styles>, WrappedComponentProps { | ||
58 | name: string; | ||
59 | reload: () => void; | ||
60 | edit: () => void; | ||
61 | errorMessage: string; | ||
62 | } | ||
63 | |||
64 | @observer | ||
65 | class WebviewErrorHandler extends Component<IProps> { | ||
66 | render(): ReactElement { | ||
67 | const { name, reload, edit, errorMessage, classes, intl } = this.props; | ||
68 | |||
69 | return ( | ||
70 | <div className={classes.component}> | ||
71 | <H1>{intl.formatMessage(messages.headline)}</H1> | ||
72 | <p>{intl.formatMessage(messages.text, { name })}</p> | ||
73 | <p> | ||
74 | <strong>{intl.formatMessage(messages.errorMessage)}:</strong>{' '} | ||
75 | {errorMessage} | ||
76 | </p> | ||
77 | <div className={classes.buttonContainer}> | ||
78 | <Button | ||
79 | label={intl.formatMessage(messages.editAction, { name })} | ||
80 | buttonType="inverted" | ||
81 | onClick={() => edit()} | ||
82 | /> | ||
83 | <Button | ||
84 | label={intl.formatMessage(messages.action, { name })} | ||
85 | buttonType="inverted" | ||
86 | onClick={() => reload()} | ||
87 | /> | ||
88 | </div> | ||
89 | </div> | ||
90 | ); | ||
91 | } | ||
92 | } | ||
93 | |||
94 | export default injectIntl( | ||
95 | withStyles(styles, { injectTheme: true })(WebviewErrorHandler), | ||
96 | ); | ||