Merge pull request #1372 from cboard-org/chore/modernize-form-components

Chore/modernize form components
cboard-org · Mar 5, 2023 · 06adc49 · 06adc49
2 parents e40af34 + 5680e22
commit 06adc49
Show file tree

Hide file tree

Showing 12 changed files with 526 additions and 592 deletions.
diff --git a/package.json b/package.json
@@ -35,7 +35,7 @@
     "echarts-for-react": "^3.0.2",
     "file-saver": "^2.0.5",
     "fontsource-roboto": "^4.0.0",
-    "formik": "^1.3.2",
+    "formik": "^2.2.9",
     "history": "^4.10.1",
     "i18n-iso-countries": "4.3.1",
     "intl": "^1.2.5",
@@ -85,7 +85,7 @@
     "shortid": "^2.2.16",
     "source-map-explorer": "^2.5.3",
     "swiper": "^6.8.4",
-    "yup": "^0.32.11"
+    "yup": "^1.0.0"
   },
   "devDependencies": {
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.0",

diff --git a/src/components/Account/Activate/Activate.container.js b/src/components/Account/Activate/Activate.container.js
@@ -1,48 +1,44 @@
-import React, { Fragment, PureComponent } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import { activate } from './Activate.actions';
 import './Activate.css';
 
-class ActivateContainer extends PureComponent {
-  state = {
-    isActivating: false,
-    activationStatus: {}
-  };
-
-  componentDidMount() {
-    const {
-      match: {
-        params: { url }
-      }
-    } = this.props;
+function ActivateContainer({
+  match: {
+    params: { url }
+  }
+}) {
+  const [isActivating, setIsActivating] = useState(false);
+  const [activationStatus, setActivationStatus] = useState({});
 
-    this.setState({ isActivating: true });
+  useEffect(
+    () => {
+      setIsActivating(true);
 
-    activate(url)
-      .then(activationStatus => this.setState({ activationStatus }))
-      .catch(activationStatus => this.setState({ activationStatus }))
-      .finally(() => this.setState({ isActivating: false }));
-  }
+      activate(url)
+        .then(response => setActivationStatus(response))
+        .catch(error => setActivationStatus(error))
+        .finally(() => setIsActivating(false));
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
 
-  render() {
-    const { isActivating, activationStatus } = this.state;
+  return (
+    <div className="Activate">
+      {isActivating ? (
+        'Activating your account...'
+      ) : (
+        <>
+          <div>{activationStatus.message}</div>
 
-    return (
-      <div className="Activate">
-        {isActivating ? (
-          'Activating your account...'
-        ) : (
-          <Fragment>
-            {activationStatus.message}
-            <br />
-            <Link to="/" className="Activate_home">
-              Home page
-            </Link>
-          </Fragment>
-        )}
-      </div>
-    );
-  }
+          <Link to="/" className="Activate_home">
+            Home page
+          </Link>
+        </>
+      )}
+    </div>
+  );
 }
 
 export default ActivateContainer;
diff --git a/src/components/Account/ChangePassword/ChangePassword.actions.js b/src/components/Account/ChangePassword/ChangePassword.actions.js
@@ -34,12 +34,15 @@ export function storePassword(userid, password, url) {
       return Promise.resolve(res);
     } catch (err) {
       dispatch(storePasswordApiFailure(err.message));
+
       if (err.response != null) {
         return Promise.reject(err.response.data);
       }
-      var disonnected = {
+
+      const disonnected = {
         message: 'Unable to contact server. Try in a moment'
       };
+
       return Promise.reject(disonnected);
     }
   };

diff --git a/src/components/Account/ChangePassword/ChangePassword.component.js b/src/components/Account/ChangePassword/ChangePassword.component.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 import { connect } from 'react-redux';
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 import { Formik } from 'formik';
@@ -18,141 +18,136 @@ import { storePassword } from './ChangePassword.actions';
 import messages from './ChangePassword.messages';
 import './ChangePassword.css';
 
-export class ChangePassword extends Component {
-  static propTypes = {
-    intl: intlShape.isRequired
-  };
-
-  state = {
-    isSending: false,
-    storePasswordState: {},
-    redirectMessage: ''
-  };
+export function ChangePassword({
+  intl,
+  history,
+  storePassword,
+  match: {
+    params: { userid, url }
+  }
+}) {
+  const [isSending, setIsSending] = useState(false);
+  const [storePasswordState, setStorePasswordState] = useState({});
+  const [redirectMessage, setRedirectMessage] = useState('');
+  const isButtonDisabled = isSending || !!storePasswordState.success;
 
-  sleep = milliseconds => {
+  function sleep(milliseconds) {
     return new Promise(resolve => setTimeout(resolve, milliseconds));
-  };
-
-  handleSubmit = values => {
-    const {
-      match: {
-        params: { userid, url }
-      }
-    } = this.props;
-
-    const { intl, history, storePassword } = this.props;
+  }
 
-    this.setState({
-      isSending: true,
-      storePasswordState: {}
-    });
+  function handleSubmit(values) {
+    setIsSending(true);
+    setStorePasswordState({});
 
     storePassword(userid, values.password, url)
       .then(res => {
-        this.setState({
-          storePasswordState: res,
-          redirectMessage: intl.formatMessage(messages.redirect)
-        });
-        this.sleep(2000).then(() => {
+        setStorePasswordState(res);
+        setRedirectMessage(intl.formatMessage(messages.redirect));
+
+        sleep(2000).then(() => {
           history.replace('/login-signup');
         });
       })
-      .catch(err => this.setState({ storePasswordState: err }))
-      .finally(() => this.setState({ isSending: false }));
-  };
-
-  render() {
-    const { isSending, storePasswordState, redirectMessage } = this.state;
-    const { intl } = this.props;
-
-    const isButtonDisabled = isSending || !!storePasswordState.success;
-
-    return (
-      <div className="ChangePassword">
-        <Dialog open={true} aria-labelledby="changePassword">
-          <DialogTitle id="changePassword">
-            <FormattedMessage {...messages.changePassword} />
-          </DialogTitle>
-          <DialogContent>
-            {storePasswordState && !storePasswordState.success && (
-              <DialogContentText>
-                <FormattedMessage {...messages.changePasswordText} />
-              </DialogContentText>
+      .catch(err => setStorePasswordState(err))
+      .finally(() => setIsSending(false));
+  }
+
+  return (
+    <div className="ChangePassword">
+      <Dialog open={true} aria-labelledby="changePassword">
+        <DialogTitle id="changePassword">
+          <FormattedMessage {...messages.changePassword} />
+        </DialogTitle>
+
+        <DialogContent>
+          {storePasswordState && !storePasswordState.success && (
+            <DialogContentText>
+              <FormattedMessage {...messages.changePasswordText} />
+            </DialogContentText>
+          )}
+
+          <div
+            className={classNames('ChangePassword__status', {
+              'ChangePassword__status--error': !storePasswordState.success,
+              'ChangePassword__status--success': storePasswordState.success
+            })}
+          >
+            {!!storePasswordState.success ? (
+              <Typography color="inherit">
+                {intl.formatMessage(messages.changePasswordSuccess)}
+              </Typography>
+            ) : (
+              <Typography color="inherit">
+                {storePasswordState.message}
+              </Typography>
             )}
+          </div>
+
+          {redirectMessage && (
             <div
-              className={classNames('ChangePassword__status', {
-                'ChangePassword__status--error': !storePasswordState.success,
-                'ChangePassword__status--success': storePasswordState.success
-              })}
-            >
-              {!!storePasswordState.success ? (
-                <Typography color="inherit">
-                  {intl.formatMessage(messages.changePasswordSuccess)}
-                </Typography>
-              ) : (
-                <Typography color="inherit">
-                  {storePasswordState.message}
-                </Typography>
+              className={classNames(
+                'ChangePassword__status',
+                'ChangePassword__status--success'
               )}
+            >
+              <Typography color="inherit">
+                {intl.formatMessage(messages.redirect)}
+              </Typography>
             </div>
-            {redirectMessage && (
-              <div
-                className={classNames(
-                  'ChangePassword__status',
-                  'ChangePassword__status--success'
-                )}
-              >
-                <Typography color="inherit">
-                  {intl.formatMessage(messages.redirect)}
-                </Typography>
-              </div>
-            )}
-            {storePasswordState && !storePasswordState.success && (
-              <Formik
-                onSubmit={this.handleSubmit}
-                validationSchema={validationSchema}
-              >
-                {({ errors, handleChange, handleSubmit }) => (
-                  <form
-                    className="ChangePassword__form"
-                    onSubmit={handleSubmit}
-                  >
-                    <TextField
-                      error={errors.password}
-                      label={intl.formatMessage(messages.password)}
-                      type="password"
-                      name="password"
-                      onChange={handleChange}
-                    />
-                    <TextField
-                      error={errors.passwordRepeat}
-                      label={intl.formatMessage(messages.passwordRepeat)}
-                      type="password"
-                      name="passwordRepeat"
-                      onChange={handleChange}
-                    />
-                    <DialogActions>
-                      <Button
-                        type="submit"
-                        disabled={isButtonDisabled}
-                        variant="contained"
-                        color="primary"
-                      >
-                        {isSending && <LoadingIcon />}
-                        <FormattedMessage {...messages.send} />
-                      </Button>
-                    </DialogActions>
-                  </form>
-                )}
-              </Formik>
-            )}
-          </DialogContent>
-        </Dialog>
-      </div>
-    );
-  }
+          )}
+
+          {storePasswordState && !storePasswordState.success && (
+            <Formik
+              onSubmit={handleSubmit}
+              validationSchema={validationSchema}
+              initialValues={{
+                password: '',
+                passwordRepeat: ''
+              }}
+            >
+              {({ errors, handleChange, handleSubmit }) => (
+                <form className="ChangePassword__form" onSubmit={handleSubmit}>
+                  <TextField
+                    error={errors.password}
+                    label={intl.formatMessage(messages.password)}
+                    type="password"
+                    name="password"
+                    onChange={handleChange}
+                  />
+
+                  <TextField
+                    error={errors.passwordRepeat}
+                    label={intl.formatMessage(messages.passwordRepeat)}
+                    type="password"
+                    name="passwordRepeat"
+                    onChange={handleChange}
+                  />
+
+                  <DialogActions>
+                    <Button
+                      type="submit"
+                      disabled={isButtonDisabled}
+                      variant="contained"
+                      color="primary"
+                    >
+                      {isSending && <LoadingIcon />}
+                      <FormattedMessage {...messages.send} />
+                    </Button>
+                  </DialogActions>
+                </form>
+              )}
+            </Formik>
+          )}
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
 }
 
+ChangePassword.propTypes = {
+  intl: intlShape.isRequired
+};
+
 const mapDispatchToProps = {
   storePassword
 };

diff --git a/src/components/Account/ChangePassword/ChangePassword.css b/src/components/Account/ChangePassword/ChangePassword.css
@@ -9,10 +9,6 @@
   background: linear-gradient(to right, rgb(121, 22, 254), rgb(172, 47, 138));
 }
 
-.ChangePassword_home {
-  margin-top: 1em;
-  color: inherit;
-}
 .ChangePassword__form > div {
   width: 100%;
 }