refactor: convert AccountDashboard to typescript

3 files changed, 37 insertions, 33 deletions

diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.tsx
index a1612cf8b..8d6cfdfe6 100644
--- a/src/components/settings/account/AccountDashboard.js
+++ b/src/components/settings/account/AccountDashboard.tsx
@@ -1,14 +1,14 @@
 import { Component } from 'react';
-import PropTypes from 'prop-types';
-import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
-import { defineMessages, injectIntl } from 'react-intl';
+import { observer } from 'mobx-react';
+import {defineMessages, injectIntl, WrappedComponentProps} from 'react-intl';
 import ReactTooltip from 'react-tooltip';
 import { H1, H2 } from '../../ui/headline';
 
 import Loader from '../../ui/Loader';
 import Button from '../../ui/button';
-import Infobox from '../../ui/Infobox';
+import Infobox from '../../ui/infobox';
 import { LOCAL_SERVER, LIVE_FRANZ_API } from '../../../config';
+import User from "../../../models/User";
 
 const messages = defineMessages({
   headline: {
@@ -64,19 +64,21 @@ const messages = defineMessages({
   },
 });
 
-class AccountDashboard extends Component {
-  static propTypes = {
-    user: MobxPropTypes.observableObject.isRequired,
-    isLoading: PropTypes.bool.isRequired,
-    userInfoRequestFailed: PropTypes.bool.isRequired,
-    retryUserInfoRequest: PropTypes.func.isRequired,
-    deleteAccount: PropTypes.func.isRequired,
-    isLoadingDeleteAccount: PropTypes.bool.isRequired,
-    isDeleteAccountSuccessful: PropTypes.bool.isRequired,
-    openEditAccount: PropTypes.func.isRequired,
-    openInvoices: PropTypes.func.isRequired,
-    server: PropTypes.string.isRequired,
-  };
+interface IProp extends WrappedComponentProps {
+  user: User;
+  isLoading: boolean;
+  userInfoRequestFailed: boolean;
+  isLoadingDeleteAccount: boolean;
+  isDeleteAccountSuccessful: boolean;
+  server: string;
+  retryUserInfoRequest: () => void;
+  deleteAccount: () => void;
+  openEditAccount: () => void;
+  openInvoices: () => void;
+}
+
+@observer
+class AccountDashboard extends Component<IProp> {
 
   render() {
     const {
@@ -131,7 +133,6 @@ class AccountDashboard extends Component {
                   ctaLabel={intl.formatMessage(
                     messages.tryReloadUserInfoRequest,
                   )}
-                  ctaLoading={isLoading}
                   ctaOnClick={retryUserInfoRequest}
                 >
                   {intl.formatMessage(messages.userInfoRequestFailed)}
@@ -221,4 +222,4 @@ class AccountDashboard extends Component {
   }
 }
 
-export default injectIntl(observer(AccountDashboard));
+export default injectIntl(AccountDashboard);
diff --git a/src/components/ui/Loader.tsx b/src/components/ui/Loader.tsx
index 67c9db22e..ae51f8145 100644
--- a/src/components/ui/Loader.tsx
+++ b/src/components/ui/Loader.tsx
@@ -1,19 +1,20 @@
-import { Component, ReactChildren } from 'react';
+import {Component, PropsWithChildren} from 'react';
 import { observer, inject } from 'mobx-react';
 import Loader from 'react-loader';
 
 import { FerdiumStores } from '../../@types/stores.types';
 
-type Props = {
-  children: ReactChildren;
-  loaded: boolean;
-  className: string;
-  color: string;
-  stores: FerdiumStores;
-};
+interface IProps {
+  className?: string;
+  color?: string;
+  loaded?: boolean;
+  stores?: FerdiumStores;
+}
 
 // Can this file be merged into the './loader/index.tsx' file?
-class LoaderComponent extends Component<Props> {
+@inject("stores")
+@observer
+class LoaderComponent extends Component<PropsWithChildren<IProps>> {
   static defaultProps = {
     loaded: false,
     color: 'ACCENT',
@@ -25,7 +26,7 @@ class LoaderComponent extends Component<Props> {
     const color =
       this.props.color !== 'ACCENT'
         ? this.props.color
-        : this.props.stores.settings.app.accentColor;
+        : this.props.stores!.settings.app.accentColor;
 
     return (
       <Loader
@@ -42,4 +43,4 @@ class LoaderComponent extends Component<Props> {
   }
 }
 
-export default inject('stores')(observer(LoaderComponent));
+export default LoaderComponent;
diff --git a/src/components/ui/infobox/index.tsx b/src/components/ui/infobox/index.tsx
index d1d7ef6cd..ad59ea81e 100644
--- a/src/components/ui/infobox/index.tsx
+++ b/src/components/ui/infobox/index.tsx
@@ -7,15 +7,16 @@ import { Theme } from '../../../themes';
 import Icon from '../icon';
 
 interface IProps extends WithStylesProps<typeof styles> {
+  children: ReactNode;
   icon?: string;
   type?: string;
   dismissable?: boolean;
+  ctaLabel?: string;
+
+  className?: string;
   onDismiss?: () => void;
   onUnmount?: () => void;
   ctaOnClick?: () => void;
-  ctaLabel?: string;
-  children: ReactNode;
-  className: string;
 }
 
 interface IState {
@@ -114,6 +115,7 @@ class InfoboxComponent extends Component<IProps, IState> {
     ctaOnClick: () => {},
     onDismiss: () => {},
     ctaLabel: '',
+    className: '',
   };
 
   state = {