Migrate ResetPasswordForm to final-form

Author: catarak

client/modules/IDE/actions/files.js

@@ -1,6 +1,5 @@
 import objectID from 'bson-objectid';
 import blobUtil from 'blob-util';
-import { reset } from 'redux-form';
 import apiClient from '../../../utils/apiClient';
 import * as ActionTypes from '../../../constants';
 import { setUnsavedChanges, closeNewFolderModal, closeNewFileModal } from './ide';

client/modules/User/components/ResetPasswordForm.jsx

@@ -1,59 +1,59 @@
-import PropTypes from 'prop-types';
 import React from 'react';
-import { withTranslation } from 'react-i18next';
-import { domOnlyProps } from '../../../utils/reduxFormUtils';
+import { useTranslation } from 'react-i18next';
+import { Form, Field } from 'react-final-form';
+import { useDispatch, useSelector } from 'react-redux';
+import { validateResetPassword } from '../../../utils/reduxFormUtils';
+import { initiateResetPassword } from '../actions';
 import Button from '../../../common/Button';
 
 function ResetPasswordForm(props) {
-  const {
-    fields: { email }, handleSubmit, submitting, invalid, pristine, t
-  } = props;
+  const { t } = useTranslation();
+  const resetPasswordInitiate = useSelector(state => state.user.resetPasswordInitiate);
+  const dispatch = useDispatch();
+
+  function submitInitiateResetPassword() {
+    dispatch(initiateResetPassword());
+  }
+
   return (
-    <form
-      className="form"
-      onSubmit={handleSubmit(props.initiateResetPassword.bind(this))}
+    <Form
+      fields={['email']}
+      validate={validateResetPassword}
+      onSubmit={submitInitiateResetPassword}
     >
-      <p className="form__field">
-        <label htmlFor="email" className="form__label">{t('ResetPasswordForm.Email')}</label>
-        <input
-          className="form__input"
-          aria-label={t('ResetPasswordForm.EmailARIA')}
-          type="text"
-          id="email"
-          {...domOnlyProps(email)}
-        />
-        {email.touched && email.error && (
-          <span className="form-error">{email.error}</span>
-        )}
-      </p>
-      <Button
-        type="submit"
-        disabled={submitting || invalid || pristine || props.user.resetPasswordInitiate}
-      >{t('ResetPasswordForm.Submit')}
-      </Button>
-    </form>
+      {({
+        handleSubmit, submitting, pristine, invalid
+      }) => (
+        <form
+          className="form"
+          onSubmit={handleSubmit}
+        >
+          <Field name="email">
+            {field => (
+              <p className="form__field">
+                <label htmlFor="email" className="form__label">{t('ResetPasswordForm.Email')}</label>
+                <input
+                  className="form__input"
+                  aria-label={t('ResetPasswordForm.EmailARIA')}
+                  type="text"
+                  id="email"
+                  {...field.input}
+                />
+                {field.meta.touched && field.meta.error && (
+                  <span className="form-error">{field.meta.error}</span>
+                )}
+              </p>
+            )}
+          </Field>
+          <Button
+            type="submit"
+            disabled={submitting || invalid || pristine || resetPasswordInitiate}
+          >{t('ResetPasswordForm.Submit')}
+          </Button>
+        </form>
+      )}
+    </Form>
   );
 }
 
-ResetPasswordForm.propTypes = {
-  fields: PropTypes.shape({
-    email: PropTypes.objectOf(PropTypes.shape()).isRequired
-  }).isRequired,
-  handleSubmit: PropTypes.func.isRequired,
-  initiateResetPassword: PropTypes.func.isRequired,
-  submitting: PropTypes.bool,
-  invalid: PropTypes.bool,
-  pristine: PropTypes.bool,
-  user: PropTypes.shape({
-    resetPasswordInitiate: PropTypes.bool
-  }).isRequired,
-  t: PropTypes.func.isRequired
-};
-
-ResetPasswordForm.defaultProps = {
-  submitting: false,
-  pristine: true,
-  invalid: false,
-};
-
-export default withTranslation()(ResetPasswordForm);
+export default ResetPasswordForm;

client/modules/User/pages/ResetPasswordView.jsx

@@ -1,21 +1,18 @@
-
-import PropTypes from 'prop-types';
 import React from 'react';
 import { Link } from 'react-router';
 import classNames from 'classnames';
-import { bindActionCreators } from 'redux';
-import { reduxForm } from 'redux-form';
+import { useSelector } from 'react-redux';
 import { Helmet } from 'react-helmet';
-import { withTranslation } from 'react-i18next';
-import * as UserActions from '../actions';
+import { useTranslation } from 'react-i18next';
 import ResetPasswordForm from '../components/ResetPasswordForm';
-import { validateResetPassword } from '../../../utils/reduxFormUtils';
 import Nav from '../../../components/Nav';
 
-function ResetPasswordView(props) {
+function ResetPasswordView() {
+  const { t } = useTranslation();
+  const resetPasswordInitiate = useSelector(state => state.user.resetPasswordInitiate);
   const resetPasswordClass = classNames({
     'reset-password': true,
-    'reset-password--submitted': props.user.resetPasswordInitiate,
+    'reset-password--submitted': resetPasswordInitiate,
     'form-container': true,
     'user': true
   });
@@ -24,45 +21,23 @@ function ResetPasswordView(props) {
       <Nav layout="dashboard" />
       <div className={resetPasswordClass}>
         <Helmet>
-          <title>{props.t('ResetPasswordView.Title')}</title>
+          <title>{t('ResetPasswordView.Title')}</title>
         </Helmet>
         <div className="form-container__content">
-          <h2 className="form-container__title">{props.t('ResetPasswordView.Reset')}</h2>
-          <ResetPasswordForm {...props} />
+          <h2 className="form-container__title">{t('ResetPasswordView.Reset')}</h2>
+          <ResetPasswordForm />
           <p className="reset-password__submitted">
-            {props.t('ResetPasswordView.Submitted')}
+            {t('ResetPasswordView.Submitted')}
           </p>
           <p className="form__navigation-options">
-            <Link className="form__login-button" to="/login">{props.t('ResetPasswordView.Login')}</Link>
-            &nbsp;{props.t('ResetPasswordView.LoginOr')}&nbsp;
-            <Link className="form__signup-button" to="/signup">{props.t('ResetPasswordView.SignUp')}</Link>
+            <Link className="form__login-button" to="/login">{t('ResetPasswordView.Login')}</Link>
+            &nbsp;{t('ResetPasswordView.LoginOr')}&nbsp;
+            <Link className="form__signup-button" to="/signup">{t('ResetPasswordView.SignUp')}</Link>
           </p>
         </div>
       </div>
     </div>
   );
 }
 
-ResetPasswordView.propTypes = {
-  resetPasswordReset: PropTypes.func.isRequired,
-  user: PropTypes.shape({
-    resetPasswordInitiate: PropTypes.bool
-  }).isRequired,
-  t: PropTypes.func.isRequired
-};
-
-function mapStateToProps(state) {
-  return {
-    user: state.user
-  };
-}
-
-function mapDispatchToProps(dispatch) {
-  return bindActionCreators(UserActions, dispatch);
-}
-
-export default withTranslation()(reduxForm({
-  form: 'reset-password',
-  fields: ['email'],
-  validate: validateResetPassword
-}, mapStateToProps, mapDispatchToProps)(ResetPasswordView));
+export default ResetPasswordView;