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

6 files changed, 199 insertions, 177 deletions

diff --git a/src/components/auth/ChangeServer.tsx b/src/components/auth/ChangeServer.tsx
index d8509f599..c49e52673 100644
--- a/src/components/auth/ChangeServer.tsx
+++ b/src/components/auth/ChangeServer.tsx
@@ -4,7 +4,7 @@ import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { mdiArrowLeftCircle } from '@mdi/js';
 import { noop } from 'lodash';
 import Form from '../../lib/Form';
-import Input from '../ui/Input';
+import Input from '../ui/input/index';
 import Select from '../ui/Select';
 import Button from '../ui/button';
 import Link from '../ui/Link';
@@ -128,7 +128,10 @@ class ChangeServer extends Component<IProps> {
           )}
           <Select field={form.$('server')} />
           {!this.defaultServers.includes(form.$('server').value) && (
-            <Input placeholder="Custom Server" field={form.$('customServer')} />
+            <Input
+              placeholder="Custom Server"
+              {...form.$('customServer').bind()}
+            />
           )}
           <Button
             type="submit"
diff --git a/src/components/auth/Invite.js b/src/components/auth/Invite.tsx
index 6b0e0e40b..7723ea1ac 100644
--- a/src/components/auth/Invite.js
+++ b/src/components/auth/Invite.tsx
@@ -1,15 +1,14 @@
-import { Component, Fragment } from 'react';
-import PropTypes from 'prop-types';
+import { Component } from 'react';
 import { observer } from 'mobx-react';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { Link } from 'react-router-dom';
 import classnames from 'classnames';
-
+import { noop } from 'lodash';
 import Infobox from '../ui/Infobox';
 import Appear from '../ui/effects/Appear';
 import Form from '../../lib/Form';
-import { email } from '../../helpers/validation-helpers';
-import Input from '../ui/Input';
+import { email, required } from '../../helpers/validation-helpers';
+import Input from '../ui/input/index';
 import Button from '../ui/button';
 import { H1 } from '../ui/headline';
 
@@ -44,55 +43,61 @@ const messages = defineMessages({
   },
 });
 
-class Invite extends Component {
-  static propTypes = {
-    onSubmit: PropTypes.func.isRequired,
-    embed: PropTypes.bool,
-    isInviteSuccessful: PropTypes.bool,
-    isLoadingInvite: PropTypes.bool,
-  };
-
-  static defaultProps = {
-    embed: false,
-    isInviteSuccessful: false,
-    isLoadingInvite: false,
-  };
+interface IProps extends WrappedComponentProps {
+  onSubmit: (...args: any[]) => void;
+  embed?: boolean;
+  isInviteSuccessful?: boolean;
+  isLoadingInvite?: boolean;
+}
 
-  state = { showSuccessInfo: false };
+interface IState {
+  showSuccessInfo: boolean;
+}
 
-  componentDidMount() {
-    const { intl } = this.props;
-    this.form = new Form(
-      {
-        fields: {
-          invite: [
-            ...Array.from({ length: 3 }).fill({
-              fields: {
-                name: {
-                  label: intl.formatMessage(messages.nameLabel),
-                  placeholder: intl.formatMessage(messages.nameLabel),
-                  onChange: () => {
-                    this.setState({ showSuccessInfo: false });
-                  },
-                  // related: ['invite.0.email'], // path accepted but does not work
+@observer
+class Invite extends Component<IProps, IState> {
+  form: Form;
+
+  constructor(props: IProps) {
+    super(props);
+
+    this.state = { showSuccessInfo: false };
+    this.form = new Form({
+      fields: {
+        invite: [
+          ...Array.from({ length: 3 }).fill({
+            fields: {
+              name: {
+                label: this.props.intl.formatMessage(messages.nameLabel),
+                placeholder: this.props.intl.formatMessage(messages.nameLabel),
+                onChange: () => {
+                  this.setState({ showSuccessInfo: false });
                 },
-                email: {
-                  label: intl.formatMessage(messages.emailLabel),
-                  placeholder: intl.formatMessage(messages.emailLabel),
-                  onChange: () => {
-                    this.setState({ showSuccessInfo: false });
-                  },
-                  validators: [email],
+                validators: [required],
+                // related: ['invite.0.email'], // path accepted but does not work
+              },
+              email: {
+                label: this.props.intl.formatMessage(messages.emailLabel),
+                placeholder: this.props.intl.formatMessage(messages.emailLabel),
+                onChange: () => {
+                  this.setState({ showSuccessInfo: false });
                 },
+                validators: [email],
               },
-            }),
-          ],
-        },
+            },
+          }),
+          // TODO - [TS DEBT] need to fix this type once mobx-react-form is updated to next version
+        ] as any,
       },
-      intl,
-    );
+    });
+  }
 
-    document.querySelector('input:first-child')?.focus();
+  componentDidMount() {
+    const selector: HTMLElement | null =
+      document.querySelector('input:first-child');
+    if (selector) {
+      selector.focus();
+    }
   }
 
   submit(e) {
@@ -101,10 +106,15 @@ class Invite extends Component {
     this.form?.submit({
       onSuccess: form => {
         this.props.onSubmit({ invites: form.values().invite });
-
         this.form?.clear();
         // this.form.$('invite.0.name').focus(); // path accepted but does not focus ;(
-        document.querySelector('input:first-child')?.focus();
+
+        const selector: HTMLElement | null =
+          document.querySelector('input:first-child');
+        if (selector) {
+          selector.focus();
+        }
+
         this.setState({ showSuccessInfo: true });
       },
       onError: () => {},
@@ -114,7 +124,11 @@ class Invite extends Component {
   render() {
     const { form } = this;
     const { intl } = this.props;
-    const { embed, isInviteSuccessful, isLoadingInvite } = this.props;
+    const {
+      embed = false,
+      isInviteSuccessful = false,
+      isLoadingInvite = false,
+    } = this.props;
 
     const atLeastOneEmailAddress = form
       .$('invite')
@@ -133,7 +147,7 @@ class Invite extends Component {
             <Infobox
               type="success"
               icon="checkbox-marked-circle-outline"
-              dismissable
+              dismissible
             >
               {intl.formatMessage(messages.inviteSuccessInfo)}
             </Infobox>
@@ -144,14 +158,14 @@ class Invite extends Component {
           {!embed && (
             <img src="./assets/images/logo.svg" className="auth__logo" alt="" />
           )}
-          <H1 className={embed && 'invite__embed'}>
+          <H1 className={embed ? 'invite__embed' : ''}>
             {intl.formatMessage(messages.headline)}
           </H1>
           {form.$('invite').map(invite => (
             <div className="grid" key={invite.key}>
               <div className="grid__row">
-                <Input field={invite.$('name')} showLabel={false} />
-                <Input field={invite.$('email')} showLabel={false} />
+                <Input {...invite.$('name').bind()} showLabel={false} />
+                <Input {...invite.$('email').bind()} showLabel={false} />
               </div>
             </div>
           ))}
@@ -161,6 +175,7 @@ class Invite extends Component {
             disabled={!atLeastOneEmailAddress}
             label={intl.formatMessage(messages.submitButtonLabel)}
             loaded={!isLoadingInvite}
+            onClick={noop}
           />
           {!embed && (
             <Link
@@ -195,4 +210,4 @@ class Invite extends Component {
   }
 }
 
-export default injectIntl(observer(Invite));
+export default injectIntl(Invite);
diff --git a/src/components/auth/Locked.js b/src/components/auth/Locked.tsx
index 6e32dd980..8b4e26878 100644
--- a/src/components/auth/Locked.js
+++ b/src/components/auth/Locked.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 { defineMessages, injectIntl } from 'react-intl';
-
+import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
+import { noop } from 'lodash';
 import Form from '../../lib/Form';
-import Input from '../ui/Input';
+import Input from '../ui/input/index';
 import Button from '../ui/button';
 import { H1 } from '../ui/headline';
 import { isMac } from '../../environment';
 
-import { globalError as globalErrorPropType } from '../../prop-types';
-
 const messages = defineMessages({
   headline: {
     id: 'locked.headline',
@@ -23,7 +20,7 @@ const messages = defineMessages({
   },
   touchIdPrompt: {
     id: 'locked.touchIdPrompt',
-    defaultMessage: 'unlock via Touch ID',
+    defaultMessage: 'Unlock with Touch ID',
   },
   passwordLabel: {
     id: 'locked.password.label',
@@ -43,30 +40,31 @@ const messages = defineMessages({
   },
 });
 
-class Locked extends Component {
-  static propTypes = {
-    onSubmit: PropTypes.func.isRequired,
-    unlock: PropTypes.func.isRequired,
-    isSubmitting: PropTypes.bool.isRequired,
-    useTouchIdToUnlock: PropTypes.bool.isRequired,
-    error: globalErrorPropType.isRequired,
-  };
+interface IProps extends WrappedComponentProps {
+  onSubmit: (...args: any[]) => void;
+  unlock: () => void;
+  isSubmitting: boolean;
+  useTouchIdToUnlock: boolean;
+  error: boolean;
+}
 
-  form = (() => {
-    const { intl } = this.props;
-    return new Form(
-      {
-        fields: {
-          password: {
-            label: intl.formatMessage(messages.passwordLabel),
-            value: '',
-            type: 'password',
-          },
+@observer
+class Locked extends Component<IProps> {
+  form: Form;
+
+  constructor(props: IProps) {
+    super(props);
+
+    this.form = new Form({
+      fields: {
+        password: {
+          label: this.props.intl.formatMessage(messages.passwordLabel),
+          value: '',
+          type: 'password',
         },
       },
-      intl,
-    );
-  })();
+    });
+  }
 
   submit(e) {
     e.preventDefault();
@@ -90,8 +88,7 @@ class Locked extends Component {
 
   render() {
     const { form } = this;
-    const { intl } = this.props;
-    const { isSubmitting, error, useTouchIdToUnlock } = this.props;
+    const { isSubmitting, error, useTouchIdToUnlock, intl } = this.props;
 
     const touchIdEnabled = isMac
       ? useTouchIdToUnlock && systemPreferences.canPromptTouchID()
@@ -118,8 +115,8 @@ class Locked extends Component {
             </>
           )}
 
-          <Input field={form.$('password')} showPasswordToggle focus />
-          {error.code === 'invalid-credentials' && (
+          <Input {...form.$('password').bind()} showPasswordToggle focus />
+          {error && (
             <p className="error-message center">
               {intl.formatMessage(messages.invalidCredentials)}
             </p>
@@ -130,6 +127,7 @@ class Locked extends Component {
               buttonType="secondary"
               label={`${submitButtonLabel} ...`}
               loaded={false}
+              onClick={noop}
               disabled
             />
           ) : (
@@ -137,6 +135,7 @@ class Locked extends Component {
               type="submit"
               className="auth__button"
               label={submitButtonLabel}
+              onClick={noop}
             />
           )}
         </form>
@@ -145,4 +144,4 @@ class Locked extends Component {
   }
 }
 
-export default injectIntl(observer(Locked));
+export default injectIntl(Locked);
diff --git a/src/components/auth/Login.tsx b/src/components/auth/Login.tsx
index 66a567fe4..185a6ad48 100644
--- a/src/components/auth/Login.tsx
+++ b/src/components/auth/Login.tsx
@@ -9,7 +9,7 @@ import { API_VERSION } from '../../environment-remote';
 import { serverBase } from '../../api/apiBase'; // TODO: Remove this line after fixing password recovery in-app
 import Form from '../../lib/Form';
 import { required, email } from '../../helpers/validation-helpers';
-import Input from '../ui/Input';
+import Input from '../ui/input/index';
 import Button from '../ui/button';
 import Link from '../ui/Link';
 import { H1 } from '../ui/headline';
@@ -136,8 +136,8 @@ class Login extends Component<IProps> {
               {intl.formatMessage(messages.serverLogout)}
             </p>
           )}
-          <Input field={form.$('email')} focus />
-          <Input field={form.$('password')} showPasswordToggle />
+          <Input {...form.$('email').bind()} focus />
+          <Input {...form.$('password').bind()} showPasswordToggle />
           {error.code === 'invalid-credentials' && (
             <>
               <p className="error-message center">
diff --git a/src/components/auth/Password.js b/src/components/auth/Password.tsx
index 5086b0bbd..53fdbf842 100644
--- a/src/components/auth/Password.js
+++ b/src/components/auth/Password.tsx
@@ -1,11 +1,11 @@
-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 } from 'react';
+import { observer } from 'mobx-react';
+import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 
+import { noop } from 'lodash';
 import Form from '../../lib/Form';
 import { required, email } from '../../helpers/validation-helpers';
-import Input from '../ui/Input';
+import Input from '../ui/input/index';
 import Button from '../ui/button';
 import Link from '../ui/Link';
 import Infobox from '../ui/Infobox';
@@ -39,32 +39,33 @@ const messages = defineMessages({
   },
 });
 
-class Password extends Component {
-  static propTypes = {
-    onSubmit: PropTypes.func.isRequired,
-    isSubmitting: PropTypes.bool.isRequired,
-    signupRoute: PropTypes.string.isRequired,
-    loginRoute: PropTypes.string.isRequired,
-    status: MobxPropTypes.arrayOrObservableArray.isRequired,
-  };
+interface IProps extends WrappedComponentProps {
+  onSubmit: (...args: any[]) => void;
+  isSubmitting: boolean;
+  signupRoute: string;
+  loginRoute: string;
+  status: string[];
+}
+
+@observer
+class Password extends Component<IProps> {
+  form: Form;
+
+  constructor(props: IProps) {
+    super(props);
 
-  form = (() => {
-    const { intl } = this.props;
-    return new Form(
-      {
-        fields: {
-          email: {
-            label: intl.formatMessage(messages.emailLabel),
-            value: '',
-            validators: [required, email],
-          },
+    this.form = new Form({
+      fields: {
+        email: {
+          label: this.props.intl.formatMessage(messages.emailLabel),
+          value: '',
+          validators: [required, email],
         },
       },
-      intl,
-    );
-  })();
+    });
+  }
 
-  submit(e) {
+  submit(e: FormEvent<HTMLFormElement>): void {
     e.preventDefault();
     this.form.submit({
       onSuccess: form => {
@@ -76,8 +77,7 @@ class Password extends Component {
 
   render() {
     const { form } = this;
-    const { intl } = this.props;
-    const { isSubmitting, signupRoute, loginRoute, status } = this.props;
+    const { isSubmitting, signupRoute, loginRoute, status, intl } = this.props;
 
     return (
       <div className="auth__container">
@@ -91,7 +91,7 @@ class Password extends Component {
               {intl.formatMessage(messages.successInfo)}
             </Infobox>
           )}
-          <Input field={form.$('email')} focus />
+          <Input {...form.$('email').bind()} focus />
           {status.length > 0 && status.includes('no-user') && (
             <p className="error-message center">
               {intl.formatMessage(messages.noUser)}
@@ -103,6 +103,7 @@ class Password extends Component {
               buttonType="secondary"
               label={`${intl.formatMessage(globalMessages.submit)} ...`}
               loaded={false}
+              onClick={noop}
               disabled
             />
           ) : (
@@ -110,6 +111,7 @@ class Password extends Component {
               type="submit"
               className="auth__button"
               label={intl.formatMessage(globalMessages.submit)}
+              onClick={noop}
             />
           )}
         </form>
@@ -124,4 +126,4 @@ class Password extends Component {
   }
 }
 
-export default injectIntl(observer(Password));
+export default injectIntl(Password);
diff --git a/src/components/auth/Signup.jsx b/src/components/auth/Signup.tsx
index e0337656c..af14430aa 100644
--- a/src/components/auth/Signup.jsx
+++ b/src/components/auth/Signup.tsx
@@ -1,20 +1,18 @@
-/* eslint jsx-a11y/anchor-is-valid: 0 */
 import { Component } from 'react';
-import PropTypes from 'prop-types';
 import { observer, inject } from 'mobx-react';
-import { defineMessages, injectIntl } from 'react-intl';
-
+import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { mdiArrowLeftCircle } from '@mdi/js';
+import { noop } from 'lodash';
 import Form from '../../lib/Form';
 import { required, email, minLength } from '../../helpers/validation-helpers';
-import Input from '../ui/Input';
+import Input from '../ui/input/index';
 import Button from '../ui/button';
 import Link from '../ui/Link';
 import Icon from '../ui/icon';
-
-import { globalError as globalErrorPropType } from '../../prop-types';
 import { serverBase } from '../../api/apiBase';
 import { H1 } from '../ui/headline';
+import { GlobalError } from '../../@types/ferdium-components.types';
+import { Actions } from '../../actions/lib/actions';
 
 const messages = defineMessages({
   headline: {
@@ -33,10 +31,10 @@ const messages = defineMessages({
     id: 'signup.email.label',
     defaultMessage: 'Email address',
   },
-  // companyLabel: {
-  //   id: 'signup.company.label',
-  //   defaultMessage: 'Company',
-  // },
+  companyLabel: {
+    id: 'signup.company.label',
+    defaultMessage: 'Company',
+  },
   passwordLabel: {
     id: 'signup.password.label',
     defaultMessage: 'Password',
@@ -67,45 +65,48 @@ const messages = defineMessages({
   },
 });
 
-class Signup extends Component {
-  static propTypes = {
-    onSubmit: PropTypes.func.isRequired,
-    isSubmitting: PropTypes.bool.isRequired,
-    loginRoute: PropTypes.string.isRequired,
-    error: globalErrorPropType.isRequired,
-  };
+interface IProps extends WrappedComponentProps {
+  onSubmit: (...args: any[]) => void;
+  isSubmitting: boolean;
+  loginRoute: string;
+  error: GlobalError;
+  actions?: Actions;
+}
 
-  form = (() => {
-    const { intl } = this.props;
-    return new Form(
-      {
-        fields: {
-          firstname: {
-            label: intl.formatMessage(messages.firstnameLabel),
-            value: '',
-            validators: [required],
-          },
-          lastname: {
-            label: intl.formatMessage(messages.lastnameLabel),
-            value: '',
-            validators: [required],
-          },
-          email: {
-            label: intl.formatMessage(messages.emailLabel),
-            value: '',
-            validators: [required, email],
-          },
-          password: {
-            label: intl.formatMessage(messages.passwordLabel),
-            value: '',
-            validators: [required, minLength(6)],
-            type: 'password',
-          },
+@inject('actions')
+@observer
+class Signup extends Component<IProps> {
+  form: Form;
+
+  constructor(props: IProps) {
+    super(props);
+
+    this.form = new Form({
+      fields: {
+        firstname: {
+          label: this.props.intl.formatMessage(messages.firstnameLabel),
+          value: '',
+          validators: [required],
+        },
+        lastname: {
+          label: this.props.intl.formatMessage(messages.lastnameLabel),
+          value: '',
+          validators: [required],
+        },
+        email: {
+          label: this.props.intl.formatMessage(messages.emailLabel),
+          value: '',
+          validators: [required, email],
+        },
+        password: {
+          label: this.props.intl.formatMessage(messages.passwordLabel),
+          value: '',
+          validators: [required, minLength(6)],
+          type: 'password',
         },
       },
-      intl,
-    );
-  })();
+    });
+  }
 
   submit(e) {
     e.preventDefault();
@@ -138,12 +139,12 @@ class Signup extends Component {
             </Link>
             <H1>{intl.formatMessage(messages.headline)}</H1>
             <div className="grid__row">
-              <Input field={form.$('firstname')} focus />
-              <Input field={form.$('lastname')} />
+              <Input {...form.$('firstname').bind()} focus />
+              <Input {...form.$('lastname').bind()} />
             </div>
-            <Input field={form.$('email')} />
+            <Input {...form.$('email').bind()} />
             <Input
-              field={form.$('password')}
+              {...form.$('password').bind()}
               showPasswordToggle
               scorePassword
             />
@@ -158,12 +159,14 @@ class Signup extends Component {
                 label={`${intl.formatMessage(messages.submitButtonLabel)} ...`}
                 loaded={false}
                 disabled
+                onClick={noop}
               />
             ) : (
               <Button
                 type="submit"
                 className="auth__button"
                 label={intl.formatMessage(messages.submitButtonLabel)}
+                onClick={noop}
               />
             )}
             <p className="legal">
@@ -203,4 +206,4 @@ class Signup extends Component {
   }
 }
 
-export default injectIntl(inject('actions')(observer(Signup)));
+export default injectIntl(Signup);