migrate ChangePassword to React hooks

src/components/ChangePassword.jsx

@@ -3,7 +3,7 @@
  * @flow
  */
 
-import React from 'react';
+import React, {useState} from 'react';
 import { t } from 'ttag';
 import { validatePassword } from '../utils/validation';
 import { requestPasswordChange } from '../actions/fetch';
@@ -25,118 +25,91 @@ function validate(mailreg, password, newPassword, confirmPassword) {
   return errors;
 }
 
-class ChangePassword extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      password: '',
-      newPassword: '',
-      confirmPassword: '',
-      success: false,
-      submitting: false,
+const ChangePassword = ({ mailreg, done, cancel }) => {
+  const [password, setPassword] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [success, setSuccess] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [errors, setErrors] = useState([]);
 
-      errors: [],
-    };
-
-    this.handleSubmit = this.handleSubmit.bind(this);
-  }
-
-  async handleSubmit(e) {
-    e.preventDefault();
-
-    const {
-      password, newPassword, confirmPassword, submitting,
-    } = this.state;
-    if (submitting) return;
-
-    const { mailreg } = this.props;
-    const errors = validate(
-      mailreg,
-      password,
-      newPassword,
-      confirmPassword,
-    );
-
-    this.setState({ errors });
-    if (errors.length > 0) return;
-    this.setState({ submitting: true });
-
-    const { errors: resperrors } = await requestPasswordChange(
-      newPassword,
-      password,
-    );
-    if (resperrors) {
-      this.setState({
-        errors: resperrors,
-        submitting: false,
-      });
-      return;
-    }
-    this.setState({
-      success: true,
-    });
-  }
-
-  render() {
-    const { success } = this.state;
-    if (success) {
-      const { done } = this.props;
-      return (
-        <div className="inarea">
-          <p className="modalmessage">{t`Changed Password successfully.`}</p>
-          <button type="button" onClick={done}>Close</button>
-        </div>
-      );
-    }
-    const {
-      errors,
-      password,
-      newPassword,
-      confirmPassword,
-      submitting,
-    } = this.state;
-    const { cancel, mailreg } = this.props;
+  if (success) {
     return (
       <div className="inarea">
-        <form onSubmit={this.handleSubmit}>
-          {errors.map((error) => (
-            <p key={error} className="errormessage"><span>{t`Error`}</span>
-              :&nbsp;{error}</p>
-          ))}
-          {(mailreg)
-          && (
-          <input
-            value={password}
-            onChange={(evt) => this.setState({ password: evt.target.value })}
-            type="password"
-            placeholder={t`Old Password`}
-          />
-          )}
-          <br />
-          <input
-            value={newPassword}
-            onChange={(evt) => this.setState({ newPassword: evt.target.value })}
-            type="password"
-            placeholder={t`New Password`}
-          />
-          <br />
-          <input
-            value={confirmPassword}
-            onChange={(evt) => this.setState({
-              confirmPassword: evt.target.value,
-            })}
-            type="password"
-            placeholder={t`Confirm New Password`}
-          />
-          <br />
-          <button type="submit">
-            {(submitting) ? '...' : t`Save`}
-          </button>
-          <button type="button" onClick={cancel}>{t`Cancel`}</button>
-        </form>
+        <p className="modalmessage">{t`Changed Password successfully.`}</p>
+        <button type="button" onClick={done}>Close</button>
       </div>
     );
   }
+
+  return (
+    <div className="inarea">
+      <form
+        onSubmit={async (e) => {
+          e.preventDefault();
+          if (submitting) return;
+          const errors = validate(
+            mailreg,
+            password,
+            newPassword,
+            confirmPassword,
+          );
+          setErrors(errors);
+          if (errors.length) return;
+          setSubmitting(true);
+          const { errors: resperrors } = await requestPasswordChange(
+            newPassword,
+            password,
+          );
+          if (resperrors) {
+            setErrors(resperrors);
+            setSubmitting(false);
+          }
+          setSuccess(true);
+        }}
+      >
+        {errors.map((error) => (
+          <p key={error} className="errormessage"><span>{t`Error`}</span>
+            :&nbsp;{error}</p>
+        ))}
+        {(mailreg)
+        && (
+        <input
+          value={password}
+          onChange={(evt) => setPassword(evt.target.value)}
+          type="password"
+          placeholder={t`Old Password`}
+        />
+        )}
+        <br />
+        <input
+          value={newPassword}
+          onChange={(evt) => setNewPassword(evt.target.value)}
+          type="password"
+          placeholder={t`New Password`}
+        />
+        <br />
+        <input
+          value={confirmPassword}
+          onChange={(evt) => setConfirmPassword(evt.target.value)}
+          type="password"
+          placeholder={t`Confirm New Password`}
+        />
+        <br />
+        <button
+          type="submit"
+        >
+          {(submitting) ? '...' : t`Save`}
+        </button>
+        <button
+          type="button"
+          onClick={cancel}
+        >
+          {t`Cancel`}
+        </button>
+      </form>
+    </div>
+  );
 }
 
-export default ChangePassword;
+export default React.memo(ChangePassword);