Refactor EnquiryForm: use Form connector from Final Form

src/containers/EnquiryForm/EnquiryForm.example.js

@@ -3,6 +3,7 @@ import EnquiryForm from './EnquiryForm';
 export const Empty = {
   component: EnquiryForm,
   props: {
+    formId: 'EnquiryFormExample',
     listingTitle: 'Sauna with a view',
     authorDisplayName: 'Janne',
     onSubmit(values) {

src/containers/EnquiryForm/EnquiryForm.js

@@ -2,78 +2,83 @@ import React from 'react';
 import { string, bool } 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, IconEnquiry } from '../../components';
+import { Form, PrimaryButton, FieldTextInput, IconEnquiry } from '../../components';
 import * as validators from '../../util/validators';
 import { propTypes } from '../../util/types';
 
 import css from './EnquiryForm.css';
 
-const EnquiryFormComponent = props => {
-  const {
-    rootClassName,
-    className,
-    submitButtonWrapperClassName,
-    form,
-    handleSubmit,
-    submitting,
-    inProgress,
-    intl,
-    listingTitle,
-    authorDisplayName,
-    sendEnquiryError,
-  } = props;
+const EnquiryFormComponent = props => (
+  <FinalForm
+    {...props}
+    render={fieldRenderProps => {
+      const {
+        rootClassName,
+        className,
+        submitButtonWrapperClassName,
+        formId,
+        handleSubmit,
+        submitting,
+        inProgress,
+        intl,
+        listingTitle,
+        authorDisplayName,
+        sendEnquiryError,
+      } = fieldRenderProps;
 
-  const messageLabel = intl.formatMessage(
-    {
-      id: 'EnquiryForm.messageLabel',
-    },
-    { authorDisplayName }
-  );
-  const messagePlaceholder = intl.formatMessage(
-    {
-      id: 'EnquiryForm.messagePlaceholder',
-    },
-    { authorDisplayName }
-  );
-  const messageRequiredMessage = intl.formatMessage({
-    id: 'EnquiryForm.messageRequired',
-  });
-  const messageRequired = validators.requiredAndNonEmptyString(messageRequiredMessage);
+      const messageLabel = intl.formatMessage(
+        {
+          id: 'EnquiryForm.messageLabel',
+        },
+        { authorDisplayName }
+      );
+      const messagePlaceholder = intl.formatMessage(
+        {
+          id: 'EnquiryForm.messagePlaceholder',
+        },
+        { authorDisplayName }
+      );
+      const messageRequiredMessage = intl.formatMessage({
+        id: 'EnquiryForm.messageRequired',
+      });
+      const messageRequired = validators.requiredAndNonEmptyString(messageRequiredMessage);
 
-  const classes = classNames(rootClassName || css.root, className);
-  const submitInProgress = submitting || inProgress;
-  const submitDisabled = submitInProgress;
+      const classes = classNames(rootClassName || css.root, className);
+      const submitInProgress = submitting || inProgress;
+      const submitDisabled = submitInProgress;
 
-  return (
-    <Form className={classes} onSubmit={handleSubmit}>
-      <IconEnquiry className={css.icon} />
-      <h2 className={css.heading}>
-        <FormattedMessage id="EnquiryForm.heading" values={{ listingTitle }} />
-      </h2>
-      <TextInputField
-        className={css.field}
-        type="textarea"
-        name="message"
-        id={`${form}.message`}
-        label={messageLabel}
-        placeholder={messagePlaceholder}
-        validate={[messageRequired]}
-      />
-      <div className={submitButtonWrapperClassName}>
-        {sendEnquiryError ? (
-          <p className={css.error}>
-            <FormattedMessage id="EnquiryForm.sendEnquiryError" />
-          </p>
-        ) : null}
-        <PrimaryButton type="submit" inProgress={submitInProgress} disabled={submitDisabled}>
-          <FormattedMessage id="EnquiryForm.submitButtonText" />
-        </PrimaryButton>
-      </div>
-    </Form>
-  );
-};
+      return (
+        <Form className={classes} onSubmit={handleSubmit}>
+          <IconEnquiry className={css.icon} />
+          <h2 className={css.heading}>
+            <FormattedMessage id="EnquiryForm.heading" values={{ listingTitle }} />
+          </h2>
+          <FieldTextInput
+            className={css.field}
+            type="textarea"
+            name="message"
+            id={formId ? `${formId}.message` : 'message'}
+            label={messageLabel}
+            placeholder={messagePlaceholder}
+            validate={messageRequired}
+          />
+          <div className={submitButtonWrapperClassName}>
+            {sendEnquiryError ? (
+              <p className={css.error}>
+                <FormattedMessage id="EnquiryForm.sendEnquiryError" />
+              </p>
+            ) : null}
+            <PrimaryButton type="submit" inProgress={submitInProgress} disabled={submitDisabled}>
+              <FormattedMessage id="EnquiryForm.submitButtonText" />
+            </PrimaryButton>
+          </div>
+        </Form>
+      );
+    }}
+  />
+);
 
 EnquiryFormComponent.defaultProps = {
   rootClassName: null,
@@ -84,7 +89,6 @@ EnquiryFormComponent.defaultProps = {
 };
 
 EnquiryFormComponent.propTypes = {
-  ...formPropTypes,
   rootClassName: string,
   className: string,
   submitButtonWrapperClassName: string,
@@ -99,8 +103,8 @@ EnquiryFormComponent.propTypes = {
   intl: intlShape.isRequired,
 };
 
-const defaultFormName = 'EnquiryForm';
+const EnquiryForm = compose(injectIntl)(EnquiryFormComponent);
 
-const EnquiryForm = compose(reduxForm({ form: defaultFormName }), injectIntl)(EnquiryFormComponent);
+EnquiryForm.displayName = 'EnquiryForm';
 
 export default EnquiryForm;