diff options
author | Balaji Vijayakumar <kuttibalaji.v6@gmail.com> | 2022-10-25 10:27:51 +0530 |
---|---|---|
committer | Vijay Aravamudhan <vraravam@users.noreply.github.com> | 2022-10-25 12:12:56 +0530 |
commit | 4906216e21c05f603647ff9a883e012a8aec60ca (patch) | |
tree | 386cba77e78febde26f4173d4f5d324046048af8 /src | |
parent | 6.2.1-nightly.28 [skip ci] (diff) | |
download | ferdium-app-4906216e21c05f603647ff9a883e012a8aec60ca.tar.gz ferdium-app-4906216e21c05f603647ff9a883e012a8aec60ca.tar.zst ferdium-app-4906216e21c05f603647ff9a883e012a8aec60ca.zip |
refactor: convert AppLayout to typescript
Diffstat (limited to 'src')
-rw-r--r-- | src/components/layout/AppLayout.tsx (renamed from src/components/layout/AppLayout.jsx) | 53 | ||||
-rw-r--r-- | src/containers/auth/LockedScreen.tsx | 23 | ||||
-rw-r--r-- | src/containers/layout/AppLayoutContainer.tsx | 15 |
3 files changed, 47 insertions, 44 deletions
diff --git a/src/components/layout/AppLayout.jsx b/src/components/layout/AppLayout.tsx index 685839c0a..c2468e852 100644 --- a/src/components/layout/AppLayout.jsx +++ b/src/components/layout/AppLayout.tsx | |||
@@ -1,9 +1,8 @@ | |||
1 | import { Component } from 'react'; | 1 | import React, { Component } from 'react'; |
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | 2 | import { observer } from 'mobx-react'; |
4 | import { defineMessages, injectIntl } from 'react-intl'; | 3 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; |
5 | import { TitleBar } from 'electron-react-titlebar/renderer'; | 4 | import { TitleBar } from 'electron-react-titlebar/renderer'; |
6 | import injectSheet from 'react-jss'; | 5 | import injectSheet, { WithStylesProps } from 'react-jss'; |
7 | import { ipcRenderer } from 'electron'; | 6 | import { ipcRenderer } from 'electron'; |
8 | 7 | ||
9 | import { mdiFlash, mdiPowerPlug } from '@mdi/js'; | 8 | import { mdiFlash, mdiPowerPlug } from '@mdi/js'; |
@@ -16,8 +15,7 @@ import ErrorBoundary from '../util/ErrorBoundary'; | |||
16 | import { updateVersionParse } from '../../helpers/update-helpers'; | 15 | import { updateVersionParse } from '../../helpers/update-helpers'; |
17 | 16 | ||
18 | // import globalMessages from '../../i18n/globalMessages'; | 17 | // import globalMessages from '../../i18n/globalMessages'; |
19 | 18 | import { isMac, isWindows } from '../../environment'; | |
20 | import { isWindows, isMac } from '../../environment'; | ||
21 | import WorkspaceSwitchingIndicator from '../../features/workspaces/components/WorkspaceSwitchingIndicator'; | 19 | import WorkspaceSwitchingIndicator from '../../features/workspaces/components/WorkspaceSwitchingIndicator'; |
22 | import { workspaceStore } from '../../features/workspaces'; | 20 | import { workspaceStore } from '../../features/workspaces'; |
23 | import AppUpdateInfoBar from '../AppUpdateInfoBar'; | 21 | import AppUpdateInfoBar from '../AppUpdateInfoBar'; |
@@ -25,6 +23,7 @@ import Todos from '../../features/todos/containers/TodosScreen'; | |||
25 | import Icon from '../ui/icon'; | 23 | import Icon from '../ui/icon'; |
26 | 24 | ||
27 | import LockedScreen from '../../containers/auth/LockedScreen'; | 25 | import LockedScreen from '../../containers/auth/LockedScreen'; |
26 | import SettingsStore from '../../stores/SettingsStore'; | ||
28 | 27 | ||
29 | const messages = defineMessages({ | 28 | const messages = defineMessages({ |
30 | servicesUpdated: { | 29 | servicesUpdated: { |
@@ -77,24 +76,30 @@ const toggleFullScreen = () => { | |||
77 | ipcRenderer.send('window.toolbar-double-clicked'); | 76 | ipcRenderer.send('window.toolbar-double-clicked'); |
78 | }; | 77 | }; |
79 | 78 | ||
80 | class AppLayout extends Component { | 79 | interface IProps extends WrappedComponentProps, WithStylesProps<typeof styles> { |
81 | static propTypes = { | 80 | settings: SettingsStore; |
82 | classes: PropTypes.object.isRequired, | 81 | updateVersion: string; |
83 | settings: PropTypes.object.isRequired, | 82 | isFullScreen: boolean; |
84 | isFullScreen: PropTypes.bool.isRequired, | 83 | sidebar: React.ReactElement; |
85 | sidebar: PropTypes.element.isRequired, | 84 | workspacesDrawer: React.ReactElement; |
86 | workspacesDrawer: PropTypes.element.isRequired, | 85 | services: React.ReactElement; |
87 | services: PropTypes.element.isRequired, | 86 | showServicesUpdatedInfoBar: boolean; |
88 | showServicesUpdatedInfoBar: PropTypes.bool.isRequired, | 87 | appUpdateIsDownloaded: boolean; |
89 | appUpdateIsDownloaded: PropTypes.bool.isRequired, | 88 | authRequestFailed: boolean; |
90 | authRequestFailed: PropTypes.bool.isRequired, | 89 | installAppUpdate: () => void; |
91 | installAppUpdate: PropTypes.func.isRequired, | 90 | showRequiredRequestsError: boolean; |
92 | showRequiredRequestsError: PropTypes.bool.isRequired, | 91 | areRequiredRequestsSuccessful: boolean; |
93 | areRequiredRequestsSuccessful: PropTypes.bool.isRequired, | 92 | retryRequiredRequests: () => void; |
94 | retryRequiredRequests: PropTypes.func.isRequired, | 93 | areRequiredRequestsLoading: boolean; |
95 | areRequiredRequestsLoading: PropTypes.bool.isRequired, | 94 | } |
96 | }; | 95 | |
96 | interface IState { | ||
97 | shouldShowAppUpdateInfoBar: boolean; | ||
98 | shouldShowServicesUpdatedInfoBar: boolean; | ||
99 | } | ||
97 | 100 | ||
101 | @observer | ||
102 | class AppLayout extends Component<IProps, IState> { | ||
98 | constructor(props) { | 103 | constructor(props) { |
99 | super(props); | 104 | super(props); |
100 | 105 | ||
@@ -222,5 +227,5 @@ class AppLayout extends Component { | |||
222 | } | 227 | } |
223 | 228 | ||
224 | export default injectIntl( | 229 | export default injectIntl( |
225 | injectSheet(styles, { injectTheme: true })(observer(AppLayout)), | 230 | injectSheet(styles, { injectTheme: true })(AppLayout), |
226 | ); | 231 | ); |
diff --git a/src/containers/auth/LockedScreen.tsx b/src/containers/auth/LockedScreen.tsx index 1b703207f..611a0757c 100644 --- a/src/containers/auth/LockedScreen.tsx +++ b/src/containers/auth/LockedScreen.tsx | |||
@@ -4,8 +4,17 @@ import { StoresProps } from '../../@types/ferdium-components.types'; | |||
4 | import Locked from '../../components/auth/Locked'; | 4 | import Locked from '../../components/auth/Locked'; |
5 | 5 | ||
6 | import { hash } from '../../helpers/password-helpers'; | 6 | import { hash } from '../../helpers/password-helpers'; |
7 | import { Actions } from '../../actions/lib/actions'; | ||
8 | import { RealStores } from '../../stores'; | ||
7 | 9 | ||
8 | class LockedScreen extends Component<StoresProps> { | 10 | interface IProps { |
11 | actions?: Actions; | ||
12 | stores?: RealStores; | ||
13 | } | ||
14 | |||
15 | @inject('stores', 'actions') | ||
16 | @observer | ||
17 | class LockedScreen extends Component<IProps> { | ||
9 | state = { | 18 | state = { |
10 | error: false, | 19 | error: false, |
11 | }; | 20 | }; |
@@ -20,13 +29,13 @@ class LockedScreen extends Component<StoresProps> { | |||
20 | onSubmit(values: any): void { | 29 | onSubmit(values: any): void { |
21 | const { password } = values; | 30 | const { password } = values; |
22 | 31 | ||
23 | let correctPassword = this.props.stores.settings.all.app.lockedPassword; | 32 | let correctPassword = this.props.stores!.settings.all.app.lockedPassword; |
24 | if (!correctPassword) { | 33 | if (!correctPassword) { |
25 | correctPassword = ''; | 34 | correctPassword = ''; |
26 | } | 35 | } |
27 | 36 | ||
28 | if (hash(String(password)) === String(correctPassword)) { | 37 | if (hash(String(password)) === String(correctPassword)) { |
29 | this.props.actions.settings.update({ | 38 | this.props.actions!.settings.update({ |
30 | type: 'app', | 39 | type: 'app', |
31 | data: { | 40 | data: { |
32 | locked: false, | 41 | locked: false, |
@@ -42,7 +51,7 @@ class LockedScreen extends Component<StoresProps> { | |||
42 | } | 51 | } |
43 | 52 | ||
44 | unlock(): void { | 53 | unlock(): void { |
45 | this.props.actions.settings.update({ | 54 | this.props.actions!.settings.update({ |
46 | type: 'app', | 55 | type: 'app', |
47 | data: { | 56 | data: { |
48 | locked: false, | 57 | locked: false, |
@@ -52,7 +61,7 @@ class LockedScreen extends Component<StoresProps> { | |||
52 | 61 | ||
53 | render(): ReactElement { | 62 | render(): ReactElement { |
54 | const { stores } = this.props; | 63 | const { stores } = this.props; |
55 | const { useTouchIdToUnlock } = this.props.stores.settings.all.app; | 64 | const { useTouchIdToUnlock } = this.props.stores!.settings.all.app; |
56 | 65 | ||
57 | return ( | 66 | return ( |
58 | <div className="auth"> | 67 | <div className="auth"> |
@@ -61,7 +70,7 @@ class LockedScreen extends Component<StoresProps> { | |||
61 | onSubmit={this.onSubmit} | 70 | onSubmit={this.onSubmit} |
62 | unlock={this.unlock} | 71 | unlock={this.unlock} |
63 | useTouchIdToUnlock={useTouchIdToUnlock} | 72 | useTouchIdToUnlock={useTouchIdToUnlock} |
64 | isSubmitting={stores.user.loginRequest.isExecuting} | 73 | isSubmitting={stores!.user.loginRequest.isExecuting} |
65 | error={this.state.error || {}} | 74 | error={this.state.error || {}} |
66 | /> | 75 | /> |
67 | </div> | 76 | </div> |
@@ -70,4 +79,4 @@ class LockedScreen extends Component<StoresProps> { | |||
70 | } | 79 | } |
71 | } | 80 | } |
72 | 81 | ||
73 | export default inject('stores', 'actions')(observer(LockedScreen)); | 82 | export default LockedScreen; |
diff --git a/src/containers/layout/AppLayoutContainer.tsx b/src/containers/layout/AppLayoutContainer.tsx index 9c03b0ba4..a5fea52cd 100644 --- a/src/containers/layout/AppLayoutContainer.tsx +++ b/src/containers/layout/AppLayoutContainer.tsx | |||
@@ -15,17 +15,8 @@ interface AppLayoutContainerProps extends StoresProps {} | |||
15 | 15 | ||
16 | class AppLayoutContainer extends Component<AppLayoutContainerProps> { | 16 | class AppLayoutContainer extends Component<AppLayoutContainerProps> { |
17 | render(): ReactElement { | 17 | render(): ReactElement { |
18 | const { | 18 | const { app, features, services, ui, settings, requests, user, router } = |
19 | app, | 19 | this.props.stores; |
20 | features, | ||
21 | services, | ||
22 | ui, | ||
23 | settings, | ||
24 | globalError, | ||
25 | requests, | ||
26 | user, | ||
27 | router, | ||
28 | } = this.props.stores; | ||
29 | 20 | ||
30 | /* HOTFIX for: | 21 | /* HOTFIX for: |
31 | [mobx] Encountered an uncaught exception that was thrown by a reaction or observer component, in: 'Reaction[bound ]' TypeError: Cannot read properties of null (reading 'push') | 22 | [mobx] Encountered an uncaught exception that was thrown by a reaction or observer component, in: 'Reaction[bound ]' TypeError: Cannot read properties of null (reading 'push') |
@@ -142,7 +133,6 @@ class AppLayoutContainer extends Component<AppLayoutContainerProps> { | |||
142 | <AppLayout | 133 | <AppLayout |
143 | settings={settings} | 134 | settings={settings} |
144 | isFullScreen={app.isFullScreen} | 135 | isFullScreen={app.isFullScreen} |
145 | isOnline={app.isOnline} | ||
146 | showServicesUpdatedInfoBar={ui.showServicesUpdatedInfoBar} | 136 | showServicesUpdatedInfoBar={ui.showServicesUpdatedInfoBar} |
147 | appUpdateIsDownloaded={ | 137 | appUpdateIsDownloaded={ |
148 | app.updateStatus === app.updateStatusTypes.DOWNLOADED | 138 | app.updateStatus === app.updateStatusTypes.DOWNLOADED |
@@ -152,7 +142,6 @@ class AppLayoutContainer extends Component<AppLayoutContainerProps> { | |||
152 | workspacesDrawer={workspacesDrawer} | 142 | workspacesDrawer={workspacesDrawer} |
153 | services={servicesContainer} | 143 | services={servicesContainer} |
154 | installAppUpdate={installUpdate} | 144 | installAppUpdate={installUpdate} |
155 | globalError={globalError.error} | ||
156 | showRequiredRequestsError={requests.showRequiredRequestsError} | 145 | showRequiredRequestsError={requests.showRequiredRequestsError} |
157 | areRequiredRequestsSuccessful={requests.areRequiredRequestsSuccessful} | 146 | areRequiredRequestsSuccessful={requests.areRequiredRequestsSuccessful} |
158 | retryRequiredRequests={retryRequiredRequests} | 147 | retryRequiredRequests={retryRequiredRequests} |