Transform to TS and refactored components w.r.t deletion if duplicated Input component (#729)

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';
 import Service from '../../../models/Service';
 import Tabs from '../../ui/Tabs/Tabs';
 import TabItem from '../../ui/Tabs/TabItem';
-import Input from '../../ui/Input';
+import Input from '../../ui/input/index';
 import Toggle from '../../ui/Toggle';
 import Slider from '../../ui/Slider';
 import Button from '../../ui/button';
@@ -292,7 +292,7 @@ class EditServiceForm extends Component {
         <div className="settings__body">
           <form onSubmit={e => this.submit(e)} id="form">
             <div className="service-name">
-              <Input field={form.$('name')} focus />
+              <Input {...form.$('name').bind()} focus />
             </div>
             {(recipe.hasTeamId || recipe.hasCustomUrl) && (
               <Tabs active={activeTabIndex}>
@@ -314,7 +314,7 @@ class EditServiceForm extends Component {
                 )}
                 {recipe.hasCustomUrl && (
                   <TabItem title={intl.formatMessage(messages.tabOnPremise)}>
-                    <Input field={form.$('customUrl')} />
+                    <Input {...form.$('customUrl').bind()} />
                     {form.error === 'url-validation-error' && (
                       <p className="franz-form__error">
                         {intl.formatMessage(messages.customUrlValidationError, {
@@ -435,17 +435,17 @@ class EditServiceForm extends Component {
                     <div className="grid">
                       <div className="grid__row">
                         <Input
-                          field={form.$('proxy.host')}
+                          {...form.$('proxy.host').bind()}
                           className="proxyHost"
                         />
-                        <Input field={form.$('proxy.port')} />
+                        <Input {...form.$('proxy.port').bind()} />
                       </div>
                     </div>
                     <div className="grid">
                       <div className="grid__row">
-                        <Input field={form.$('proxy.user')} />
+                        <Input {...form.$('proxy.user').bind()} />
                         <Input
-                          field={form.$('proxy.password')}
+                          {...form.$('proxy.password').bind()}
                           showPasswordToggle
                         />
                       </div>
@@ -464,7 +464,7 @@ class EditServiceForm extends Component {
             )}
 
             <div className="user-agent">
-              <Input field={form.$('userAgentPref')} />
+              <Input {...form.$('userAgentPref').bind()} />
               <p className="settings__help">
                 {intl.formatMessage(globalMessages.userAgentHelp)}
               </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 @@
 import { systemPreferences } from '@electron/remote';
 import { Component } from 'react';
-import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import prettyBytes from 'pretty-bytes';
-import { defineMessages, injectIntl } from 'react-intl';
-
+import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { mdiGithub, mdiOpenInNew, mdiPowerPlug } from '@mdi/js';
-
 import Form from '../../../lib/Form';
 import Button from '../../ui/button';
-import Toggle from '../../ui/Toggle';
+import Toggle from '../../ui/Toggle.js';
 import Select from '../../ui/Select';
-import Input from '../../ui/Input';
+import Input from '../../ui/input/index';
 import ColorPickerInput from '../../ui/ColorPickerInput';
 import Infobox from '../../ui/Infobox';
 import { H1, H2, H3, H5 } from '../../ui/headline';
@@ -20,9 +17,7 @@ import {
   userDataPath,
   userDataRecipesPath,
 } from '../../../environment-remote';
-
 import { updateVersionParse } from '../../../helpers/update-helpers';
-
 import {
   DEFAULT_ACCENT_COLOR,
   DEFAULT_APP_SETTINGS,
@@ -264,6 +259,7 @@ const Hr = () => (
     style={{ marginBottom: 20, borderStyle: 'dashed' }}
   />
 );
+
 const HrSections = () => (
   <hr
     className="settings__hr-sections"
@@ -271,32 +267,41 @@ const HrSections = () => (
   />
 );
 
-class EditSettingsForm extends Component {
-  static propTypes = {
-    checkForUpdates: PropTypes.func.isRequired,
-    installUpdate: PropTypes.func.isRequired,
-    form: PropTypes.instanceOf(Form).isRequired,
-    onSubmit: PropTypes.func.isRequired,
-    isCheckingForUpdates: PropTypes.bool.isRequired,
-    isUpdateAvailable: PropTypes.bool.isRequired,
-    noUpdateAvailable: PropTypes.bool.isRequired,
-    updateIsReadyToInstall: PropTypes.bool.isRequired,
-    updateFailed: PropTypes.bool.isRequired,
-    isClearingAllCache: PropTypes.bool.isRequired,
-    onClearAllCache: PropTypes.func.isRequired,
-    getCacheSize: PropTypes.func.isRequired,
-    isTodosActivated: PropTypes.bool.isRequired,
-    automaticUpdates: PropTypes.bool.isRequired,
-    isDarkmodeEnabled: PropTypes.bool.isRequired,
-    isAdaptableDarkModeEnabled: PropTypes.bool.isRequired,
-    isUseGrayscaleServicesEnabled: PropTypes.bool.isRequired,
-    openProcessManager: PropTypes.func.isRequired,
-    isSplitModeEnabled: PropTypes.bool.isRequired,
-    isOnline: PropTypes.bool.isRequired,
-    serverURL: PropTypes.string.isRequired,
-  };
+interface IProps extends WrappedComponentProps {
+  form: Form;
+  isCheckingForUpdates: boolean;
+  isUpdateAvailable: boolean;
+  noUpdateAvailable: boolean;
+  updateIsReadyToInstall: boolean;
+  updateFailed: boolean;
+  isClearingAllCache: boolean;
+  isTodosActivated: boolean;
+  automaticUpdates: boolean;
+  isDarkmodeEnabled: boolean;
+  isAdaptableDarkModeEnabled: boolean;
+  isUseGrayscaleServicesEnabled: boolean;
+  lockingFeatureEnabled: boolean;
+  isSplitModeEnabled: boolean;
+  isOnline: boolean;
+  showServicesUpdatedInfoBar: boolean;
+  updateVersion: string;
+  serverURL: string;
+  onClearAllCache: () => void;
+  getCacheSize: () => void;
+  checkForUpdates: () => void;
+  installUpdate: () => void;
+  openProcessManager: () => void;
+  onSubmit: (...args: any[]) => void;
+}
+
+interface IState {
+  activeSetttingsTab: string;
+  clearCacheButtonClicked: boolean;
+}
 
-  constructor(props) {
+@observer
+class EditSettingsForm extends Component<IProps, IState> {
+  constructor(props: IProps) {
     super(props);
 
     this.state = {
@@ -358,8 +363,8 @@ class EditSettingsForm extends Component {
       isTodosActivated,
       isOnline,
       serverURL,
+      intl,
     } = this.props;
-    const { intl } = this.props;
 
     let updateButtonLabelMessage = messages.buttonSearchForUpdate;
     if (isCheckingForUpdates) {
@@ -520,7 +525,7 @@ class EditSettingsForm extends Component {
                 <Toggle field={form.$('reloadAfterResume')} />
                 {reloadAfterResume && (
                   <div>
-                    <Input field={form.$('reloadAfterResumeTime')} />
+                    <Input {...form.$('reloadAfterResumeTime').bind()} />
                     <Hr />
                   </div>
                 )}
@@ -541,7 +546,7 @@ class EditSettingsForm extends Component {
                         <Input
                           placeholder="Todo Server"
                           onChange={e => this.submit(e)}
-                          field={form.$('customTodoServer')}
+                          {...form.$('customTodoServer').bind()}
                         />
                         <p
                           className="settings__message"
@@ -580,7 +585,7 @@ class EditSettingsForm extends Component {
                         <Input
                           placeholder="17:00"
                           onChange={e => this.submit(e)}
-                          field={form.$('scheduledDNDStart')}
+                          {...form.$('scheduledDNDStart').bind()}
                           type="time"
                         />
                       </div>
@@ -593,7 +598,7 @@ class EditSettingsForm extends Component {
                         <Input
                           placeholder="09:00"
                           onChange={e => this.submit(e)}
-                          field={form.$('scheduledDNDEnd')}
+                          {...form.$('scheduledDNDEnd').bind()}
                           type="time"
                         />
                       </div>
@@ -711,7 +716,7 @@ class EditSettingsForm extends Component {
                     max={SPLIT_COLUMNS_MAX}
                     placeholder={`${SPLIT_COLUMNS_MIN}-${SPLIT_COLUMNS_MAX}`}
                     onChange={e => this.submit(e)}
-                    field={form.$('splitColumns')}
+                    {...form.$('splitColumns').bind()}
                   />
                 )}
 
@@ -825,7 +830,7 @@ class EditSettingsForm extends Component {
                     <Input
                       placeholder={intl.formatMessage(messages.lockedPassword)}
                       onChange={e => this.submit(e)}
-                      field={form.$('lockedPassword')}
+                      {...form.$('lockedPassword')}
                       type="password"
                       scorePassword
                       showPasswordToggle
@@ -835,7 +840,7 @@ class EditSettingsForm extends Component {
                     <Input
                       placeholder="Lock after inactivity"
                       onChange={e => this.submit(e)}
-                      field={form.$('inactivityLock')}
+                      {...form.$('inactivityLock')}
                       autoFocus
                     />
                     <p>{intl.formatMessage(messages.inactivityLockInfo)}</p>
@@ -927,7 +932,7 @@ class EditSettingsForm extends Component {
                 <Input
                   placeholder="User Agent"
                   onChange={e => this.submit(e)}
-                  field={form.$('userAgentPref')}
+                  {...form.$('userAgentPref').bind()}
                 />
                 <p className="settings__help">
                   {intl.formatMessage(globalMessages.userAgentHelp)}
@@ -1128,4 +1133,4 @@ class EditSettingsForm extends Component {
   }
 }
 
-export default injectIntl(observer(EditSettingsForm));
+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 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
-import { defineMessages, injectIntl } from 'react-intl';
+import { Component, FormEvent, FormEventHandler, ReactElement } from 'react';
+import { observer } from 'mobx-react';
+import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { Link } from 'react-router-dom';
-
+import { noop } from 'lodash';
 import Input from '../../ui/input/index';
 import Form from '../../../lib/Form';
 import Button from '../../ui/button';
@@ -38,15 +37,16 @@ const messages = defineMessages({
   },
 });
 
-class EditUserForm extends Component {
-  static propTypes = {
-    status: MobxPropTypes.observableArray.isRequired,
-    form: PropTypes.instanceOf(Form).isRequired,
-    onSubmit: PropTypes.func.isRequired,
-    isSaving: PropTypes.bool.isRequired,
-  };
+interface IProps extends WrappedComponentProps {
+  status: string[];
+  form: Form;
+  onSubmit: FormEventHandler<HTMLFormElement>;
+  isSaving: boolean;
+}
 
-  submit(e) {
+@observer
+class EditUserForm extends Component<IProps> {
+  submit(e: FormEvent<HTMLFormElement>): void {
     e.preventDefault();
     this.props.form.submit({
       onSuccess: form => {
@@ -57,14 +57,14 @@ class EditUserForm extends Component {
     });
   }
 
-  render() {
+  render(): ReactElement {
     const {
       // user,
       status,
       form,
       isSaving,
+      intl,
     } = this.props;
-    const { intl } = this.props;
 
     return (
       <div className="settings__main">
@@ -92,9 +92,9 @@ class EditUserForm extends Component {
               <Input {...form.$('lastname').bind()} />
             </div>
             <Input {...form.$('email').bind()} />
-            <Radio field={form.$('accountType')} />
+            <Radio field={form.$('accountType')} className="" />
             {form.$('accountType').value === 'company' && (
-              <Input field={form.$('organization')} />
+              <Input {...form.$('organization').bind()} />
             )}
             <H2>{intl.formatMessage(messages.headlinePassword)}</H2>
             <Input {...form.$('oldPassword').bind()} showPasswordToggle />
@@ -114,12 +114,14 @@ class EditUserForm extends Component {
               loaded={!isSaving}
               buttonType="secondary"
               disabled
+              onClick={noop}
             />
           ) : (
             <Button
               type="submit"
               label={intl.formatMessage(messages.buttonSave)}
               htmlForm="form"
+              onClick={noop}
             />
           )}
         </div>
@@ -128,4 +130,4 @@ class EditUserForm extends Component {
   }
 }
 
-export default injectIntl(observer(EditUserForm));
+export default injectIntl(EditUserForm);