diff options
author | Stefan Malzner <stefan@adlk.io> | 2018-12-09 13:24:17 +0100 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2018-12-09 13:24:17 +0100 |
commit | 898d54cd0034bbb2727bc5b5eaf9d5a4f2a852de (patch) | |
tree | 9816c013f9a9453dae07d9dd8d4a862c77c23064 /src/components/util | |
parent | Upgrade to react 16 (diff) | |
download | ferdium-app-898d54cd0034bbb2727bc5b5eaf9d5a4f2a852de.tar.gz ferdium-app-898d54cd0034bbb2727bc5b5eaf9d5a4f2a852de.tar.zst ferdium-app-898d54cd0034bbb2727bc5b5eaf9d5a4f2a852de.zip |
Add React 16 didCatch/ErrorBoundary component
Diffstat (limited to 'src/components/util')
-rw-r--r-- | src/components/util/ErrorBoundary/index.js | 54 | ||||
-rw-r--r-- | src/components/util/ErrorBoundary/styles.js | 13 |
2 files changed, 67 insertions, 0 deletions
diff --git a/src/components/util/ErrorBoundary/index.js b/src/components/util/ErrorBoundary/index.js new file mode 100644 index 000000000..def01c74f --- /dev/null +++ b/src/components/util/ErrorBoundary/index.js | |||
@@ -0,0 +1,54 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import injectSheet from 'react-jss'; | ||
3 | import { defineMessages, intlShape } from 'react-intl'; | ||
4 | |||
5 | import Button from '../../ui/Button'; | ||
6 | |||
7 | import styles from './styles'; | ||
8 | |||
9 | const messages = defineMessages({ | ||
10 | headline: { | ||
11 | id: 'app.errorHandler.headline', | ||
12 | defaultMessage: '!!!Something went wrong.', | ||
13 | }, | ||
14 | action: { | ||
15 | id: 'app.errorHandler.action', | ||
16 | defaultMessage: '!!!Reload', | ||
17 | }, | ||
18 | }); | ||
19 | |||
20 | export default @injectSheet(styles) class ErrorBoundary extends Component { | ||
21 | state = { | ||
22 | hasError: false, | ||
23 | } | ||
24 | |||
25 | static contextTypes = { | ||
26 | intl: intlShape, | ||
27 | }; | ||
28 | |||
29 | componentDidCatch(error, info) { | ||
30 | this.setState({ hasError: true }); | ||
31 | } | ||
32 | |||
33 | render() { | ||
34 | const { classes } = this.props; | ||
35 | const { intl } = this.context; | ||
36 | |||
37 | if (this.state.hasError) { | ||
38 | return ( | ||
39 | <div className={classes.component}> | ||
40 | <h1 className={classes.title}> | ||
41 | {intl.formatMessage(messages.headline)} | ||
42 | </h1> | ||
43 | <Button | ||
44 | label={intl.formatMessage(messages.action)} | ||
45 | buttonType="inverted" | ||
46 | onClick={() => location.reload()} | ||
47 | /> | ||
48 | </div> | ||
49 | ); | ||
50 | } | ||
51 | |||
52 | return this.props.children; | ||
53 | } | ||
54 | } \ No newline at end of file | ||
diff --git a/src/components/util/ErrorBoundary/styles.js b/src/components/util/ErrorBoundary/styles.js new file mode 100644 index 000000000..8d62767f6 --- /dev/null +++ b/src/components/util/ErrorBoundary/styles.js | |||
@@ -0,0 +1,13 @@ | |||
1 | export default (theme) => ({ | ||
2 | component: { | ||
3 | display: 'flex', | ||
4 | width: '100%', | ||
5 | alignItems: 'center', | ||
6 | justifyContent: 'center', | ||
7 | flexDirection: 'column', | ||
8 | }, | ||
9 | title: { | ||
10 | fontSize: 20, | ||
11 | color: theme.colorText, | ||
12 | } | ||
13 | }); | ||