From 2a305cf4568357a7a3dd458174911a095f807da3 Mon Sep 17 00:00:00 2001 From: Hannu Lyytikainen Date: Mon, 21 May 2018 17:27:09 +0300 Subject: [PATCH] Migrate SendMessageForm to Final Form --- .../TransactionPanel/TransactionPanel.js | 7 +- .../TransactionPage/TransactionPage.js | 5 - .../TransactionPage.test.js.snap | 2 - .../SendMessageForm.example.js | 9 +- src/forms/SendMessageForm/SendMessageForm.js | 111 +++++++++--------- 5 files changed, 67 insertions(+), 67 deletions(-) diff --git a/src/components/TransactionPanel/TransactionPanel.js b/src/components/TransactionPanel/TransactionPanel.js index 86e5756c..89fefc72 100644 --- a/src/components/TransactionPanel/TransactionPanel.js +++ b/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, diff --git a/src/containers/TransactionPage/TransactionPage.js b/src/containers/TransactionPage/TransactionPage.js index b3014723..02cc4a4f 100644 --- a/src/containers/TransactionPage/TransactionPage.js +++ b/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) => diff --git a/src/containers/TransactionPage/__snapshots__/TransactionPage.test.js.snap b/src/containers/TransactionPage/__snapshots__/TransactionPage.test.js.snap index 8c2fb326..c969f6a5 100644 --- a/src/containers/TransactionPage/__snapshots__/TransactionPage.test.js.snap +++ b/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} diff --git a/src/forms/SendMessageForm/SendMessageForm.example.js b/src/forms/SendMessageForm/SendMessageForm.example.js index e1a8cb79..dc978785 100644 --- a/src/forms/SendMessageForm/SendMessageForm.example.js +++ b/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', }; diff --git a/src/forms/SendMessageForm/SendMessageForm.js b/src/forms/SendMessageForm/SendMessageForm.js index 71146dd6..a86e7ec6 100644 --- a/src/forms/SendMessageForm/SendMessageForm.js +++ b/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 ( -
- -
-
- {sendMessageError ? ( -

- -

- ) : null} -
- - - - -
- + { + 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 ( +
handleSubmit(values, form)}> + +
+
+ {sendMessageError ? ( +

+ +

+ ) : null} +
+ + + + +
+ + ); + }} + /> ); } } @@ -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';