From 302d595f7c289387e53a0ef7df4d574ed4e25d70 Mon Sep 17 00:00:00 2001
From: muhamedsalih-tw <104364298+muhamedsalih-tw@users.noreply.github.com>
Date: Wed, 2 Nov 2022 06:31:36 +0530
Subject: Transform to TS and refactored components w.r.t deletion if
 duplicated Input component (#729)

---
 src/components/settings/user/EditUserForm.js  | 131 -------------------------
 src/components/settings/user/EditUserForm.tsx | 133 ++++++++++++++++++++++++++
 2 files changed, 133 insertions(+), 131 deletions(-)
 delete mode 100644 src/components/settings/user/EditUserForm.js
 create mode 100644 src/components/settings/user/EditUserForm.tsx

(limited to 'src/components/settings/user')

diff --git a/src/components/settings/user/EditUserForm.js b/src/components/settings/user/EditUserForm.js
deleted file mode 100644
index c2773a47d..000000000
--- a/src/components/settings/user/EditUserForm.js
+++ /dev/null
@@ -1,131 +0,0 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
-import { defineMessages, injectIntl } from 'react-intl';
-import { Link } from 'react-router-dom';
-
-import Input from '../../ui/input/index';
-import Form from '../../../lib/Form';
-import Button from '../../ui/button';
-import Radio from '../../ui/Radio';
-import Infobox from '../../ui/Infobox';
-import { H2 } from '../../ui/headline';
-
-const messages = defineMessages({
-  headline: {
-    id: 'settings.account.headline',
-    defaultMessage: 'Account',
-  },
-  headlineProfile: {
-    id: 'settings.account.headlineProfile',
-    defaultMessage: 'Update profile',
-  },
-  headlineAccount: {
-    id: 'settings.account.headlineAccount',
-    defaultMessage: 'Account information',
-  },
-  headlinePassword: {
-    id: 'settings.account.headlinePassword',
-    defaultMessage: 'Change password',
-  },
-  successInfo: {
-    id: 'settings.account.successInfo',
-    defaultMessage: 'Your changes have been saved',
-  },
-  buttonSave: {
-    id: 'settings.account.buttonSave',
-    defaultMessage: 'Update profile',
-  },
-});
-
-class EditUserForm extends Component {
-  static propTypes = {
-    status: MobxPropTypes.observableArray.isRequired,
-    form: PropTypes.instanceOf(Form).isRequired,
-    onSubmit: PropTypes.func.isRequired,
-    isSaving: PropTypes.bool.isRequired,
-  };
-
-  submit(e) {
-    e.preventDefault();
-    this.props.form.submit({
-      onSuccess: form => {
-        const values = form.values();
-        this.props.onSubmit(values);
-      },
-      onError: () => {},
-    });
-  }
-
-  render() {
-    const {
-      // user,
-      status,
-      form,
-      isSaving,
-    } = this.props;
-    const { intl } = this.props;
-
-    return (
-      <div className="settings__main">
-        <div className="settings__header">
-          <span className="settings__header-item">
-            <Link to="/settings/user">
-              {intl.formatMessage(messages.headline)}
-            </Link>
-          </span>
-          <span className="separator" />
-          <span className="settings__header-item">
-            {intl.formatMessage(messages.headlineProfile)}
-          </span>
-        </div>
-        <div className="settings__body">
-          <form onSubmit={e => this.submit(e)} id="form">
-            {status.length > 0 && status.includes('data-updated') && (
-              <Infobox type="success" icon="checkbox-marked-circle-outline">
-                {intl.formatMessage(messages.successInfo)}
-              </Infobox>
-            )}
-            <H2>{intl.formatMessage(messages.headlineAccount)}</H2>
-            <div className="grid__row">
-              <Input {...form.$('firstname').bind()} focus />
-              <Input {...form.$('lastname').bind()} />
-            </div>
-            <Input {...form.$('email').bind()} />
-            <Radio field={form.$('accountType')} />
-            {form.$('accountType').value === 'company' && (
-              <Input field={form.$('organization')} />
-            )}
-            <H2>{intl.formatMessage(messages.headlinePassword)}</H2>
-            <Input {...form.$('oldPassword').bind()} showPasswordToggle />
-            <Input
-              {...form.$('newPassword').bind()}
-              showPasswordToggle
-              scorePassword
-            />
-          </form>
-        </div>
-        <div className="settings__controls">
-          {/* Save Button */}
-          {isSaving ? (
-            <Button
-              type="submit"
-              label={intl.formatMessage(messages.buttonSave)}
-              loaded={!isSaving}
-              buttonType="secondary"
-              disabled
-            />
-          ) : (
-            <Button
-              type="submit"
-              label={intl.formatMessage(messages.buttonSave)}
-              htmlForm="form"
-            />
-          )}
-        </div>
-      </div>
-    );
-  }
-}
-
-export default injectIntl(observer(EditUserForm));
diff --git a/src/components/settings/user/EditUserForm.tsx b/src/components/settings/user/EditUserForm.tsx
new file mode 100644
index 000000000..3b604a79f
--- /dev/null
+++ b/src/components/settings/user/EditUserForm.tsx
@@ -0,0 +1,133 @@
+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';
+import Radio from '../../ui/Radio';
+import Infobox from '../../ui/Infobox';
+import { H2 } from '../../ui/headline';
+
+const messages = defineMessages({
+  headline: {
+    id: 'settings.account.headline',
+    defaultMessage: 'Account',
+  },
+  headlineProfile: {
+    id: 'settings.account.headlineProfile',
+    defaultMessage: 'Update profile',
+  },
+  headlineAccount: {
+    id: 'settings.account.headlineAccount',
+    defaultMessage: 'Account information',
+  },
+  headlinePassword: {
+    id: 'settings.account.headlinePassword',
+    defaultMessage: 'Change password',
+  },
+  successInfo: {
+    id: 'settings.account.successInfo',
+    defaultMessage: 'Your changes have been saved',
+  },
+  buttonSave: {
+    id: 'settings.account.buttonSave',
+    defaultMessage: 'Update profile',
+  },
+});
+
+interface IProps extends WrappedComponentProps {
+  status: string[];
+  form: Form;
+  onSubmit: FormEventHandler<HTMLFormElement>;
+  isSaving: boolean;
+}
+
+@observer
+class EditUserForm extends Component<IProps> {
+  submit(e: FormEvent<HTMLFormElement>): void {
+    e.preventDefault();
+    this.props.form.submit({
+      onSuccess: form => {
+        const values = form.values();
+        this.props.onSubmit(values);
+      },
+      onError: () => {},
+    });
+  }
+
+  render(): ReactElement {
+    const {
+      // user,
+      status,
+      form,
+      isSaving,
+      intl,
+    } = this.props;
+
+    return (
+      <div className="settings__main">
+        <div className="settings__header">
+          <span className="settings__header-item">
+            <Link to="/settings/user">
+              {intl.formatMessage(messages.headline)}
+            </Link>
+          </span>
+          <span className="separator" />
+          <span className="settings__header-item">
+            {intl.formatMessage(messages.headlineProfile)}
+          </span>
+        </div>
+        <div className="settings__body">
+          <form onSubmit={e => this.submit(e)} id="form">
+            {status.length > 0 && status.includes('data-updated') && (
+              <Infobox type="success" icon="checkbox-marked-circle-outline">
+                {intl.formatMessage(messages.successInfo)}
+              </Infobox>
+            )}
+            <H2>{intl.formatMessage(messages.headlineAccount)}</H2>
+            <div className="grid__row">
+              <Input {...form.$('firstname').bind()} focus />
+              <Input {...form.$('lastname').bind()} />
+            </div>
+            <Input {...form.$('email').bind()} />
+            <Radio field={form.$('accountType')} className="" />
+            {form.$('accountType').value === 'company' && (
+              <Input {...form.$('organization').bind()} />
+            )}
+            <H2>{intl.formatMessage(messages.headlinePassword)}</H2>
+            <Input {...form.$('oldPassword').bind()} showPasswordToggle />
+            <Input
+              {...form.$('newPassword').bind()}
+              showPasswordToggle
+              scorePassword
+            />
+          </form>
+        </div>
+        <div className="settings__controls">
+          {/* Save Button */}
+          {isSaving ? (
+            <Button
+              type="submit"
+              label={intl.formatMessage(messages.buttonSave)}
+              loaded={!isSaving}
+              buttonType="secondary"
+              disabled
+              onClick={noop}
+            />
+          ) : (
+            <Button
+              type="submit"
+              label={intl.formatMessage(messages.buttonSave)}
+              htmlForm="form"
+              onClick={noop}
+            />
+          )}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default injectIntl(EditUserForm);
-- 
cgit v1.2.3-70-g09d2