diff options
author | 2022-06-27 22:27:27 +0200 | |
---|---|---|
committer | 2022-06-28 04:32:53 +0530 | |
commit | 8715d489b58534470fc0d35b5961797bc0118e84 (patch) | |
tree | 563d81196d6026945ad1898bda76e078eb2a5d82 /src/components/util/ErrorBoundary/index.tsx | |
parent | chore: transform containers/settings from js to tsx (#384) (diff) | |
download | ferdium-app-8715d489b58534470fc0d35b5961797bc0118e84.tar.gz ferdium-app-8715d489b58534470fc0d35b5961797bc0118e84.tar.zst ferdium-app-8715d489b58534470fc0d35b5961797bc0118e84.zip |
chore: turn error boundary into typescript
Diffstat (limited to 'src/components/util/ErrorBoundary/index.tsx')
-rw-r--r-- | src/components/util/ErrorBoundary/index.tsx | 59 |
1 files changed, 59 insertions, 0 deletions
diff --git a/src/components/util/ErrorBoundary/index.tsx b/src/components/util/ErrorBoundary/index.tsx new file mode 100644 index 000000000..846d6dc3f --- /dev/null +++ b/src/components/util/ErrorBoundary/index.tsx | |||
@@ -0,0 +1,59 @@ | |||
1 | import { Component, ReactNode } from 'react'; | ||
2 | import withStyles, { WithStylesProps } from 'react-jss'; | ||
3 | import { defineMessages, injectIntl, IntlShape } from 'react-intl'; | ||
4 | |||
5 | import Button from '../../ui/button'; | ||
6 | import { H1 } from '../../ui/headline'; | ||
7 | |||
8 | import styles from './styles'; | ||
9 | |||
10 | const messages = defineMessages({ | ||
11 | headline: { | ||
12 | id: 'app.errorHandler.headline', | ||
13 | defaultMessage: 'Something went wrong.', | ||
14 | }, | ||
15 | action: { | ||
16 | id: 'app.errorHandler.action', | ||
17 | defaultMessage: 'Reload', | ||
18 | }, | ||
19 | }); | ||
20 | |||
21 | interface ErrorBoundaryProps extends WithStylesProps<typeof styles> { | ||
22 | intl: IntlShape; | ||
23 | } | ||
24 | |||
25 | class ErrorBoundary extends Component<ErrorBoundaryProps> { | ||
26 | state = { | ||
27 | hasError: false, | ||
28 | }; | ||
29 | |||
30 | componentDidCatch(): void { | ||
31 | this.setState({ hasError: true }); | ||
32 | } | ||
33 | |||
34 | render(): ReactNode { | ||
35 | const { classes } = this.props; | ||
36 | const { intl } = this.props; | ||
37 | |||
38 | if (this.state.hasError) { | ||
39 | return ( | ||
40 | <div className={classes.component}> | ||
41 | <H1 className={classes.title}> | ||
42 | {intl.formatMessage(messages.headline)} | ||
43 | </H1> | ||
44 | <Button | ||
45 | label={intl.formatMessage(messages.action)} | ||
46 | buttonType="inverted" | ||
47 | onClick={() => window.location.reload()} | ||
48 | /> | ||
49 | </div> | ||
50 | ); | ||
51 | } | ||
52 | |||
53 | return this.props.children; | ||
54 | } | ||
55 | } | ||
56 | |||
57 | export default withStyles(styles, { injectTheme: true })( | ||
58 | injectIntl<'intl', ErrorBoundaryProps>(ErrorBoundary), | ||
59 | ); | ||