diff options
author | Balaji Vijayakumar <kuttibalaji.v6@gmail.com> | 2022-10-26 18:49:54 +0530 |
---|---|---|
committer | Vijay Aravamudhan <vraravam@users.noreply.github.com> | 2022-10-26 19:26:39 +0530 |
commit | 47af2abe2c7dfa1b18494092278cbfb0a54f5db5 (patch) | |
tree | 6866f6744456bbc7146aa6120cbf5022976a9b1f /src | |
parent | Upgrade 'macos-notification-state' to git SHA from fork '0a168f5b1f94c1fd3c08... (diff) | |
download | ferdium-app-47af2abe2c7dfa1b18494092278cbfb0a54f5db5.tar.gz ferdium-app-47af2abe2c7dfa1b18494092278cbfb0a54f5db5.tar.zst ferdium-app-47af2abe2c7dfa1b18494092278cbfb0a54f5db5.zip |
refactor: convert AccountDashboard to typescript
Diffstat (limited to 'src')
-rw-r--r-- | src/components/settings/account/AccountDashboard.tsx (renamed from src/components/settings/account/AccountDashboard.js) | 39 | ||||
-rw-r--r-- | src/components/ui/Loader.tsx | 23 | ||||
-rw-r--r-- | src/components/ui/infobox/index.tsx | 8 | ||||
-rw-r--r-- | src/containers/settings/AccountScreen.tsx | 7 |
4 files changed, 37 insertions, 40 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 @@ | |||
1 | import { Component } from 'react'; | 1 | import { Component } from 'react'; |
2 | import PropTypes from 'prop-types'; | 2 | import { observer } from 'mobx-react'; |
3 | import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; | 3 | import {defineMessages, injectIntl, WrappedComponentProps} from 'react-intl'; |
4 | import { defineMessages, injectIntl } from 'react-intl'; | ||
5 | import ReactTooltip from 'react-tooltip'; | 4 | import ReactTooltip from 'react-tooltip'; |
6 | import { H1, H2 } from '../../ui/headline'; | 5 | import { H1, H2 } from '../../ui/headline'; |
7 | 6 | ||
8 | import Loader from '../../ui/Loader'; | 7 | import Loader from '../../ui/Loader'; |
9 | import Button from '../../ui/button'; | 8 | import Button from '../../ui/button'; |
10 | import Infobox from '../../ui/Infobox'; | 9 | import Infobox from '../../ui/infobox'; |
11 | import { LOCAL_SERVER, LIVE_FRANZ_API } from '../../../config'; | 10 | import { LOCAL_SERVER, LIVE_FRANZ_API } from '../../../config'; |
11 | import User from "../../../models/User"; | ||
12 | 12 | ||
13 | const messages = defineMessages({ | 13 | const messages = defineMessages({ |
14 | headline: { | 14 | headline: { |
@@ -64,19 +64,21 @@ const messages = defineMessages({ | |||
64 | }, | 64 | }, |
65 | }); | 65 | }); |
66 | 66 | ||
67 | class AccountDashboard extends Component { | 67 | interface IProp extends WrappedComponentProps { |
68 | static propTypes = { | 68 | user: User; |
69 | user: MobxPropTypes.observableObject.isRequired, | 69 | isLoading: boolean; |
70 | isLoading: PropTypes.bool.isRequired, | 70 | userInfoRequestFailed: boolean; |
71 | userInfoRequestFailed: PropTypes.bool.isRequired, | 71 | isLoadingDeleteAccount: boolean; |
72 | retryUserInfoRequest: PropTypes.func.isRequired, | 72 | isDeleteAccountSuccessful: boolean; |
73 | deleteAccount: PropTypes.func.isRequired, | 73 | server: string; |
74 | isLoadingDeleteAccount: PropTypes.bool.isRequired, | 74 | retryUserInfoRequest: () => void; |
75 | isDeleteAccountSuccessful: PropTypes.bool.isRequired, | 75 | deleteAccount: () => void; |
76 | openEditAccount: PropTypes.func.isRequired, | 76 | openEditAccount: () => void; |
77 | openInvoices: PropTypes.func.isRequired, | 77 | openInvoices: () => void; |
78 | server: PropTypes.string.isRequired, | 78 | } |
79 | }; | 79 | |
80 | @observer | ||
81 | class AccountDashboard extends Component<IProp> { | ||
80 | 82 | ||
81 | render() { | 83 | render() { |
82 | const { | 84 | const { |
@@ -131,7 +133,6 @@ class AccountDashboard extends Component { | |||
131 | ctaLabel={intl.formatMessage( | 133 | ctaLabel={intl.formatMessage( |
132 | messages.tryReloadUserInfoRequest, | 134 | messages.tryReloadUserInfoRequest, |
133 | )} | 135 | )} |
134 | ctaLoading={isLoading} | ||
135 | ctaOnClick={retryUserInfoRequest} | 136 | ctaOnClick={retryUserInfoRequest} |
136 | > | 137 | > |
137 | {intl.formatMessage(messages.userInfoRequestFailed)} | 138 | {intl.formatMessage(messages.userInfoRequestFailed)} |
@@ -221,4 +222,4 @@ class AccountDashboard extends Component { | |||
221 | } | 222 | } |
222 | } | 223 | } |
223 | 224 | ||
224 | export default injectIntl(observer(AccountDashboard)); | 225 | 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 @@ | |||
1 | import { Component, ReactChildren } from 'react'; | 1 | import {Component, PropsWithChildren} from 'react'; |
2 | import { observer, inject } from 'mobx-react'; | 2 | import { observer, inject } from 'mobx-react'; |
3 | import Loader from 'react-loader'; | 3 | import Loader from 'react-loader'; |
4 | 4 | ||
5 | import { FerdiumStores } from '../../@types/stores.types'; | 5 | import { FerdiumStores } from '../../@types/stores.types'; |
6 | 6 | ||
7 | type Props = { | 7 | interface IProps { |
8 | children: ReactChildren; | 8 | className?: string; |
9 | loaded: boolean; | 9 | color?: string; |
10 | className: string; | 10 | loaded?: boolean; |
11 | color: string; | 11 | stores?: FerdiumStores; |
12 | stores: FerdiumStores; | 12 | } |
13 | }; | ||
14 | 13 | ||
15 | // Can this file be merged into the './loader/index.tsx' file? | 14 | // Can this file be merged into the './loader/index.tsx' file? |
16 | class LoaderComponent extends Component<Props> { | 15 | @inject("stores") |
16 | @observer | ||
17 | class LoaderComponent extends Component<PropsWithChildren<IProps>> { | ||
17 | static defaultProps = { | 18 | static defaultProps = { |
18 | loaded: false, | 19 | loaded: false, |
19 | color: 'ACCENT', | 20 | color: 'ACCENT', |
@@ -25,7 +26,7 @@ class LoaderComponent extends Component<Props> { | |||
25 | const color = | 26 | const color = |
26 | this.props.color !== 'ACCENT' | 27 | this.props.color !== 'ACCENT' |
27 | ? this.props.color | 28 | ? this.props.color |
28 | : this.props.stores.settings.app.accentColor; | 29 | : this.props.stores!.settings.app.accentColor; |
29 | 30 | ||
30 | return ( | 31 | return ( |
31 | <Loader | 32 | <Loader |
@@ -42,4 +43,4 @@ class LoaderComponent extends Component<Props> { | |||
42 | } | 43 | } |
43 | } | 44 | } |
44 | 45 | ||
45 | export default inject('stores')(observer(LoaderComponent)); | 46 | 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'; | |||
7 | import Icon from '../icon'; | 7 | import Icon from '../icon'; |
8 | 8 | ||
9 | interface IProps extends WithStylesProps<typeof styles> { | 9 | interface IProps extends WithStylesProps<typeof styles> { |
10 | children: ReactNode; | ||
10 | icon?: string; | 11 | icon?: string; |
11 | type?: string; | 12 | type?: string; |
12 | dismissable?: boolean; | 13 | dismissable?: boolean; |
14 | ctaLabel?: string; | ||
15 | |||
16 | className?: string; | ||
13 | onDismiss?: () => void; | 17 | onDismiss?: () => void; |
14 | onUnmount?: () => void; | 18 | onUnmount?: () => void; |
15 | ctaOnClick?: () => void; | 19 | ctaOnClick?: () => void; |
16 | ctaLabel?: string; | ||
17 | children: ReactNode; | ||
18 | className: string; | ||
19 | } | 20 | } |
20 | 21 | ||
21 | interface IState { | 22 | interface IState { |
@@ -114,6 +115,7 @@ class InfoboxComponent extends Component<IProps, IState> { | |||
114 | ctaOnClick: () => {}, | 115 | ctaOnClick: () => {}, |
115 | onDismiss: () => {}, | 116 | onDismiss: () => {}, |
116 | ctaLabel: '', | 117 | ctaLabel: '', |
118 | className: '', | ||
117 | }; | 119 | }; |
118 | 120 | ||
119 | state = { | 121 | state = { |
diff --git a/src/containers/settings/AccountScreen.tsx b/src/containers/settings/AccountScreen.tsx index e072b28af..55aa1e5c9 100644 --- a/src/containers/settings/AccountScreen.tsx +++ b/src/containers/settings/AccountScreen.tsx | |||
@@ -9,12 +9,6 @@ import { LIVE_FRANZ_API } from '../../config'; | |||
9 | import { WEBSITE } from '../../environment-remote'; | 9 | import { WEBSITE } from '../../environment-remote'; |
10 | 10 | ||
11 | class AccountScreen extends Component<StoresProps> { | 11 | class AccountScreen extends Component<StoresProps> { |
12 | onCloseWindow(): void { | ||
13 | const { user, features } = this.props.stores; | ||
14 | user.getUserInfoRequest.invalidate({ immediately: true }); | ||
15 | features.featuresRequest.invalidate({ immediately: true }); | ||
16 | } | ||
17 | |||
18 | reloadData(): void { | 12 | reloadData(): void { |
19 | const { user } = this.props.stores; | 13 | const { user } = this.props.stores; |
20 | 14 | ||
@@ -53,7 +47,6 @@ class AccountScreen extends Component<StoresProps> { | |||
53 | user.getUserInfoRequest.isError | 47 | user.getUserInfoRequest.isError |
54 | } | 48 | } |
55 | retryUserInfoRequest={() => this.reloadData()} | 49 | retryUserInfoRequest={() => this.reloadData()} |
56 | onCloseSubscriptionWindow={() => this.onCloseWindow()} | ||
57 | deleteAccount={userActions.delete} | 50 | deleteAccount={userActions.delete} |
58 | isLoadingDeleteAccount={user.deleteAccountRequest.isExecuting} | 51 | isLoadingDeleteAccount={user.deleteAccountRequest.isExecuting} |
59 | isDeleteAccountSuccessful={ | 52 | isDeleteAccountSuccessful={ |