From 3d172412f3420bd003c8a2cdbef5cd6a8bbd825e Mon Sep 17 00:00:00 2001
From: Hannu Lyytikainen <hannu@sharetribe.com>
Date: Fri, 18 May 2018 17:04:55 +0300
Subject: [PATCH] Migrate EmailVerificationForm to Final Form

---
 .../EmailVerificationForm.js                  | 150 +++++++++---------
 1 file changed, 74 insertions(+), 76 deletions(-)

diff --git a/src/forms/EmailVerificationForm/EmailVerificationForm.js b/src/forms/EmailVerificationForm/EmailVerificationForm.js
index 0048d3e3..8e5bad8d 100644
--- a/src/forms/EmailVerificationForm/EmailVerificationForm.js
+++ b/src/forms/EmailVerificationForm/EmailVerificationForm.js
@@ -1,8 +1,8 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { bool } from 'prop-types';
 import { compose } from 'redux';
 import { FormattedMessage, injectIntl } from 'react-intl';
-import { reduxForm, Field, propTypes as formPropTypes } from 'redux-form';
+import { Form as FinalForm, Field } from 'react-final-form';
 import {
   Form,
   NamedLink,
@@ -14,79 +14,84 @@ import { propTypes } from '../../util/types';
 
 import css from './EmailVerificationForm.css';
 
-const EmailVerificationFormComponent = props => {
-  const { currentUser, inProgress, handleSubmit, verificationError } = props;
+const EmailVerificationFormComponent = props => (
+  <FinalForm
+    {...props}
+    render={fieldRenderProps => {
+      const { currentUser, inProgress, handleSubmit, verificationError } = fieldRenderProps;
 
-  const { email, emailVerified, pendingEmail, profile } = currentUser.attributes;
-  const emailToVerify = <strong>{pendingEmail || email}</strong>;
-  const name = profile.firstName;
+      const { email, emailVerified, pendingEmail, profile } = currentUser.attributes;
+      const emailToVerify = <strong>{pendingEmail || email}</strong>;
+      const name = profile.firstName;
 
-  const errorMessage = (
-    <div className={css.error}>
-      <FormattedMessage id="EmailVerificationForm.verificationFailed" />
-    </div>
-  );
-
-  const submitInProgress = inProgress;
-  const submitDisabled = submitInProgress;
-
-  const verifyEmail = (
-    <div className={css.root}>
-      <div>
-        <IconEmailAttention className={css.modalIcon} />
-        <h1 className={css.modalTitle}>
-          <FormattedMessage id="EmailVerificationForm.verifyEmailAddress" />
-        </h1>
-
-        <p className={css.modalMessage}>
-          <FormattedMessage
-            id="EmailVerificationForm.finishAccountSetup"
-            values={{ email: emailToVerify }}
-          />
-        </p>
-
-        {verificationError ? errorMessage : null}
-      </div>
-
-      <Form onSubmit={handleSubmit}>
-        <Field component="input" type="hidden" name="verificationToken" />
-
-        <div className={css.bottomWrapper}>
-          <PrimaryButton type="submit" inProgress={submitInProgress} disabled={submitDisabled}>
-            {inProgress ? (
-              <FormattedMessage id="EmailVerificationForm.verifying" />
-            ) : (
-              <FormattedMessage id="EmailVerificationForm.verify" />
-            )}
-          </PrimaryButton>
+      const errorMessage = (
+        <div className={css.error}>
+          <FormattedMessage id="EmailVerificationForm.verificationFailed" />
         </div>
-      </Form>
-    </div>
-  );
+      );
 
-  const alreadyVerified = (
-    <div className={css.root}>
-      <div>
-        <IconEmailSuccess className={css.modalIcon} />
-        <h1 className={css.modalTitle}>
-          <FormattedMessage id="EmailVerificationForm.successTitle" values={{ name }} />
-        </h1>
+      const submitInProgress = inProgress;
+      const submitDisabled = submitInProgress;
 
-        <p className={css.modalMessage}>
-          <FormattedMessage id="EmailVerificationForm.successText" />
-        </p>
-      </div>
+      const verifyEmail = (
+        <div className={css.root}>
+          <div>
+            <IconEmailAttention className={css.modalIcon} />
+            <h1 className={css.modalTitle}>
+              <FormattedMessage id="EmailVerificationForm.verifyEmailAddress" />
+            </h1>
 
-      <div className={css.bottomWrapper}>
-        <NamedLink className={css.submitButton} name="LandingPage">
-          <FormattedMessage id="EmailVerificationForm.successButtonText" />
-        </NamedLink>
-      </div>
-    </div>
-  );
+            <p className={css.modalMessage}>
+              <FormattedMessage
+                id="EmailVerificationForm.finishAccountSetup"
+                values={{ email: emailToVerify }}
+              />
+            </p>
 
-  return emailVerified && !pendingEmail ? alreadyVerified : verifyEmail;
-};
+            {verificationError ? errorMessage : null}
+          </div>
+
+          <Form onSubmit={handleSubmit}>
+            <Field component="input" type="hidden" name="verificationToken" />
+
+            <div className={css.bottomWrapper}>
+              <PrimaryButton type="submit" inProgress={submitInProgress} disabled={submitDisabled}>
+                {inProgress ? (
+                  <FormattedMessage id="EmailVerificationForm.verifying" />
+                ) : (
+                  <FormattedMessage id="EmailVerificationForm.verify" />
+                )}
+              </PrimaryButton>
+            </div>
+          </Form>
+        </div>
+      );
+
+      const alreadyVerified = (
+        <div className={css.root}>
+          <div>
+            <IconEmailSuccess className={css.modalIcon} />
+            <h1 className={css.modalTitle}>
+              <FormattedMessage id="EmailVerificationForm.successTitle" values={{ name }} />
+            </h1>
+
+            <p className={css.modalMessage}>
+              <FormattedMessage id="EmailVerificationForm.successText" />
+            </p>
+          </div>
+
+          <div className={css.bottomWrapper}>
+            <NamedLink className={css.submitButton} name="LandingPage">
+              <FormattedMessage id="EmailVerificationForm.successButtonText" />
+            </NamedLink>
+          </div>
+        </div>
+      );
+
+      return emailVerified && !pendingEmail ? alreadyVerified : verifyEmail;
+    }}
+  />
+);
 
 EmailVerificationFormComponent.defaultProps = {
   currentUser: null,
@@ -94,19 +99,12 @@ EmailVerificationFormComponent.defaultProps = {
   verificationError: null,
 };
 
-const { bool } = PropTypes;
-
 EmailVerificationFormComponent.propTypes = {
-  ...formPropTypes,
   inProgress: bool,
   currentUser: propTypes.currentUser.isRequired,
   verificationError: propTypes.error,
 };
 
-const defaultFormName = 'EmailVerificationForm';
-
-const EmailVerificationForm = compose(reduxForm({ form: defaultFormName }), injectIntl)(
-  EmailVerificationFormComponent
-);
+const EmailVerificationForm = compose(injectIntl)(EmailVerificationFormComponent);
 
 export default EmailVerificationForm;