From 8715d489b58534470fc0d35b5961797bc0118e84 Mon Sep 17 00:00:00 2001
From: Ricardo Cino <ricardo@cino.io>
Date: Mon, 27 Jun 2022 22:27:27 +0200
Subject: chore: turn error boundary into typescript

---
 src/components/ui/button/index.tsx           | 20 +++++----
 src/components/util/ErrorBoundary/index.js   | 61 ----------------------------
 src/components/util/ErrorBoundary/index.tsx  | 59 +++++++++++++++++++++++++++
 src/components/util/ErrorBoundary/styles.js  | 13 ------
 src/components/util/ErrorBoundary/styles.tsx | 13 ++++++
 5 files changed, 85 insertions(+), 81 deletions(-)
 delete mode 100644 src/components/util/ErrorBoundary/index.js
 create mode 100644 src/components/util/ErrorBoundary/index.tsx
 delete mode 100644 src/components/util/ErrorBoundary/styles.js
 create mode 100644 src/components/util/ErrorBoundary/styles.tsx

(limited to 'src')

diff --git a/src/components/ui/button/index.tsx b/src/components/ui/button/index.tsx
index 9c64e909a..26fd6bcfe 100644
--- a/src/components/ui/button/index.tsx
+++ b/src/components/ui/button/index.tsx
@@ -2,7 +2,7 @@ import Icon from '@mdi/react';
 import classnames from 'classnames';
 import { Property } from 'csstype';
 import { Component, MouseEvent } from 'react';
-import injectStyle, { WithStylesProps } from 'react-jss';
+import withStyles, { WithStylesProps } from 'react-jss';
 import Loader from 'react-loader';
 
 import { Theme } from '../../../themes';
@@ -18,6 +18,7 @@ type ButtonType =
 
 interface IProps extends IFormField, WithStylesProps<typeof styles> {
   className?: string;
+  label?: string;
   disabled?: boolean;
   id?: string;
   type?: 'button' | 'reset' | 'submit' | undefined;
@@ -148,12 +149,19 @@ const styles = (theme: Theme) => ({
 });
 
 class ButtonComponent extends Component<IProps> {
-  public static defaultProps = {
+  customDefaultProps: {
+    disabled: boolean;
+    type: 'button' | 'reset' | 'submit' | undefined;
+    onClick: (
+      event: MouseEvent<HTMLButtonElement> | MouseEvent<HTMLAnchorElement>,
+    ) => void;
+    buttonType: ButtonType;
+    busy: boolean;
+  } = {
     type: 'button',
     disabled: false,
     onClick: () => null,
     buttonType: 'primary' as ButtonType,
-    stretch: false,
     busy: false,
   };
 
@@ -193,7 +201,7 @@ class ButtonComponent extends Component<IProps> {
       href,
       target,
       htmlForm,
-    } = this.props;
+    } = { ...this.customDefaultProps, ...this.props };
 
     const { busy } = this.state;
     let showLoader = false;
@@ -265,6 +273,4 @@ class ButtonComponent extends Component<IProps> {
   }
 }
 
-const Button = injectStyle(styles, { injectTheme: true })(ButtonComponent);
-
-export default Button;
+export default withStyles(styles, { injectTheme: true })(ButtonComponent);
diff --git a/src/components/util/ErrorBoundary/index.js b/src/components/util/ErrorBoundary/index.js
deleted file mode 100644
index c1861e5f7..000000000
--- a/src/components/util/ErrorBoundary/index.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import injectSheet from 'react-jss';
-import { defineMessages, injectIntl } from 'react-intl';
-
-import Button from '../../ui/button';
-import { H1 } from '../../ui/headline';
-
-import styles from './styles';
-
-const messages = defineMessages({
-  headline: {
-    id: 'app.errorHandler.headline',
-    defaultMessage: 'Something went wrong.',
-  },
-  action: {
-    id: 'app.errorHandler.action',
-    defaultMessage: 'Reload',
-  },
-});
-
-class ErrorBoundary extends Component {
-  state = {
-    hasError: false,
-  };
-
-  static propTypes = {
-    classes: PropTypes.object.isRequired,
-    children: PropTypes.node.isRequired,
-  };
-
-  componentDidCatch() {
-    this.setState({ hasError: true });
-  }
-
-  render() {
-    const { classes } = this.props;
-    const { intl } = this.props;
-
-    if (this.state.hasError) {
-      return (
-        <div className={classes.component}>
-          <H1 className={classes.title}>
-            {intl.formatMessage(messages.headline)}
-          </H1>
-          <Button
-            label={intl.formatMessage(messages.action)}
-            buttonType="inverted"
-            onClick={() => window.location.reload()}
-          />
-        </div>
-      );
-    }
-
-    return this.props.children;
-  }
-}
-
-export default injectIntl(
-  injectSheet(styles, { injectTheme: true })(ErrorBoundary),
-);
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 @@
+import { Component, ReactNode } from 'react';
+import withStyles, { WithStylesProps } from 'react-jss';
+import { defineMessages, injectIntl, IntlShape } from 'react-intl';
+
+import Button from '../../ui/button';
+import { H1 } from '../../ui/headline';
+
+import styles from './styles';
+
+const messages = defineMessages({
+  headline: {
+    id: 'app.errorHandler.headline',
+    defaultMessage: 'Something went wrong.',
+  },
+  action: {
+    id: 'app.errorHandler.action',
+    defaultMessage: 'Reload',
+  },
+});
+
+interface ErrorBoundaryProps extends WithStylesProps<typeof styles> {
+  intl: IntlShape;
+}
+
+class ErrorBoundary extends Component<ErrorBoundaryProps> {
+  state = {
+    hasError: false,
+  };
+
+  componentDidCatch(): void {
+    this.setState({ hasError: true });
+  }
+
+  render(): ReactNode {
+    const { classes } = this.props;
+    const { intl } = this.props;
+
+    if (this.state.hasError) {
+      return (
+        <div className={classes.component}>
+          <H1 className={classes.title}>
+            {intl.formatMessage(messages.headline)}
+          </H1>
+          <Button
+            label={intl.formatMessage(messages.action)}
+            buttonType="inverted"
+            onClick={() => window.location.reload()}
+          />
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default withStyles(styles, { injectTheme: true })(
+  injectIntl<'intl', ErrorBoundaryProps>(ErrorBoundary),
+);
diff --git a/src/components/util/ErrorBoundary/styles.js b/src/components/util/ErrorBoundary/styles.js
deleted file mode 100644
index 0960546ff..000000000
--- a/src/components/util/ErrorBoundary/styles.js
+++ /dev/null
@@ -1,13 +0,0 @@
-export default theme => ({
-  component: {
-    display: 'flex',
-    width: '100%',
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexDirection: 'column',
-  },
-  title: {
-    fontSize: 20,
-    color: theme.colorText,
-  },
-});
diff --git a/src/components/util/ErrorBoundary/styles.tsx b/src/components/util/ErrorBoundary/styles.tsx
new file mode 100644
index 000000000..0960546ff
--- /dev/null
+++ b/src/components/util/ErrorBoundary/styles.tsx
@@ -0,0 +1,13 @@
+export default theme => ({
+  component: {
+    display: 'flex',
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'column',
+  },
+  title: {
+    fontSize: 20,
+    color: theme.colorText,
+  },
+});
-- 
cgit v1.2.3-70-g09d2