diff options
author | Markus Hatvan <markus_hatvan@aon.at> | 2021-10-14 23:32:05 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-10-15 03:02:05 +0530 |
commit | 137555821f172e4eadc7cf099d4270ae8fc1374e (patch) | |
tree | 693882bbf7a6b2a24b5a727091d09586d0371007 /src | |
parent | New translations en-US.json (Spanish) (#2072) (diff) | |
download | ferdium-app-137555821f172e4eadc7cf099d4270ae8fc1374e.tar.gz ferdium-app-137555821f172e4eadc7cf099d4270ae8fc1374e.tar.zst ferdium-app-137555821f172e4eadc7cf099d4270ae8fc1374e.zip |
chore: convert components to tsx (#2071)
Diffstat (limited to 'src')
-rw-r--r-- | src/components/ui/FAB.js | 65 | ||||
-rw-r--r-- | src/components/ui/FAB.tsx | 51 | ||||
-rw-r--r-- | src/components/ui/ImageUpload.tsx (renamed from src/components/ui/ImageUpload.js) | 26 | ||||
-rw-r--r-- | src/components/ui/Loader.tsx (renamed from src/components/ui/Loader.js) | 32 | ||||
-rw-r--r-- | src/components/ui/Radio.tsx (renamed from src/components/ui/Radio.js) | 19 | ||||
-rw-r--r-- | src/components/ui/SearchInput.tsx (renamed from src/components/ui/SearchInput.js) | 40 | ||||
-rw-r--r-- | src/features/basicAuth/index.ts (renamed from src/features/basicAuth/index.js) | 6 | ||||
-rw-r--r-- | src/features/nightlyBuilds/index.ts (renamed from src/features/nightlyBuilds/index.js) | 10 | ||||
-rw-r--r-- | src/features/todos/preload.ts (renamed from src/features/todos/preload.js) | 2 | ||||
-rw-r--r-- | src/features/workspaces/components/WorkspaceItem.tsx (renamed from src/features/workspaces/components/WorkspaceItem.js) | 8 | ||||
-rw-r--r-- | src/features/workspaces/components/WorkspaceServiceListItem.tsx (renamed from src/features/workspaces/components/WorkspaceServiceListItem.js) | 33 | ||||
-rw-r--r-- | src/features/workspaces/containers/EditWorkspaceScreen.tsx (renamed from src/features/workspaces/containers/EditWorkspaceScreen.js) | 34 | ||||
-rw-r--r-- | src/features/workspaces/containers/WorkspacesScreen.tsx (renamed from src/features/workspaces/containers/WorkspacesScreen.js) | 20 | ||||
-rw-r--r-- | src/index.ts | 2 | ||||
-rw-r--r-- | src/stores.types.ts | 9 |
15 files changed, 169 insertions, 188 deletions
diff --git a/src/components/ui/FAB.js b/src/components/ui/FAB.js deleted file mode 100644 index 55fe97e82..000000000 --- a/src/components/ui/FAB.js +++ /dev/null | |||
@@ -1,65 +0,0 @@ | |||
1 | /** | ||
2 | * Floating Action Button (FAB) | ||
3 | */ | ||
4 | import { Component } from 'react'; | ||
5 | import PropTypes from 'prop-types'; | ||
6 | import { observer } from 'mobx-react'; | ||
7 | import classnames from 'classnames'; | ||
8 | |||
9 | import { oneOrManyChildElements } from '../../prop-types'; | ||
10 | |||
11 | @observer | ||
12 | class Button extends Component { | ||
13 | static propTypes = { | ||
14 | className: PropTypes.string, | ||
15 | disabled: PropTypes.bool, | ||
16 | onClick: PropTypes.func, | ||
17 | type: PropTypes.string, | ||
18 | children: oneOrManyChildElements.isRequired, | ||
19 | htmlForm: PropTypes.string, | ||
20 | }; | ||
21 | |||
22 | static defaultProps = { | ||
23 | className: null, | ||
24 | disabled: false, | ||
25 | onClick: () => {}, | ||
26 | type: 'button', | ||
27 | htmlForm: '', | ||
28 | }; | ||
29 | |||
30 | element = null; | ||
31 | |||
32 | render() { | ||
33 | const { className, disabled, onClick, type, children, htmlForm } = | ||
34 | this.props; | ||
35 | |||
36 | const buttonProps = { | ||
37 | className: classnames({ | ||
38 | ferdi__fab: true, | ||
39 | [`${className}`]: className, | ||
40 | }), | ||
41 | type, | ||
42 | }; | ||
43 | |||
44 | if (disabled) { | ||
45 | buttonProps.disabled = true; | ||
46 | } | ||
47 | |||
48 | if (onClick) { | ||
49 | buttonProps.onClick = onClick; | ||
50 | } | ||
51 | |||
52 | if (htmlForm) { | ||
53 | buttonProps.form = htmlForm; | ||
54 | } | ||
55 | |||
56 | return ( | ||
57 | // disabling rule as button has type defined in `buttonProps` | ||
58 | <button {...buttonProps} type="button"> | ||
59 | {children} | ||
60 | </button> | ||
61 | ); | ||
62 | } | ||
63 | } | ||
64 | |||
65 | export default Button; | ||
diff --git a/src/components/ui/FAB.tsx b/src/components/ui/FAB.tsx new file mode 100644 index 000000000..583c9d556 --- /dev/null +++ b/src/components/ui/FAB.tsx | |||
@@ -0,0 +1,51 @@ | |||
1 | /** | ||
2 | * Floating Action Button (FAB) | ||
3 | */ | ||
4 | import { Component, ReactChildren } from 'react'; | ||
5 | import { observer } from 'mobx-react'; | ||
6 | import classnames from 'classnames'; | ||
7 | |||
8 | type Props = { | ||
9 | className: string; | ||
10 | disabled: boolean; | ||
11 | onClick: () => void; | ||
12 | type: string; | ||
13 | children: ReactChildren; | ||
14 | htmlForm: string; | ||
15 | }; | ||
16 | |||
17 | @observer | ||
18 | class Button extends Component<Props> { | ||
19 | static defaultProps = { | ||
20 | disabled: false, | ||
21 | onClick: () => {}, | ||
22 | type: 'button', | ||
23 | htmlForm: '', | ||
24 | }; | ||
25 | |||
26 | element = null; | ||
27 | |||
28 | render() { | ||
29 | const { className, disabled, onClick, type, children, htmlForm } = | ||
30 | this.props; | ||
31 | |||
32 | const buttonProps = { | ||
33 | className: classnames({ | ||
34 | ferdi__fab: true, | ||
35 | [`${className}`]: className, | ||
36 | }), | ||
37 | type, | ||
38 | disabled, | ||
39 | onClick, | ||
40 | form: htmlForm, | ||
41 | }; | ||
42 | |||
43 | return ( | ||
44 | <button {...buttonProps} type="button"> | ||
45 | {children} | ||
46 | </button> | ||
47 | ); | ||
48 | } | ||
49 | } | ||
50 | |||
51 | export default Button; | ||
diff --git a/src/components/ui/ImageUpload.js b/src/components/ui/ImageUpload.tsx index c51d39a9b..4b25be502 100644 --- a/src/components/ui/ImageUpload.js +++ b/src/components/ui/ImageUpload.tsx | |||
@@ -1,23 +1,21 @@ | |||
1 | import { Component, Fragment } from 'react'; | 1 | import { Component } from 'react'; |
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | 2 | import { observer } from 'mobx-react'; |
4 | import { Field } from 'mobx-react-form'; | 3 | import { Field } from 'mobx-react-form'; |
5 | import classnames from 'classnames'; | 4 | import classnames from 'classnames'; |
6 | import Dropzone from 'react-dropzone'; | 5 | import Dropzone, { DropzoneRef } from 'react-dropzone'; |
7 | import { isWindows } from '../../environment'; | 6 | import { isWindows } from '../../environment'; |
8 | 7 | ||
9 | @observer | 8 | type Props = { |
10 | class ImageUpload extends Component { | 9 | field: typeof Field; |
11 | static propTypes = { | 10 | className: string; |
12 | field: PropTypes.instanceOf(Field).isRequired, | 11 | multiple: boolean; |
13 | className: PropTypes.string, | 12 | textDelete: string; |
14 | multiple: PropTypes.bool, | 13 | textUpload: string; |
15 | textDelete: PropTypes.string.isRequired, | 14 | }; |
16 | textUpload: PropTypes.string.isRequired, | ||
17 | }; | ||
18 | 15 | ||
16 | @observer | ||
17 | class ImageUpload extends Component<Props> { | ||
19 | static defaultProps = { | 18 | static defaultProps = { |
20 | className: null, | ||
21 | multiple: false, | 19 | multiple: false, |
22 | }; | 20 | }; |
23 | 21 | ||
@@ -25,7 +23,7 @@ class ImageUpload extends Component { | |||
25 | path: null, | 23 | path: null, |
26 | }; | 24 | }; |
27 | 25 | ||
28 | dropzoneRef = null; | 26 | dropzoneRef: DropzoneRef | null = null; |
29 | 27 | ||
30 | onDrop(acceptedFiles) { | 28 | onDrop(acceptedFiles) { |
31 | const { field } = this.props; | 29 | const { field } = this.props; |
diff --git a/src/components/ui/Loader.js b/src/components/ui/Loader.tsx index 71c6b9552..1173c11e7 100644 --- a/src/components/ui/Loader.js +++ b/src/components/ui/Loader.tsx | |||
@@ -1,31 +1,22 @@ | |||
1 | import { Component } from 'react'; | 1 | import { Component, ReactChildren } from 'react'; |
2 | import { observer, inject } from 'mobx-react'; | 2 | import { observer, inject } from 'mobx-react'; |
3 | import PropTypes from 'prop-types'; | ||
4 | import Loader from 'react-loader'; | 3 | import Loader from 'react-loader'; |
5 | 4 | ||
6 | import { oneOrManyChildElements } from '../../prop-types'; | 5 | import { FerdiStores } from '../../stores.types'; |
6 | |||
7 | type Props = { | ||
8 | children: ReactChildren; | ||
9 | loaded: boolean; | ||
10 | className: string; | ||
11 | color: string; | ||
12 | stores: FerdiStores; | ||
13 | }; | ||
7 | 14 | ||
8 | @inject('stores') | 15 | @inject('stores') |
9 | @observer | 16 | @observer |
10 | class LoaderComponent extends Component { | 17 | class LoaderComponent extends Component<Props> { |
11 | static propTypes = { | ||
12 | children: oneOrManyChildElements, | ||
13 | loaded: PropTypes.bool, | ||
14 | className: PropTypes.string, | ||
15 | color: PropTypes.string, | ||
16 | stores: PropTypes.shape({ | ||
17 | settings: PropTypes.shape({ | ||
18 | app: PropTypes.shape({ | ||
19 | accentColor: PropTypes.string.isRequired, | ||
20 | }).isRequired, | ||
21 | }).isRequired, | ||
22 | }).isRequired, | ||
23 | }; | ||
24 | |||
25 | static defaultProps = { | 18 | static defaultProps = { |
26 | children: null, | ||
27 | loaded: false, | 19 | loaded: false, |
28 | className: '', | ||
29 | color: 'ACCENT', | 20 | color: 'ACCENT', |
30 | }; | 21 | }; |
31 | 22 | ||
@@ -40,7 +31,6 @@ class LoaderComponent extends Component { | |||
40 | return ( | 31 | return ( |
41 | <Loader | 32 | <Loader |
42 | loaded={loaded} | 33 | loaded={loaded} |
43 | // lines={10} | ||
44 | width={4} | 34 | width={4} |
45 | scale={0.6} | 35 | scale={0.6} |
46 | color={color} | 36 | color={color} |
diff --git a/src/components/ui/Radio.js b/src/components/ui/Radio.tsx index 5354dbfe1..594ea70e4 100644 --- a/src/components/ui/Radio.js +++ b/src/components/ui/Radio.tsx | |||
@@ -1,20 +1,18 @@ | |||
1 | import { Component } from 'react'; | 1 | import { Component } from 'react'; |
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | 2 | import { observer } from 'mobx-react'; |
4 | import { Field } from 'mobx-react-form'; | 3 | import { Field } from 'mobx-react-form'; |
5 | import classnames from 'classnames'; | 4 | import classnames from 'classnames'; |
6 | 5 | ||
7 | @observer | 6 | type Props = { |
8 | class Radio extends Component { | 7 | field: typeof Field; |
9 | static propTypes = { | 8 | className: string; |
10 | field: PropTypes.instanceOf(Field).isRequired, | 9 | focus: boolean; |
11 | className: PropTypes.string, | 10 | showLabel: boolean; |
12 | focus: PropTypes.bool, | 11 | }; |
13 | showLabel: PropTypes.bool, | ||
14 | }; | ||
15 | 12 | ||
13 | @observer | ||
14 | class Radio extends Component<Props> { | ||
16 | static defaultProps = { | 15 | static defaultProps = { |
17 | className: null, | ||
18 | focus: false, | 16 | focus: false, |
19 | showLabel: true, | 17 | showLabel: true, |
20 | }; | 18 | }; |
@@ -28,6 +26,7 @@ class Radio extends Component { | |||
28 | } | 26 | } |
29 | 27 | ||
30 | focus() { | 28 | focus() { |
29 | // @ts-expect-error Object is possibly 'null'. | ||
31 | this.inputElement.focus(); | 30 | this.inputElement.focus(); |
32 | } | 31 | } |
33 | 32 | ||
diff --git a/src/components/ui/SearchInput.js b/src/components/ui/SearchInput.tsx index 2e8793a2b..af55b0e11 100644 --- a/src/components/ui/SearchInput.js +++ b/src/components/ui/SearchInput.tsx | |||
@@ -1,23 +1,22 @@ | |||
1 | import { Component } from 'react'; | 1 | import { ChangeEvent, Component } from 'react'; |
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | 2 | import { observer } from 'mobx-react'; |
4 | import classnames from 'classnames'; | 3 | import classnames from 'classnames'; |
5 | import { debounce } from 'lodash'; | 4 | import { debounce } from 'lodash'; |
6 | 5 | ||
7 | @observer | 6 | type Props = { |
8 | class SearchInput extends Component { | 7 | value: string; |
9 | static propTypes = { | 8 | placeholder: string; |
10 | value: PropTypes.string, | 9 | className: string; |
11 | placeholder: PropTypes.string, | 10 | onChange: (e: ChangeEvent<HTMLInputElement>) => void; |
12 | className: PropTypes.string, | 11 | onReset: () => void; |
13 | onChange: PropTypes.func, | 12 | name: string; |
14 | onReset: PropTypes.func, | 13 | throttle: boolean; |
15 | name: PropTypes.string, | 14 | throttleDelay: number; |
16 | throttle: PropTypes.bool, | 15 | autoFocus: boolean; |
17 | throttleDelay: PropTypes.number, | 16 | }; |
18 | autoFocus: PropTypes.bool, | ||
19 | }; | ||
20 | 17 | ||
18 | @observer | ||
19 | class SearchInput extends Component<Props> { | ||
21 | static defaultProps = { | 20 | static defaultProps = { |
22 | value: '', | 21 | value: '', |
23 | placeholder: '', | 22 | placeholder: '', |
@@ -32,7 +31,7 @@ class SearchInput extends Component { | |||
32 | 31 | ||
33 | input = null; | 32 | input = null; |
34 | 33 | ||
35 | constructor(props) { | 34 | constructor(props: Props) { |
36 | super(props); | 35 | super(props); |
37 | 36 | ||
38 | this.state = { | 37 | this.state = { |
@@ -49,24 +48,27 @@ class SearchInput extends Component { | |||
49 | const { autoFocus } = this.props; | 48 | const { autoFocus } = this.props; |
50 | 49 | ||
51 | if (autoFocus) { | 50 | if (autoFocus) { |
51 | // @ts-expect-error Object is possibly 'null'. | ||
52 | this.input.focus(); | 52 | this.input.focus(); |
53 | } | 53 | } |
54 | } | 54 | } |
55 | 55 | ||
56 | onChange(e) { | 56 | onChange(e: ChangeEvent<HTMLInputElement>) { |
57 | const { throttle, onChange } = this.props; | 57 | const { throttle, onChange } = this.props; |
58 | const { value } = e.target; | 58 | const { value } = e.target; |
59 | this.setState({ value }); | 59 | this.setState({ value }); |
60 | 60 | ||
61 | if (throttle) { | 61 | if (throttle) { |
62 | e.persist(); | 62 | e.persist(); |
63 | // @ts-expect-error Argument of type 'string' is not assignable to parameter of type 'ChangeEvent<HTMLInputElement>'. | ||
63 | this.throttledOnChange(value); | 64 | this.throttledOnChange(value); |
64 | } else { | 65 | } else { |
66 | // @ts-expect-error Argument of type 'string' is not assignable to parameter of type 'ChangeEvent<HTMLInputElement>'. | ||
65 | onChange(value); | 67 | onChange(value); |
66 | } | 68 | } |
67 | } | 69 | } |
68 | 70 | ||
69 | throttledOnChange(e) { | 71 | throttledOnChange(e: ChangeEvent<HTMLInputElement>) { |
70 | const { onChange } = this.props; | 72 | const { onChange } = this.props; |
71 | 73 | ||
72 | onChange(e); | 74 | onChange(e); |
@@ -81,6 +83,7 @@ class SearchInput extends Component { | |||
81 | 83 | ||
82 | render() { | 84 | render() { |
83 | const { className, name, placeholder } = this.props; | 85 | const { className, name, placeholder } = this.props; |
86 | // @ts-expect-error Property 'value' does not exist on type 'Readonly<{}>'. | ||
84 | const { value } = this.state; | 87 | const { value } = this.state; |
85 | 88 | ||
86 | return ( | 89 | return ( |
@@ -94,6 +97,7 @@ class SearchInput extends Component { | |||
94 | value={value} | 97 | value={value} |
95 | onChange={e => this.onChange(e)} | 98 | onChange={e => this.onChange(e)} |
96 | ref={ref => { | 99 | ref={ref => { |
100 | // @ts-expect-error Type 'HTMLInputElement | null' is not assignable to type 'null'. | ||
97 | this.input = ref; | 101 | this.input = ref; |
98 | }} | 102 | }} |
99 | /> | 103 | /> |
diff --git a/src/features/basicAuth/index.js b/src/features/basicAuth/index.ts index e43d51d15..149ab6c19 100644 --- a/src/features/basicAuth/index.js +++ b/src/features/basicAuth/index.ts | |||
@@ -1,4 +1,4 @@ | |||
1 | import { ipcRenderer } from 'electron'; | 1 | import { AuthInfo, BrowserWindow, ipcRenderer } from 'electron'; |
2 | 2 | ||
3 | import BasicAuthComponent from './Component'; | 3 | import BasicAuthComponent from './Component'; |
4 | 4 | ||
@@ -11,7 +11,7 @@ const state = ModalState; | |||
11 | export default function initialize() { | 11 | export default function initialize() { |
12 | debug('Initialize basicAuth feature'); | 12 | debug('Initialize basicAuth feature'); |
13 | 13 | ||
14 | window.ferdi.features.basicAuth = { | 14 | window['ferdi'].features.basicAuth = { |
15 | state, | 15 | state, |
16 | }; | 16 | }; |
17 | 17 | ||
@@ -23,7 +23,7 @@ export default function initialize() { | |||
23 | }); | 23 | }); |
24 | } | 24 | } |
25 | 25 | ||
26 | export function mainIpcHandler(mainWindow, authInfo) { | 26 | export function mainIpcHandler(mainWindow: BrowserWindow, authInfo: AuthInfo) { |
27 | debug('Sending basic auth call', authInfo); | 27 | debug('Sending basic auth call', authInfo); |
28 | 28 | ||
29 | mainWindow.webContents.send('feature:basic-auth-request', { | 29 | mainWindow.webContents.send('feature:basic-auth-request', { |
diff --git a/src/features/nightlyBuilds/index.js b/src/features/nightlyBuilds/index.ts index 89bcb5cb3..14afbaf1b 100644 --- a/src/features/nightlyBuilds/index.js +++ b/src/features/nightlyBuilds/index.ts | |||
@@ -14,26 +14,26 @@ export default function initialize() { | |||
14 | } | 14 | } |
15 | 15 | ||
16 | function toggleFeature() { | 16 | function toggleFeature() { |
17 | if (window.ferdi.stores.settings.app.nightly) { | 17 | if (window['ferdi'].stores.settings.app.nightly) { |
18 | window.ferdi.actions.settings.update({ | 18 | window['ferdi'].actions.settings.update({ |
19 | type: 'app', | 19 | type: 'app', |
20 | data: { | 20 | data: { |
21 | nightly: false, | 21 | nightly: false, |
22 | }, | 22 | }, |
23 | }); | 23 | }); |
24 | window.ferdi.actions.user.update({ | 24 | window['ferdi'].actions.user.update({ |
25 | userData: { | 25 | userData: { |
26 | nightly: false, | 26 | nightly: false, |
27 | }, | 27 | }, |
28 | }); | 28 | }); |
29 | } else { | 29 | } else { |
30 | // We need to close the settings, otherwise the modal will be drawn under the settings window | 30 | // We need to close the settings, otherwise the modal will be drawn under the settings window |
31 | window.ferdi.actions.ui.closeSettings(); | 31 | window['ferdi'].actions.ui.closeSettings(); |
32 | showModal(); | 32 | showModal(); |
33 | } | 33 | } |
34 | } | 34 | } |
35 | 35 | ||
36 | window.ferdi.features.nightlyBuilds = { | 36 | window['ferdi'].features.nightlyBuilds = { |
37 | state, | 37 | state, |
38 | showModal, | 38 | showModal, |
39 | toggleFeature, | 39 | toggleFeature, |
diff --git a/src/features/todos/preload.js b/src/features/todos/preload.ts index 3b86ddbc5..31d473051 100644 --- a/src/features/todos/preload.js +++ b/src/features/todos/preload.ts | |||
@@ -14,7 +14,7 @@ let hostMessageListener = ({ action }) => { | |||
14 | } | 14 | } |
15 | }; | 15 | }; |
16 | 16 | ||
17 | window.ferdi = { | 17 | window['ferdi'] = { |
18 | onInitialize(ipcHostMessageListener) { | 18 | onInitialize(ipcHostMessageListener) { |
19 | hostMessageListener = ipcHostMessageListener; | 19 | hostMessageListener = ipcHostMessageListener; |
20 | ipcRenderer.sendToHost(IPC.TODOS_CLIENT_CHANNEL, { | 20 | ipcRenderer.sendToHost(IPC.TODOS_CLIENT_CHANNEL, { |
diff --git a/src/features/workspaces/components/WorkspaceItem.js b/src/features/workspaces/components/WorkspaceItem.tsx index ff3f69dd9..6fb02d2f5 100644 --- a/src/features/workspaces/components/WorkspaceItem.js +++ b/src/features/workspaces/components/WorkspaceItem.tsx | |||
@@ -16,9 +16,15 @@ const styles = theme => ({ | |||
16 | columnName: {}, | 16 | columnName: {}, |
17 | }); | 17 | }); |
18 | 18 | ||
19 | type Props = { | ||
20 | classes: any; | ||
21 | workspace: any; | ||
22 | onItemClick: (workspace) => void; | ||
23 | }; | ||
24 | |||
19 | @injectSheet(styles) | 25 | @injectSheet(styles) |
20 | @observer | 26 | @observer |
21 | class WorkspaceItem extends Component { | 27 | class WorkspaceItem extends Component<Props> { |
22 | static propTypes = { | 28 | static propTypes = { |
23 | classes: PropTypes.object.isRequired, | 29 | classes: PropTypes.object.isRequired, |
24 | workspace: PropTypes.instanceOf(Workspace).isRequired, | 30 | workspace: PropTypes.instanceOf(Workspace).isRequired, |
diff --git a/src/features/workspaces/components/WorkspaceServiceListItem.js b/src/features/workspaces/components/WorkspaceServiceListItem.tsx index c06f3c61c..b6faaf4ce 100644 --- a/src/features/workspaces/components/WorkspaceServiceListItem.js +++ b/src/features/workspaces/components/WorkspaceServiceListItem.tsx | |||
@@ -1,14 +1,12 @@ | |||
1 | import { Component } from 'react'; | 1 | import { Component } from 'react'; |
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | 2 | import { observer } from 'mobx-react'; |
4 | import injectSheet from 'react-jss'; | 3 | import injectSheet from 'react-jss'; |
5 | import classnames from 'classnames'; | 4 | import classnames from 'classnames'; |
6 | import { Toggle } from '@meetfranz/forms'; | 5 | import { Toggle } from '@meetfranz/forms'; |
7 | 6 | ||
8 | import Service from '../../../models/Service'; | ||
9 | import ServiceIcon from '../../../components/ui/ServiceIcon'; | 7 | import ServiceIcon from '../../../components/ui/ServiceIcon'; |
10 | 8 | ||
11 | const styles = (theme) => ({ | 9 | const styles = theme => ({ |
12 | listItem: { | 10 | listItem: { |
13 | height: theme.workspaces.settings.listItems.height, | 11 | height: theme.workspaces.settings.listItems.height, |
14 | borderBottom: `1px solid ${theme.workspaces.settings.listItems.borderColor}`, | 12 | borderBottom: `1px solid ${theme.workspaces.settings.listItems.borderColor}`, |
@@ -31,29 +29,22 @@ const styles = (theme) => ({ | |||
31 | }, | 29 | }, |
32 | }); | 30 | }); |
33 | 31 | ||
34 | @injectSheet(styles) @observer | 32 | type Props = { |
35 | class WorkspaceServiceListItem extends Component { | 33 | classes: any; |
36 | static propTypes = { | 34 | isInWorkspace: boolean; |
37 | classes: PropTypes.object.isRequired, | 35 | onToggle: () => void; |
38 | isInWorkspace: PropTypes.bool.isRequired, | 36 | service: any; |
39 | onToggle: PropTypes.func.isRequired, | 37 | }; |
40 | service: PropTypes.instanceOf(Service).isRequired, | ||
41 | }; | ||
42 | 38 | ||
39 | @injectSheet(styles) | ||
40 | @observer | ||
41 | class WorkspaceServiceListItem extends Component<Props> { | ||
43 | render() { | 42 | render() { |
44 | const { | 43 | const { classes, isInWorkspace, onToggle, service } = this.props; |
45 | classes, | ||
46 | isInWorkspace, | ||
47 | onToggle, | ||
48 | service, | ||
49 | } = this.props; | ||
50 | 44 | ||
51 | return ( | 45 | return ( |
52 | <div className={classes.listItem}> | 46 | <div className={classes.listItem}> |
53 | <ServiceIcon | 47 | <ServiceIcon className={classes.serviceIcon} service={service} /> |
54 | className={classes.serviceIcon} | ||
55 | service={service} | ||
56 | /> | ||
57 | <span | 48 | <span |
58 | className={classnames([ | 49 | className={classnames([ |
59 | classes.label, | 50 | classes.label, |
diff --git a/src/features/workspaces/containers/EditWorkspaceScreen.js b/src/features/workspaces/containers/EditWorkspaceScreen.tsx index bd9e235e3..8e8f8179d 100644 --- a/src/features/workspaces/containers/EditWorkspaceScreen.js +++ b/src/features/workspaces/containers/EditWorkspaceScreen.tsx | |||
@@ -1,26 +1,26 @@ | |||
1 | import { Component } from 'react'; | 1 | import { Component } from 'react'; |
2 | import { inject, observer } from 'mobx-react'; | 2 | import { inject, observer } from 'mobx-react'; |
3 | import PropTypes from 'prop-types'; | ||
4 | 3 | ||
5 | import ErrorBoundary from '../../../components/util/ErrorBoundary'; | 4 | import ErrorBoundary from '../../../components/util/ErrorBoundary'; |
6 | import EditWorkspaceForm from '../components/EditWorkspaceForm'; | 5 | import EditWorkspaceForm from '../components/EditWorkspaceForm'; |
7 | import ServicesStore from '../../../stores/ServicesStore'; | ||
8 | import Workspace from '../models/Workspace'; | 6 | import Workspace from '../models/Workspace'; |
9 | import { workspaceStore } from '../index'; | 7 | import { workspaceStore } from '../index'; |
10 | import { deleteWorkspaceRequest, updateWorkspaceRequest } from '../api'; | 8 | import { deleteWorkspaceRequest, updateWorkspaceRequest } from '../api'; |
11 | import WorkspacesStore from '../store'; | 9 | import { ServicesStore, WorkspacesStore } from '../../../stores.types'; |
12 | 10 | ||
13 | @inject('stores', 'actions') @observer | 11 | type Props = { |
14 | class EditWorkspaceScreen extends Component { | 12 | actions: { |
15 | static propTypes = { | 13 | workspaces: WorkspacesStore; |
16 | actions: PropTypes.shape({ | ||
17 | workspaces: PropTypes.instanceOf(WorkspacesStore), | ||
18 | }).isRequired, | ||
19 | stores: PropTypes.shape({ | ||
20 | services: PropTypes.instanceOf(ServicesStore).isRequired, | ||
21 | }).isRequired, | ||
22 | }; | 14 | }; |
15 | stores: { | ||
16 | services: ServicesStore; | ||
17 | }; | ||
18 | }; | ||
23 | 19 | ||
20 | @inject('stores', 'actions') | ||
21 | @observer | ||
22 | class EditWorkspaceScreen extends Component<Props> { | ||
23 | // @ts-expect-error Not all code paths return a value. | ||
24 | onDelete = () => { | 24 | onDelete = () => { |
25 | const { workspaceBeingEdited } = workspaceStore; | 25 | const { workspaceBeingEdited } = workspaceStore; |
26 | const { actions } = this.props; | 26 | const { actions } = this.props; |
@@ -28,12 +28,14 @@ class EditWorkspaceScreen extends Component { | |||
28 | actions.workspaces.delete({ workspace: workspaceBeingEdited }); | 28 | actions.workspaces.delete({ workspace: workspaceBeingEdited }); |
29 | }; | 29 | }; |
30 | 30 | ||
31 | onSave = (values) => { | 31 | onSave = values => { |
32 | const { workspaceBeingEdited } = workspaceStore; | 32 | const { workspaceBeingEdited } = workspaceStore; |
33 | const { actions } = this.props; | 33 | const { actions } = this.props; |
34 | const workspace = new Workspace( | 34 | const workspace = new Workspace({ |
35 | ({ saving: true, ...workspaceBeingEdited, ...values }), | 35 | saving: true, |
36 | ); | 36 | ...workspaceBeingEdited, |
37 | ...values, | ||
38 | }); | ||
37 | actions.workspaces.update({ workspace }); | 39 | actions.workspaces.update({ workspace }); |
38 | }; | 40 | }; |
39 | 41 | ||
diff --git a/src/features/workspaces/containers/WorkspacesScreen.js b/src/features/workspaces/containers/WorkspacesScreen.tsx index 2ba3784cb..a07e92439 100644 --- a/src/features/workspaces/containers/WorkspacesScreen.js +++ b/src/features/workspaces/containers/WorkspacesScreen.tsx | |||
@@ -1,6 +1,5 @@ | |||
1 | import { Component } from 'react'; | 1 | import { Component } from 'react'; |
2 | import { inject, observer } from 'mobx-react'; | 2 | import { inject, observer } from 'mobx-react'; |
3 | import PropTypes from 'prop-types'; | ||
4 | import WorkspacesDashboard from '../components/WorkspacesDashboard'; | 3 | import WorkspacesDashboard from '../components/WorkspacesDashboard'; |
5 | import ErrorBoundary from '../../../components/util/ErrorBoundary'; | 4 | import ErrorBoundary from '../../../components/util/ErrorBoundary'; |
6 | import { workspaceStore } from '../index'; | 5 | import { workspaceStore } from '../index'; |
@@ -10,16 +9,17 @@ import { | |||
10 | getUserWorkspacesRequest, | 9 | getUserWorkspacesRequest, |
11 | updateWorkspaceRequest, | 10 | updateWorkspaceRequest, |
12 | } from '../api'; | 11 | } from '../api'; |
13 | import WorkspacesStore from '../store'; | 12 | import { WorkspacesStore } from '../../../stores.types'; |
14 | 13 | ||
15 | @inject('stores', 'actions') @observer | 14 | type Props = { |
16 | class WorkspacesScreen extends Component { | 15 | actions: { |
17 | static propTypes = { | 16 | workspaces: WorkspacesStore; |
18 | actions: PropTypes.shape({ | ||
19 | workspaces: PropTypes.instanceOf(WorkspacesStore), | ||
20 | }).isRequired, | ||
21 | }; | 17 | }; |
18 | }; | ||
22 | 19 | ||
20 | @inject('stores', 'actions') | ||
21 | @observer | ||
22 | class WorkspacesScreen extends Component<Props> { | ||
23 | render() { | 23 | render() { |
24 | const { actions } = this.props; | 24 | const { actions } = this.props; |
25 | return ( | 25 | return ( |
@@ -30,8 +30,8 @@ class WorkspacesScreen extends Component { | |||
30 | createWorkspaceRequest={createWorkspaceRequest} | 30 | createWorkspaceRequest={createWorkspaceRequest} |
31 | deleteWorkspaceRequest={deleteWorkspaceRequest} | 31 | deleteWorkspaceRequest={deleteWorkspaceRequest} |
32 | updateWorkspaceRequest={updateWorkspaceRequest} | 32 | updateWorkspaceRequest={updateWorkspaceRequest} |
33 | onCreateWorkspaceSubmit={(data) => actions.workspaces.create(data)} | 33 | onCreateWorkspaceSubmit={data => actions.workspaces.create(data)} |
34 | onWorkspaceClick={(w) => actions.workspaces.edit({ workspace: w })} | 34 | onWorkspaceClick={w => actions.workspaces.edit({ workspace: w })} |
35 | /> | 35 | /> |
36 | </ErrorBoundary> | 36 | </ErrorBoundary> |
37 | ); | 37 | ); |
diff --git a/src/index.ts b/src/index.ts index 248c6d110..b4a754289 100644 --- a/src/index.ts +++ b/src/index.ts | |||
@@ -499,7 +499,7 @@ app.on('login', (event, _webContents, _request, authInfo, callback) => { | |||
499 | 499 | ||
500 | if (!authInfo.isProxy && authInfo.scheme === 'basic') { | 500 | if (!authInfo.isProxy && authInfo.scheme === 'basic') { |
501 | debug('basic auth handler', authInfo); | 501 | debug('basic auth handler', authInfo); |
502 | basicAuthHandler(mainWindow, authInfo); | 502 | basicAuthHandler(mainWindow!, authInfo); |
503 | } | 503 | } |
504 | }); | 504 | }); |
505 | 505 | ||
diff --git a/src/stores.types.ts b/src/stores.types.ts index dd879179d..e5978a392 100644 --- a/src/stores.types.ts +++ b/src/stores.types.ts | |||
@@ -182,7 +182,7 @@ interface RouterStore { | |||
182 | replace: () => void; | 182 | replace: () => void; |
183 | } | 183 | } |
184 | 184 | ||
185 | interface ServicesStore { | 185 | export interface ServicesStore { |
186 | actions: Actions; | 186 | actions: Actions; |
187 | api: Api; | 187 | api: Api; |
188 | clearCacheRequest: () => void; | 188 | clearCacheRequest: () => void; |
@@ -334,8 +334,13 @@ interface UserStore { | |||
334 | team: () => void; | 334 | team: () => void; |
335 | } | 335 | } |
336 | 336 | ||
337 | interface WorkspacesStore { | 337 | export interface WorkspacesStore { |
338 | activeWorkspace: () => void; | 338 | activeWorkspace: () => void; |
339 | delete: ({ workspace }) => void; | ||
340 | update: ({ workspace }) => void; | ||
341 | create: ({ workspace }) => void; | ||
342 | edit: ({ workspace }) => void; | ||
343 | saving: boolean; | ||
339 | filterServicesByActiveWorkspace: () => void; | 344 | filterServicesByActiveWorkspace: () => void; |
340 | isFeatureActive: () => void; | 345 | isFeatureActive: () => void; |
341 | isFeatureEnabled: () => void; | 346 | isFeatureEnabled: () => void; |