From 8f09d6aa8670a0aaba654b80ab192025c23854d6 Mon Sep 17 00:00:00 2001
From: Vesa Luusua <vesa.luusua@gmail.com>
Date: Mon, 16 Apr 2018 21:20:58 +0300
Subject: [PATCH] Refactor PasswordResetForm: use Form connector from Final
 Form

---
 .../PasswordResetForm.example.js              |   1 +
 .../PasswordResetForm/PasswordResetForm.js    | 157 +++++++++---------
 2 files changed, 83 insertions(+), 75 deletions(-)

diff --git a/src/containers/PasswordResetForm/PasswordResetForm.example.js b/src/containers/PasswordResetForm/PasswordResetForm.example.js
index a4da189a..9b649908 100644
--- a/src/containers/PasswordResetForm/PasswordResetForm.example.js
+++ b/src/containers/PasswordResetForm/PasswordResetForm.example.js
@@ -4,6 +4,7 @@ import PasswordResetForm from './PasswordResetForm';
 export const Empty = {
   component: PasswordResetForm,
   props: {
+    formId: 'PasswordResetFormExample',
     onSubmit(values) {
       console.log('submit with values:', values);
     },
diff --git a/src/containers/PasswordResetForm/PasswordResetForm.js b/src/containers/PasswordResetForm/PasswordResetForm.js
index e89d4f42..d9dbde44 100644
--- a/src/containers/PasswordResetForm/PasswordResetForm.js
+++ b/src/containers/PasswordResetForm/PasswordResetForm.js
@@ -2,105 +2,112 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { compose } from 'redux';
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
-import { reduxForm, propTypes as formPropTypes } from 'redux-form';
+import { Form as FinalForm } from 'react-final-form';
 import classNames from 'classnames';
-import { Form, PrimaryButton, TextInputField } from '../../components';
+import { Form, PrimaryButton, FieldTextInput } from '../../components';
 import * as validators from '../../util/validators';
 
 import css from './PasswordResetForm.css';
 
-const PasswordResetFormComponent = props => {
-  const {
-    rootClassName,
-    className,
-    form,
-    handleSubmit,
-    submitting,
-    inProgress,
-    intl,
-    invalid,
-  } = props;
+const PasswordResetFormComponent = props => (
+  <FinalForm
+    {...props}
+    render={fieldRenderProps => {
+      const {
+        rootClassName,
+        className,
+        formId,
+        handleSubmit,
+        submitting,
+        inProgress,
+        intl,
+        invalid,
+      } = fieldRenderProps;
 
-  // password
-  const passwordLabel = intl.formatMessage({
-    id: 'PasswordResetForm.passwordLabel',
-  });
-  const passwordPlaceholder = intl.formatMessage({
-    id: 'PasswordResetForm.passwordPlaceholder',
-  });
-  const passwordRequiredMessage = intl.formatMessage({
-    id: 'PasswordResetForm.passwordRequired',
-  });
-  const passwordMinLengthMessage = intl.formatMessage(
-    {
-      id: 'PasswordResetForm.passwordTooShort',
-    },
-    {
-      minLength: validators.PASSWORD_MIN_LENGTH,
-    }
-  );
-  const passwordMaxLengthMessage = intl.formatMessage(
-    {
-      id: 'PasswordResetForm.passwordTooLong',
-    },
-    {
-      maxLength: validators.PASSWORD_MAX_LENGTH,
-    }
-  );
-  const passwordRequired = validators.requiredStringNoTrim(passwordRequiredMessage);
-  const passwordMinLength = validators.minLength(
-    passwordMinLengthMessage,
-    validators.PASSWORD_MIN_LENGTH
-  );
-  const passwordMaxLength = validators.maxLength(
-    passwordMaxLengthMessage,
-    validators.PASSWORD_MAX_LENGTH
-  );
+      // password
+      const passwordLabel = intl.formatMessage({
+        id: 'PasswordResetForm.passwordLabel',
+      });
+      const passwordPlaceholder = intl.formatMessage({
+        id: 'PasswordResetForm.passwordPlaceholder',
+      });
+      const passwordRequiredMessage = intl.formatMessage({
+        id: 'PasswordResetForm.passwordRequired',
+      });
+      const passwordMinLengthMessage = intl.formatMessage(
+        {
+          id: 'PasswordResetForm.passwordTooShort',
+        },
+        {
+          minLength: validators.PASSWORD_MIN_LENGTH,
+        }
+      );
+      const passwordMaxLengthMessage = intl.formatMessage(
+        {
+          id: 'PasswordResetForm.passwordTooLong',
+        },
+        {
+          maxLength: validators.PASSWORD_MAX_LENGTH,
+        }
+      );
+      const passwordRequired = validators.requiredStringNoTrim(passwordRequiredMessage);
+      const passwordMinLength = validators.minLength(
+        passwordMinLengthMessage,
+        validators.PASSWORD_MIN_LENGTH
+      );
+      const passwordMaxLength = validators.maxLength(
+        passwordMaxLengthMessage,
+        validators.PASSWORD_MAX_LENGTH
+      );
 
-  const classes = classNames(rootClassName || css.root, className);
+      const classes = classNames(rootClassName || css.root, className);
 
-  const submitInProgress = submitting || inProgress;
-  const submitDisabled = invalid || submitInProgress;
+      const submitInProgress = submitting || inProgress;
+      const submitDisabled = invalid || submitInProgress;
 
-  return (
-    <Form className={classes} onSubmit={handleSubmit}>
-      <TextInputField
-        className={css.password}
-        type="password"
-        name="password"
-        autoComplete="new-password"
-        id={`${form}.password`}
-        label={passwordLabel}
-        placeholder={passwordPlaceholder}
-        validate={[passwordRequired, passwordMinLength, passwordMaxLength]}
-      />
-      <PrimaryButton type="submit" inProgress={submitInProgress} disabled={submitDisabled}>
-        <FormattedMessage id="PasswordResetForm.submitButtonText" />
-      </PrimaryButton>
-    </Form>
-  );
-};
+      return (
+        <Form className={classes} onSubmit={handleSubmit}>
+          <FieldTextInput
+            className={css.password}
+            type="password"
+            id={formId ? `${formId}.password` : 'password'}
+            name="password"
+            autoComplete="new-password"
+            label={passwordLabel}
+            placeholder={passwordPlaceholder}
+            validate={validators.composeValidators(
+              passwordRequired,
+              passwordMinLength,
+              passwordMaxLength
+            )}
+          />
+          <PrimaryButton type="submit" inProgress={submitInProgress} disabled={submitDisabled}>
+            <FormattedMessage id="PasswordResetForm.submitButtonText" />
+          </PrimaryButton>
+        </Form>
+      );
+    }}
+  />
+);
 
 PasswordResetFormComponent.defaultProps = {
   rootClassName: null,
   className: null,
   inProgress: false,
+  formId: null,
 };
 
 const { string, bool } = PropTypes;
 
 PasswordResetFormComponent.propTypes = {
-  ...formPropTypes,
   rootClassName: string,
   className: string,
   inProgress: bool,
   intl: intlShape.isRequired,
+  formId: string,
 };
 
-const defaultFormName = 'PasswordResetForm';
-
-const PasswordResetForm = compose(reduxForm({ form: defaultFormName }), injectIntl)(
-  PasswordResetFormComponent
-);
+const PasswordResetForm = compose(injectIntl)(PasswordResetFormComponent);
+PasswordResetForm.displayName = 'PasswordResetForm';
 
 export default PasswordResetForm;