diff options
author | muhamedsalih-tw <104364298+muhamedsalih-tw@users.noreply.github.com> | 2022-11-02 06:31:36 +0530 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-11-02 01:01:36 +0000 |
commit | 302d595f7c289387e53a0ef7df4d574ed4e25d70 (patch) | |
tree | 2385e59eaca9c78921d9b0b3681cfba1b3eef168 /src/components/settings | |
parent | Re-enable editing of the address bar to manually access a different url withi... (diff) | |
download | ferdium-app-302d595f7c289387e53a0ef7df4d574ed4e25d70.tar.gz ferdium-app-302d595f7c289387e53a0ef7df4d574ed4e25d70.tar.zst ferdium-app-302d595f7c289387e53a0ef7df4d574ed4e25d70.zip |
Transform to TS and refactored components w.r.t deletion if duplicated Input component (#729)
Diffstat (limited to 'src/components/settings')
-rw-r--r-- | src/components/settings/services/EditServiceForm.js | 16 | ||||
-rw-r--r-- | src/components/settings/settings/EditSettingsForm.tsx (renamed from src/components/settings/settings/EditSettingsForm.jsx) | 91 | ||||
-rw-r--r-- | src/components/settings/user/EditUserForm.tsx (renamed from src/components/settings/user/EditUserForm.js) | 38 |
3 files changed, 76 insertions, 69 deletions
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js index 069b6643c..eeb9ef54d 100644 --- a/src/components/settings/services/EditServiceForm.js +++ b/src/components/settings/services/EditServiceForm.js | |||
@@ -11,7 +11,7 @@ import Recipe from '../../../models/Recipe'; | |||
11 | import Service from '../../../models/Service'; | 11 | import Service from '../../../models/Service'; |
12 | import Tabs from '../../ui/Tabs/Tabs'; | 12 | import Tabs from '../../ui/Tabs/Tabs'; |
13 | import TabItem from '../../ui/Tabs/TabItem'; | 13 | import TabItem from '../../ui/Tabs/TabItem'; |
14 | import Input from '../../ui/Input'; | 14 | import Input from '../../ui/input/index'; |
15 | import Toggle from '../../ui/Toggle'; | 15 | import Toggle from '../../ui/Toggle'; |
16 | import Slider from '../../ui/Slider'; | 16 | import Slider from '../../ui/Slider'; |
17 | import Button from '../../ui/button'; | 17 | import Button from '../../ui/button'; |
@@ -292,7 +292,7 @@ class EditServiceForm extends Component { | |||
292 | <div className="settings__body"> | 292 | <div className="settings__body"> |
293 | <form onSubmit={e => this.submit(e)} id="form"> | 293 | <form onSubmit={e => this.submit(e)} id="form"> |
294 | <div className="service-name"> | 294 | <div className="service-name"> |
295 | <Input field={form.$('name')} focus /> | 295 | <Input {...form.$('name').bind()} focus /> |
296 | </div> | 296 | </div> |
297 | {(recipe.hasTeamId || recipe.hasCustomUrl) && ( | 297 | {(recipe.hasTeamId || recipe.hasCustomUrl) && ( |
298 | <Tabs active={activeTabIndex}> | 298 | <Tabs active={activeTabIndex}> |
@@ -314,7 +314,7 @@ class EditServiceForm extends Component { | |||
314 | )} | 314 | )} |
315 | {recipe.hasCustomUrl && ( | 315 | {recipe.hasCustomUrl && ( |
316 | <TabItem title={intl.formatMessage(messages.tabOnPremise)}> | 316 | <TabItem title={intl.formatMessage(messages.tabOnPremise)}> |
317 | <Input field={form.$('customUrl')} /> | 317 | <Input {...form.$('customUrl').bind()} /> |
318 | {form.error === 'url-validation-error' && ( | 318 | {form.error === 'url-validation-error' && ( |
319 | <p className="franz-form__error"> | 319 | <p className="franz-form__error"> |
320 | {intl.formatMessage(messages.customUrlValidationError, { | 320 | {intl.formatMessage(messages.customUrlValidationError, { |
@@ -435,17 +435,17 @@ class EditServiceForm extends Component { | |||
435 | <div className="grid"> | 435 | <div className="grid"> |
436 | <div className="grid__row"> | 436 | <div className="grid__row"> |
437 | <Input | 437 | <Input |
438 | field={form.$('proxy.host')} | 438 | {...form.$('proxy.host').bind()} |
439 | className="proxyHost" | 439 | className="proxyHost" |
440 | /> | 440 | /> |
441 | <Input field={form.$('proxy.port')} /> | 441 | <Input {...form.$('proxy.port').bind()} /> |
442 | </div> | 442 | </div> |
443 | </div> | 443 | </div> |
444 | <div className="grid"> | 444 | <div className="grid"> |
445 | <div className="grid__row"> | 445 | <div className="grid__row"> |
446 | <Input field={form.$('proxy.user')} /> | 446 | <Input {...form.$('proxy.user').bind()} /> |
447 | <Input | 447 | <Input |
448 | field={form.$('proxy.password')} | 448 | {...form.$('proxy.password').bind()} |
449 | showPasswordToggle | 449 | showPasswordToggle |
450 | /> | 450 | /> |
451 | </div> | 451 | </div> |
@@ -464,7 +464,7 @@ class EditServiceForm extends Component { | |||
464 | )} | 464 | )} |
465 | 465 | ||
466 | <div className="user-agent"> | 466 | <div className="user-agent"> |
467 | <Input field={form.$('userAgentPref')} /> | 467 | <Input {...form.$('userAgentPref').bind()} /> |
468 | <p className="settings__help"> | 468 | <p className="settings__help"> |
469 | {intl.formatMessage(globalMessages.userAgentHelp)} | 469 | {intl.formatMessage(globalMessages.userAgentHelp)} |
470 | </p> | 470 | </p> |
diff --git a/src/components/settings/settings/EditSettingsForm.jsx b/src/components/settings/settings/EditSettingsForm.tsx index a327dccac..5c422b977 100644 --- a/src/components/settings/settings/EditSettingsForm.jsx +++ b/src/components/settings/settings/EditSettingsForm.tsx | |||
@@ -1,17 +1,14 @@ | |||
1 | import { systemPreferences } from '@electron/remote'; | 1 | import { systemPreferences } from '@electron/remote'; |
2 | import { Component } from 'react'; | 2 | import { Component } from 'react'; |
3 | import PropTypes from 'prop-types'; | ||
4 | import { observer } from 'mobx-react'; | 3 | import { observer } from 'mobx-react'; |
5 | import prettyBytes from 'pretty-bytes'; | 4 | import prettyBytes from 'pretty-bytes'; |
6 | import { defineMessages, injectIntl } from 'react-intl'; | 5 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; |
7 | |||
8 | import { mdiGithub, mdiOpenInNew, mdiPowerPlug } from '@mdi/js'; | 6 | import { mdiGithub, mdiOpenInNew, mdiPowerPlug } from '@mdi/js'; |
9 | |||
10 | import Form from '../../../lib/Form'; | 7 | import Form from '../../../lib/Form'; |
11 | import Button from '../../ui/button'; | 8 | import Button from '../../ui/button'; |
12 | import Toggle from '../../ui/Toggle'; | 9 | import Toggle from '../../ui/Toggle.js'; |
13 | import Select from '../../ui/Select'; | 10 | import Select from '../../ui/Select'; |
14 | import Input from '../../ui/Input'; | 11 | import Input from '../../ui/input/index'; |
15 | import ColorPickerInput from '../../ui/ColorPickerInput'; | 12 | import ColorPickerInput from '../../ui/ColorPickerInput'; |
16 | import Infobox from '../../ui/Infobox'; | 13 | import Infobox from '../../ui/Infobox'; |
17 | import { H1, H2, H3, H5 } from '../../ui/headline'; | 14 | import { H1, H2, H3, H5 } from '../../ui/headline'; |
@@ -20,9 +17,7 @@ import { | |||
20 | userDataPath, | 17 | userDataPath, |
21 | userDataRecipesPath, | 18 | userDataRecipesPath, |
22 | } from '../../../environment-remote'; | 19 | } from '../../../environment-remote'; |
23 | |||
24 | import { updateVersionParse } from '../../../helpers/update-helpers'; | 20 | import { updateVersionParse } from '../../../helpers/update-helpers'; |
25 | |||
26 | import { | 21 | import { |
27 | DEFAULT_ACCENT_COLOR, | 22 | DEFAULT_ACCENT_COLOR, |
28 | DEFAULT_APP_SETTINGS, | 23 | DEFAULT_APP_SETTINGS, |
@@ -264,6 +259,7 @@ const Hr = () => ( | |||
264 | style={{ marginBottom: 20, borderStyle: 'dashed' }} | 259 | style={{ marginBottom: 20, borderStyle: 'dashed' }} |
265 | /> | 260 | /> |
266 | ); | 261 | ); |
262 | |||
267 | const HrSections = () => ( | 263 | const HrSections = () => ( |
268 | <hr | 264 | <hr |
269 | className="settings__hr-sections" | 265 | className="settings__hr-sections" |
@@ -271,32 +267,41 @@ const HrSections = () => ( | |||
271 | /> | 267 | /> |
272 | ); | 268 | ); |
273 | 269 | ||
274 | class EditSettingsForm extends Component { | 270 | interface IProps extends WrappedComponentProps { |
275 | static propTypes = { | 271 | form: Form; |
276 | checkForUpdates: PropTypes.func.isRequired, | 272 | isCheckingForUpdates: boolean; |
277 | installUpdate: PropTypes.func.isRequired, | 273 | isUpdateAvailable: boolean; |
278 | form: PropTypes.instanceOf(Form).isRequired, | 274 | noUpdateAvailable: boolean; |
279 | onSubmit: PropTypes.func.isRequired, | 275 | updateIsReadyToInstall: boolean; |
280 | isCheckingForUpdates: PropTypes.bool.isRequired, | 276 | updateFailed: boolean; |
281 | isUpdateAvailable: PropTypes.bool.isRequired, | 277 | isClearingAllCache: boolean; |
282 | noUpdateAvailable: PropTypes.bool.isRequired, | 278 | isTodosActivated: boolean; |
283 | updateIsReadyToInstall: PropTypes.bool.isRequired, | 279 | automaticUpdates: boolean; |
284 | updateFailed: PropTypes.bool.isRequired, | 280 | isDarkmodeEnabled: boolean; |
285 | isClearingAllCache: PropTypes.bool.isRequired, | 281 | isAdaptableDarkModeEnabled: boolean; |
286 | onClearAllCache: PropTypes.func.isRequired, | 282 | isUseGrayscaleServicesEnabled: boolean; |
287 | getCacheSize: PropTypes.func.isRequired, | 283 | lockingFeatureEnabled: boolean; |
288 | isTodosActivated: PropTypes.bool.isRequired, | 284 | isSplitModeEnabled: boolean; |
289 | automaticUpdates: PropTypes.bool.isRequired, | 285 | isOnline: boolean; |
290 | isDarkmodeEnabled: PropTypes.bool.isRequired, | 286 | showServicesUpdatedInfoBar: boolean; |
291 | isAdaptableDarkModeEnabled: PropTypes.bool.isRequired, | 287 | updateVersion: string; |
292 | isUseGrayscaleServicesEnabled: PropTypes.bool.isRequired, | 288 | serverURL: string; |
293 | openProcessManager: PropTypes.func.isRequired, | 289 | onClearAllCache: () => void; |
294 | isSplitModeEnabled: PropTypes.bool.isRequired, | 290 | getCacheSize: () => void; |
295 | isOnline: PropTypes.bool.isRequired, | 291 | checkForUpdates: () => void; |
296 | serverURL: PropTypes.string.isRequired, | 292 | installUpdate: () => void; |
297 | }; | 293 | openProcessManager: () => void; |
294 | onSubmit: (...args: any[]) => void; | ||
295 | } | ||
296 | |||
297 | interface IState { | ||
298 | activeSetttingsTab: string; | ||
299 | clearCacheButtonClicked: boolean; | ||
300 | } | ||
298 | 301 | ||
299 | constructor(props) { | 302 | @observer |
303 | class EditSettingsForm extends Component<IProps, IState> { | ||
304 | constructor(props: IProps) { | ||
300 | super(props); | 305 | super(props); |
301 | 306 | ||
302 | this.state = { | 307 | this.state = { |
@@ -358,8 +363,8 @@ class EditSettingsForm extends Component { | |||
358 | isTodosActivated, | 363 | isTodosActivated, |
359 | isOnline, | 364 | isOnline, |
360 | serverURL, | 365 | serverURL, |
366 | intl, | ||
361 | } = this.props; | 367 | } = this.props; |
362 | const { intl } = this.props; | ||
363 | 368 | ||
364 | let updateButtonLabelMessage = messages.buttonSearchForUpdate; | 369 | let updateButtonLabelMessage = messages.buttonSearchForUpdate; |
365 | if (isCheckingForUpdates) { | 370 | if (isCheckingForUpdates) { |
@@ -520,7 +525,7 @@ class EditSettingsForm extends Component { | |||
520 | <Toggle field={form.$('reloadAfterResume')} /> | 525 | <Toggle field={form.$('reloadAfterResume')} /> |
521 | {reloadAfterResume && ( | 526 | {reloadAfterResume && ( |
522 | <div> | 527 | <div> |
523 | <Input field={form.$('reloadAfterResumeTime')} /> | 528 | <Input {...form.$('reloadAfterResumeTime').bind()} /> |
524 | <Hr /> | 529 | <Hr /> |
525 | </div> | 530 | </div> |
526 | )} | 531 | )} |
@@ -541,7 +546,7 @@ class EditSettingsForm extends Component { | |||
541 | <Input | 546 | <Input |
542 | placeholder="Todo Server" | 547 | placeholder="Todo Server" |
543 | onChange={e => this.submit(e)} | 548 | onChange={e => this.submit(e)} |
544 | field={form.$('customTodoServer')} | 549 | {...form.$('customTodoServer').bind()} |
545 | /> | 550 | /> |
546 | <p | 551 | <p |
547 | className="settings__message" | 552 | className="settings__message" |
@@ -580,7 +585,7 @@ class EditSettingsForm extends Component { | |||
580 | <Input | 585 | <Input |
581 | placeholder="17:00" | 586 | placeholder="17:00" |
582 | onChange={e => this.submit(e)} | 587 | onChange={e => this.submit(e)} |
583 | field={form.$('scheduledDNDStart')} | 588 | {...form.$('scheduledDNDStart').bind()} |
584 | type="time" | 589 | type="time" |
585 | /> | 590 | /> |
586 | </div> | 591 | </div> |
@@ -593,7 +598,7 @@ class EditSettingsForm extends Component { | |||
593 | <Input | 598 | <Input |
594 | placeholder="09:00" | 599 | placeholder="09:00" |
595 | onChange={e => this.submit(e)} | 600 | onChange={e => this.submit(e)} |
596 | field={form.$('scheduledDNDEnd')} | 601 | {...form.$('scheduledDNDEnd').bind()} |
597 | type="time" | 602 | type="time" |
598 | /> | 603 | /> |
599 | </div> | 604 | </div> |
@@ -711,7 +716,7 @@ class EditSettingsForm extends Component { | |||
711 | max={SPLIT_COLUMNS_MAX} | 716 | max={SPLIT_COLUMNS_MAX} |
712 | placeholder={`${SPLIT_COLUMNS_MIN}-${SPLIT_COLUMNS_MAX}`} | 717 | placeholder={`${SPLIT_COLUMNS_MIN}-${SPLIT_COLUMNS_MAX}`} |
713 | onChange={e => this.submit(e)} | 718 | onChange={e => this.submit(e)} |
714 | field={form.$('splitColumns')} | 719 | {...form.$('splitColumns').bind()} |
715 | /> | 720 | /> |
716 | )} | 721 | )} |
717 | 722 | ||
@@ -825,7 +830,7 @@ class EditSettingsForm extends Component { | |||
825 | <Input | 830 | <Input |
826 | placeholder={intl.formatMessage(messages.lockedPassword)} | 831 | placeholder={intl.formatMessage(messages.lockedPassword)} |
827 | onChange={e => this.submit(e)} | 832 | onChange={e => this.submit(e)} |
828 | field={form.$('lockedPassword')} | 833 | {...form.$('lockedPassword')} |
829 | type="password" | 834 | type="password" |
830 | scorePassword | 835 | scorePassword |
831 | showPasswordToggle | 836 | showPasswordToggle |
@@ -835,7 +840,7 @@ class EditSettingsForm extends Component { | |||
835 | <Input | 840 | <Input |
836 | placeholder="Lock after inactivity" | 841 | placeholder="Lock after inactivity" |
837 | onChange={e => this.submit(e)} | 842 | onChange={e => this.submit(e)} |
838 | field={form.$('inactivityLock')} | 843 | {...form.$('inactivityLock')} |
839 | autoFocus | 844 | autoFocus |
840 | /> | 845 | /> |
841 | <p>{intl.formatMessage(messages.inactivityLockInfo)}</p> | 846 | <p>{intl.formatMessage(messages.inactivityLockInfo)}</p> |
@@ -927,7 +932,7 @@ class EditSettingsForm extends Component { | |||
927 | <Input | 932 | <Input |
928 | placeholder="User Agent" | 933 | placeholder="User Agent" |
929 | onChange={e => this.submit(e)} | 934 | onChange={e => this.submit(e)} |
930 | field={form.$('userAgentPref')} | 935 | {...form.$('userAgentPref').bind()} |
931 | /> | 936 | /> |
932 | <p className="settings__help"> | 937 | <p className="settings__help"> |
933 | {intl.formatMessage(globalMessages.userAgentHelp)} | 938 | {intl.formatMessage(globalMessages.userAgentHelp)} |
@@ -1128,4 +1133,4 @@ class EditSettingsForm extends Component { | |||
1128 | } | 1133 | } |
1129 | } | 1134 | } |
1130 | 1135 | ||
1131 | export default injectIntl(observer(EditSettingsForm)); | 1136 | export default injectIntl(EditSettingsForm); |
diff --git a/src/components/settings/user/EditUserForm.js b/src/components/settings/user/EditUserForm.tsx index c2773a47d..3b604a79f 100644 --- a/src/components/settings/user/EditUserForm.js +++ b/src/components/settings/user/EditUserForm.tsx | |||
@@ -1,9 +1,8 @@ | |||
1 | import { Component } from 'react'; | 1 | import { Component, FormEvent, FormEventHandler, ReactElement } 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 { Link } from 'react-router-dom'; | 4 | import { Link } from 'react-router-dom'; |
6 | 5 | import { noop } from 'lodash'; | |
7 | import Input from '../../ui/input/index'; | 6 | import Input from '../../ui/input/index'; |
8 | import Form from '../../../lib/Form'; | 7 | import Form from '../../../lib/Form'; |
9 | import Button from '../../ui/button'; | 8 | import Button from '../../ui/button'; |
@@ -38,15 +37,16 @@ const messages = defineMessages({ | |||
38 | }, | 37 | }, |
39 | }); | 38 | }); |
40 | 39 | ||
41 | class EditUserForm extends Component { | 40 | interface IProps extends WrappedComponentProps { |
42 | static propTypes = { | 41 | status: string[]; |
43 | status: MobxPropTypes.observableArray.isRequired, | 42 | form: Form; |
44 | form: PropTypes.instanceOf(Form).isRequired, | 43 | onSubmit: FormEventHandler<HTMLFormElement>; |
45 | onSubmit: PropTypes.func.isRequired, | 44 | isSaving: boolean; |
46 | isSaving: PropTypes.bool.isRequired, | 45 | } |
47 | }; | ||
48 | 46 | ||
49 | submit(e) { | 47 | @observer |
48 | class EditUserForm extends Component<IProps> { | ||
49 | submit(e: FormEvent<HTMLFormElement>): void { | ||
50 | e.preventDefault(); | 50 | e.preventDefault(); |
51 | this.props.form.submit({ | 51 | this.props.form.submit({ |
52 | onSuccess: form => { | 52 | onSuccess: form => { |
@@ -57,14 +57,14 @@ class EditUserForm extends Component { | |||
57 | }); | 57 | }); |
58 | } | 58 | } |
59 | 59 | ||
60 | render() { | 60 | render(): ReactElement { |
61 | const { | 61 | const { |
62 | // user, | 62 | // user, |
63 | status, | 63 | status, |
64 | form, | 64 | form, |
65 | isSaving, | 65 | isSaving, |
66 | intl, | ||
66 | } = this.props; | 67 | } = this.props; |
67 | const { intl } = this.props; | ||
68 | 68 | ||
69 | return ( | 69 | return ( |
70 | <div className="settings__main"> | 70 | <div className="settings__main"> |
@@ -92,9 +92,9 @@ class EditUserForm extends Component { | |||
92 | <Input {...form.$('lastname').bind()} /> | 92 | <Input {...form.$('lastname').bind()} /> |
93 | </div> | 93 | </div> |
94 | <Input {...form.$('email').bind()} /> | 94 | <Input {...form.$('email').bind()} /> |
95 | <Radio field={form.$('accountType')} /> | 95 | <Radio field={form.$('accountType')} className="" /> |
96 | {form.$('accountType').value === 'company' && ( | 96 | {form.$('accountType').value === 'company' && ( |
97 | <Input field={form.$('organization')} /> | 97 | <Input {...form.$('organization').bind()} /> |
98 | )} | 98 | )} |
99 | <H2>{intl.formatMessage(messages.headlinePassword)}</H2> | 99 | <H2>{intl.formatMessage(messages.headlinePassword)}</H2> |
100 | <Input {...form.$('oldPassword').bind()} showPasswordToggle /> | 100 | <Input {...form.$('oldPassword').bind()} showPasswordToggle /> |
@@ -114,12 +114,14 @@ class EditUserForm extends Component { | |||
114 | loaded={!isSaving} | 114 | loaded={!isSaving} |
115 | buttonType="secondary" | 115 | buttonType="secondary" |
116 | disabled | 116 | disabled |
117 | onClick={noop} | ||
117 | /> | 118 | /> |
118 | ) : ( | 119 | ) : ( |
119 | <Button | 120 | <Button |
120 | type="submit" | 121 | type="submit" |
121 | label={intl.formatMessage(messages.buttonSave)} | 122 | label={intl.formatMessage(messages.buttonSave)} |
122 | htmlForm="form" | 123 | htmlForm="form" |
124 | onClick={noop} | ||
123 | /> | 125 | /> |
124 | )} | 126 | )} |
125 | </div> | 127 | </div> |
@@ -128,4 +130,4 @@ class EditUserForm extends Component { | |||
128 | } | 130 | } |
129 | } | 131 | } |
130 | 132 | ||
131 | export default injectIntl(observer(EditUserForm)); | 133 | export default injectIntl(EditUserForm); |