Migrate SendMessageForm to Final Form

src/components/TransactionPanel/TransactionPanel.js

@@ -73,9 +73,9 @@ export class TransactionPanelComponent extends Component {
     this.setState({ sendMessageFormFocused: false });
   }
 
-  onMessageSubmit(values) {
+  onMessageSubmit(values, form) {
     const message = values.message ? values.message.trim() : null;
-    const { transaction, onResetForm, onSendMessage } = this.props;
+    const { transaction, onSendMessage } = this.props;
     const ensuredTransaction = ensureTransaction(transaction);
 
     if (!message) {
@@ -83,7 +83,7 @@ export class TransactionPanelComponent extends Component {
     }
     onSendMessage(ensuredTransaction.id, message)
       .then(messageId => {
-        onResetForm(this.sendMessageFormName);
+        form.reset();
         this.scrollToMessage(messageId);
       })
       .catch(e => {
@@ -387,7 +387,6 @@ TransactionPanelComponent.propTypes = {
   onShowMoreMessages: func.isRequired,
   onSendMessage: func.isRequired,
   onSendReview: func.isRequired,
-  onResetForm: func.isRequired,
 
   // Sale related props
   onAcceptSale: func.isRequired,

src/containers/TransactionPage/TransactionPage.js

@@ -4,7 +4,6 @@ import { compose } from 'redux';
 import { connect } from 'react-redux';
 import classNames from 'classnames';
 import { FormattedMessage, intlShape, injectIntl } from 'react-intl';
-import { reset as resetForm } from 'redux-form';
 import { propTypes } from '../../util/types';
 import { ensureListing, ensureTransaction } from '../../util/data';
 import { getMarketplaceEntities } from '../../ducks/marketplaceData.duck';
@@ -48,7 +47,6 @@ export const TransactionPageComponent = props => {
     intl,
     messages,
     onManageDisableScrolling,
-    onResetForm,
     onSendMessage,
     onSendReview,
     onShowMoreMessages,
@@ -153,7 +151,6 @@ export const TransactionPageComponent = props => {
       onShowMoreMessages={onShowMoreMessages}
       onSendMessage={onSendMessage}
       onSendReview={onSendReview}
-      onResetForm={onResetForm}
       transactionRole={transactionRole}
       onAcceptSale={onAcceptSale}
       onDeclineSale={onDeclineSale}
@@ -221,7 +218,6 @@ TransactionPageComponent.propTypes = {
   sendMessageError: propTypes.error,
   onShowMoreMessages: func.isRequired,
   onSendMessage: func.isRequired,
-  onResetForm: func.isRequired,
 
   // from injectIntl
   intl: intlShape.isRequired,
@@ -279,7 +275,6 @@ const mapDispatchToProps = dispatch => {
     onDeclineSale: transactionId => dispatch(declineSale(transactionId)),
     onShowMoreMessages: txId => dispatch(fetchMoreMessages(txId)),
     onSendMessage: (txId, message) => dispatch(sendMessage(txId, message)),
-    onResetForm: formName => dispatch(resetForm(formName)),
     onManageDisableScrolling: (componentId, disableScrolling) =>
       dispatch(manageDisableScrolling(componentId, disableScrolling)),
     onSendReview: (role, tx, reviewRating, reviewContent) =>

src/containers/TransactionPage/__snapshots__/TransactionPage.test.js.snap

@@ -53,7 +53,6 @@ exports[`TransactionPage - Order matches snapshot 1`] = `
           oldestMessagePageFetched={0}
           onAcceptSale={[Function]}
           onDeclineSale={[Function]}
-          onResetForm={[Function]}
           onSendMessage={[Function]}
           onShowMoreMessages={[Function]}
           sendMessageError={null}
@@ -250,7 +249,6 @@ exports[`TransactionPage - Sale matches snapshot 1`] = `
           oldestMessagePageFetched={0}
           onAcceptSale={[Function]}
           onDeclineSale={[Function]}
-          onResetForm={[Function]}
           onSendMessage={[Function]}
           onShowMoreMessages={[Function]}
           sendMessageError={null}

src/forms/SendMessageForm/SendMessageForm.example.js

@@ -3,7 +3,6 @@ import SendMessageForm from './SendMessageForm';
 export const Empty = {
   component: SendMessageForm,
   props: {
-    form: 'Styleguide_SendMessageForm_Empty',
     messagePlaceholder: 'Send message to Juho…',
     onChange: values => {
       console.log('values changed to:', values);
@@ -24,9 +23,11 @@ export const Empty = {
 export const InProgress = {
   component: SendMessageForm,
   props: {
-    form: 'Styleguide_SendMessageForm_InProgress',
     messagePlaceholder: 'Send message to Juho…',
     inProgress: true,
+    onSubmit: values => {
+      console.log('submit values:', values);
+    },
   },
   group: 'forms',
 };
@@ -34,9 +35,11 @@ export const InProgress = {
 export const Error = {
   component: SendMessageForm,
   props: {
-    form: 'Styleguide_SendMessageForm_Error',
     messagePlaceholder: 'Send message to Juho…',
     sendMessageError: { type: 'error', name: 'ExampleError' },
+    onSubmit: values => {
+      console.log('submit values:', values);
+    },
   },
   group: 'forms',
 };

src/forms/SendMessageForm/SendMessageForm.js

@@ -2,9 +2,9 @@ import React, { Component } from 'react';
 import { string, bool, func } 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, TextInputField, SecondaryButton } from '../../components';
+import { Form, FieldTextInput, SecondaryButton } from '../../components';
 import { propTypes } from '../../util/types';
 
 import css from './SendMessageForm.css';
@@ -36,10 +36,12 @@ class SendMessageFormComponent extends Component {
     this.handleBlur = this.handleBlur.bind(this);
     this.blurTimeoutId = null;
   }
+
   handleFocus() {
     this.props.onFocus();
     window.clearTimeout(this.blurTimeoutId);
   }
+
   handleBlur() {
     // We only trigger a blur if another focus event doesn't come
     // within a timeout. This enables keeping the focus synced when
@@ -49,53 +51,60 @@ class SendMessageFormComponent extends Component {
       this.props.onBlur();
     }, BLUR_TIMEOUT_MS);
   }
+
   render() {
-    const {
-      rootClassName,
-      className,
-      messagePlaceholder,
-      form,
-      handleSubmit,
-      inProgress,
-      sendMessageError,
-      invalid,
-    } = this.props;
-
-    const classes = classNames(rootClassName || css.root, className);
-    const submitInProgress = inProgress;
-    const submitDisabled = invalid || submitInProgress;
-
     return (
-      <Form className={classes} onSubmit={handleSubmit}>
-        <TextInputField
-          inputRootClass={css.textarea}
-          type="textarea"
-          id={`${form}.message`}
-          name="message"
-          placeholder={messagePlaceholder}
-          onFocus={this.handleFocus}
-          onBlur={this.handleBlur}
-        />
-        <div className={css.submitContainer}>
-          <div className={css.errorContainer}>
-            {sendMessageError ? (
-              <p className={css.error}>
-                <FormattedMessage id="SendMessageForm.sendFailed" />
-              </p>
-            ) : null}
-          </div>
-          <SecondaryButton
-            className={css.submitButton}
-            inProgress={submitInProgress}
-            disabled={submitDisabled}
-            onFocus={this.handleFocus}
-            onBlur={this.handleBlur}
-          >
-            <IconSendMessage />
-            <FormattedMessage id="SendMessageForm.sendMessage" />
-          </SecondaryButton>
-        </div>
-      </Form>
+      <FinalForm
+        {...this.props}
+        render={fieldRenderProps => {
+          const {
+            rootClassName,
+            className,
+            messagePlaceholder,
+            handleSubmit,
+            inProgress,
+            sendMessageError,
+            invalid,
+            form,
+          } = fieldRenderProps;
+
+          const classes = classNames(rootClassName || css.root, className);
+          const submitInProgress = inProgress;
+          const submitDisabled = invalid || submitInProgress;
+          return (
+            <Form className={classes} onSubmit={values => handleSubmit(values, form)}>
+              <FieldTextInput
+                inputRootClass={css.textarea}
+                type="textarea"
+                id="message"
+                name="message"
+                placeholder={messagePlaceholder}
+                onFocus={this.handleFocus}
+                onBlur={this.handleBlur}
+              />
+              <div className={css.submitContainer}>
+                <div className={css.errorContainer}>
+                  {sendMessageError ? (
+                    <p className={css.error}>
+                      <FormattedMessage id="SendMessageForm.sendFailed" />
+                    </p>
+                  ) : null}
+                </div>
+                <SecondaryButton
+                  className={css.submitButton}
+                  inProgress={submitInProgress}
+                  disabled={submitDisabled}
+                  onFocus={this.handleFocus}
+                  onBlur={this.handleBlur}
+                >
+                  <IconSendMessage />
+                  <FormattedMessage id="SendMessageForm.sendMessage" />
+                </SecondaryButton>
+              </div>
+            </Form>
+          );
+        }}
+      />
     );
   }
 }
@@ -111,12 +120,12 @@ SendMessageFormComponent.defaultProps = {
 };
 
 SendMessageFormComponent.propTypes = {
-  ...formPropTypes,
   rootClassName: string,
   className: string,
   inProgress: bool,
 
   messagePlaceholder: string,
+  onSubmit: func.isRequired,
   onFocus: func,
   onBlur: func,
   sendMessageError: propTypes.error,
@@ -125,11 +134,7 @@ SendMessageFormComponent.propTypes = {
   intl: intlShape.isRequired,
 };
 
-const defaultFormName = 'SendMessageForm';
-
-const SendMessageForm = compose(reduxForm({ form: defaultFormName }), injectIntl)(
-  SendMessageFormComponent
-);
+const SendMessageForm = compose(injectIntl)(SendMessageFormComponent);
 
 SendMessageForm.displayName = 'SendMessageForm';