From 9eb4e7a125a1c9fdd3d4d0ac8f2a34b77f9d68fd Mon Sep 17 00:00:00 2001
From: Vesa Luusua <vesa.luusua@gmail.com>
Date: Tue, 27 Aug 2019 14:12:54 +0300
Subject: [PATCH] pre-final-form naming pattern: form prop was conflicting with
 form api

---
 .../FieldBoolean/FieldBoolean.example.js      |  2 +-
 .../FieldCheckbox/FieldCheckbox.example.js    |  2 +-
 .../FieldPhoneNumberInput.example.js          |  5 +---
 .../FieldRadioButton.example.js               |  2 --
 .../FieldReviewRating.example.js              |  6 ++--
 src/components/Topbar/Topbar.js               |  1 -
 src/components/TopbarDesktop/TopbarDesktop.js |  1 -
 .../TransactionPanel/TransactionPanel.js      |  2 +-
 .../TransactionPanel.test.js.snap             | 28 +++++++++----------
 .../BookingDatesForm/BookingDatesForm.js      |  6 ++--
 src/forms/SendMessageForm/SendMessageForm.js  |  3 +-
 11 files changed, 26 insertions(+), 32 deletions(-)

diff --git a/src/components/FieldBoolean/FieldBoolean.example.js b/src/components/FieldBoolean/FieldBoolean.example.js
index 818161b8..a7764fd2 100644
--- a/src/components/FieldBoolean/FieldBoolean.example.js
+++ b/src/components/FieldBoolean/FieldBoolean.example.js
@@ -9,7 +9,7 @@ const formName = 'Styleguide.FieldBoolean.Form';
 const FormComponent = props => (
   <FinalForm
     {...props}
-    form={formName}
+    formId={formName}
     render={fieldRenderProps => {
       const { form, handleSubmit, onChange, invalid, pristine, submitting } = props;
       const required = validators.requiredBoolean('This field is required');
diff --git a/src/components/FieldCheckbox/FieldCheckbox.example.js b/src/components/FieldCheckbox/FieldCheckbox.example.js
index e5009cdf..8a1511eb 100644
--- a/src/components/FieldCheckbox/FieldCheckbox.example.js
+++ b/src/components/FieldCheckbox/FieldCheckbox.example.js
@@ -8,7 +8,7 @@ const formName = 'Styleguide.FieldCheckbox.Form';
 const FormComponent = props => (
   <FinalForm
     {...props}
-    form={formName}
+    formId={formName}
     render={fieldRenderProps => {
       const { form, handleSubmit, onChange, invalid, pristine, submitting } = fieldRenderProps;
 
diff --git a/src/components/FieldPhoneNumberInput/FieldPhoneNumberInput.example.js b/src/components/FieldPhoneNumberInput/FieldPhoneNumberInput.example.js
index d27c0999..299fc24a 100644
--- a/src/components/FieldPhoneNumberInput/FieldPhoneNumberInput.example.js
+++ b/src/components/FieldPhoneNumberInput/FieldPhoneNumberInput.example.js
@@ -4,12 +4,9 @@ import * as validators from '../../util/validators';
 import { Button } from '../../components';
 import FieldPhoneNumberInput from './FieldPhoneNumberInput';
 
-const formName = 'Styleguide.FieldPhoneNumberInput.Form';
-
 const FormComponent = props => (
   <FinalForm
     {...props}
-    form={formName}
     render={fieldRenderProps => {
       const { formId, handleSubmit, onChange, invalid, pristine, submitting } = fieldRenderProps;
       const required = validators.required('This field is required');
@@ -41,7 +38,7 @@ const FormComponent = props => (
 export const PhoneNumber = {
   component: FormComponent,
   props: {
-    formId: 'PhoneNumberExample',
+    formId: 'Styleguide.FieldPhoneNumberInput.Form',
     onChange: formState => {
       if (formState.dirty) {
         console.log('form values changed to:', formState.values);
diff --git a/src/components/FieldRadioButton/FieldRadioButton.example.js b/src/components/FieldRadioButton/FieldRadioButton.example.js
index 63664a62..0d66fcd0 100644
--- a/src/components/FieldRadioButton/FieldRadioButton.example.js
+++ b/src/components/FieldRadioButton/FieldRadioButton.example.js
@@ -2,12 +2,10 @@ import React from 'react';
 import { Form as FinalForm, FormSpy } from 'react-final-form';
 import { Button } from '..';
 import FieldRadioButton from './FieldRadioButton';
-const formName = 'Styleguide.FieldRadioButton.Form';
 
 const FormComponent = props => (
   <FinalForm
     {...props}
-    form={formName}
     render={fieldRenderProps => {
       const {
         handleSubmit,
diff --git a/src/components/FieldReviewRating/FieldReviewRating.example.js b/src/components/FieldReviewRating/FieldReviewRating.example.js
index 11a0cbbe..295c833f 100644
--- a/src/components/FieldReviewRating/FieldReviewRating.example.js
+++ b/src/components/FieldReviewRating/FieldReviewRating.example.js
@@ -10,9 +10,9 @@ const formName = 'Styleguide.FieldReviewRating.Form';
 const FormComponent = props => (
   <FinalForm
     {...props}
-    form={formName}
+    formId={formName}
     render={fieldRenderProps => {
-      const { form, handleSubmit, onChange, invalid, pristine, submitting } = fieldRenderProps;
+      const { formId, handleSubmit, onChange, invalid, pristine, submitting } = fieldRenderProps;
       const required = validators.required('This field is required');
       const submitDisabled = invalid || pristine || submitting;
 
@@ -25,7 +25,7 @@ const FormComponent = props => (
         >
           <FormSpy onChange={onChange} />
           <FieldReviewRating
-            id={`${form}.rate1`}
+            id={`${formId}.rate1`}
             name="rating"
             label="Rate your experience"
             validate={required}
diff --git a/src/components/Topbar/Topbar.js b/src/components/Topbar/Topbar.js
index d6fa2ba6..13d7b8de 100644
--- a/src/components/Topbar/Topbar.js
+++ b/src/components/Topbar/Topbar.js
@@ -244,7 +244,6 @@ class TopbarComponent extends Component {
         >
           <div className={css.searchContainer}>
             <TopbarSearchForm
-              form="TopbarSearchForm"
               onSubmit={this.handleSubmit}
               initialValues={initialSearchFormValues}
               isMobile
diff --git a/src/components/TopbarDesktop/TopbarDesktop.js b/src/components/TopbarDesktop/TopbarDesktop.js
index a90b91e5..632e3faf 100644
--- a/src/components/TopbarDesktop/TopbarDesktop.js
+++ b/src/components/TopbarDesktop/TopbarDesktop.js
@@ -47,7 +47,6 @@ const TopbarDesktop = props => {
     <TopbarSearchForm
       className={css.searchLink}
       desktopInputRoot={css.topbarSearchWithLeftPadding}
-      form="TopbarSearchFormDesktop"
       onSubmit={onSearchSubmit}
       initialValues={initialSearchFormValues}
     />
diff --git a/src/components/TransactionPanel/TransactionPanel.js b/src/components/TransactionPanel/TransactionPanel.js
index 3587a25e..e5779599 100644
--- a/src/components/TransactionPanel/TransactionPanel.js
+++ b/src/components/TransactionPanel/TransactionPanel.js
@@ -395,7 +395,7 @@ export class TransactionPanelComponent extends Component {
             />
             {showSendMessageForm ? (
               <SendMessageForm
-                form={this.sendMessageFormName}
+                formId={this.sendMessageFormName}
                 rootClassName={css.sendMessageForm}
                 messagePlaceholder={sendMessagePlaceholder}
                 inProgress={sendMessageInProgress}
diff --git a/src/components/TransactionPanel/__snapshots__/TransactionPanel.test.js.snap b/src/components/TransactionPanel/__snapshots__/TransactionPanel.test.js.snap
index 24d52822..833d47d8 100644
--- a/src/components/TransactionPanel/__snapshots__/TransactionPanel.test.js.snap
+++ b/src/components/TransactionPanel/__snapshots__/TransactionPanel.test.js.snap
@@ -509,7 +509,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
         totalMessagePages={1}
       />
       <SendMessageForm
-        form="TransactionPanel.SendMessageForm"
+        formId="TransactionPanel.SendMessageForm"
         inProgress={false}
         messagePlaceholder="TransactionPanel.sendMessagePlaceholder"
         onBlur={[Function]}
@@ -1266,7 +1266,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
         totalMessagePages={1}
       />
       <SendMessageForm
-        form="TransactionPanel.SendMessageForm"
+        formId="TransactionPanel.SendMessageForm"
         inProgress={false}
         messagePlaceholder="TransactionPanel.sendMessagePlaceholder"
         onBlur={[Function]}
@@ -2023,7 +2023,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
         totalMessagePages={1}
       />
       <SendMessageForm
-        form="TransactionPanel.SendMessageForm"
+        formId="TransactionPanel.SendMessageForm"
         inProgress={false}
         messagePlaceholder="TransactionPanel.sendMessagePlaceholder"
         onBlur={[Function]}
@@ -2780,7 +2780,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
         totalMessagePages={1}
       />
       <SendMessageForm
-        form="TransactionPanel.SendMessageForm"
+        formId="TransactionPanel.SendMessageForm"
         inProgress={false}
         messagePlaceholder="TransactionPanel.sendMessagePlaceholder"
         onBlur={[Function]}
@@ -3547,7 +3547,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
         totalMessagePages={1}
       />
       <SendMessageForm
-        form="TransactionPanel.SendMessageForm"
+        formId="TransactionPanel.SendMessageForm"
         inProgress={false}
         messagePlaceholder="TransactionPanel.sendMessagePlaceholder"
         onBlur={[Function]}
@@ -4309,7 +4309,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
         totalMessagePages={1}
       />
       <SendMessageForm
-        form="TransactionPanel.SendMessageForm"
+        formId="TransactionPanel.SendMessageForm"
         inProgress={false}
         messagePlaceholder="TransactionPanel.sendMessagePlaceholder"
         onBlur={[Function]}
@@ -5064,7 +5064,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
         totalMessagePages={1}
       />
       <SendMessageForm
-        form="TransactionPanel.SendMessageForm"
+        formId="TransactionPanel.SendMessageForm"
         inProgress={false}
         messagePlaceholder="TransactionPanel.sendMessagePlaceholder"
         onBlur={[Function]}
@@ -5821,7 +5821,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
         totalMessagePages={1}
       />
       <SendMessageForm
-        form="TransactionPanel.SendMessageForm"
+        formId="TransactionPanel.SendMessageForm"
         inProgress={false}
         messagePlaceholder="TransactionPanel.sendMessagePlaceholder"
         onBlur={[Function]}
@@ -6578,7 +6578,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
         totalMessagePages={1}
       />
       <SendMessageForm
-        form="TransactionPanel.SendMessageForm"
+        formId="TransactionPanel.SendMessageForm"
         inProgress={false}
         messagePlaceholder="TransactionPanel.sendMessagePlaceholder"
         onBlur={[Function]}
@@ -7335,7 +7335,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
         totalMessagePages={1}
       />
       <SendMessageForm
-        form="TransactionPanel.SendMessageForm"
+        formId="TransactionPanel.SendMessageForm"
         inProgress={false}
         messagePlaceholder="TransactionPanel.sendMessagePlaceholder"
         onBlur={[Function]}
@@ -8092,7 +8092,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
         totalMessagePages={1}
       />
       <SendMessageForm
-        form="TransactionPanel.SendMessageForm"
+        formId="TransactionPanel.SendMessageForm"
         inProgress={false}
         messagePlaceholder="TransactionPanel.sendMessagePlaceholder"
         onBlur={[Function]}
@@ -8849,7 +8849,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
         totalMessagePages={1}
       />
       <SendMessageForm
-        form="TransactionPanel.SendMessageForm"
+        formId="TransactionPanel.SendMessageForm"
         inProgress={false}
         messagePlaceholder="TransactionPanel.sendMessagePlaceholder"
         onBlur={[Function]}
@@ -9606,7 +9606,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
         totalMessagePages={1}
       />
       <SendMessageForm
-        form="TransactionPanel.SendMessageForm"
+        formId="TransactionPanel.SendMessageForm"
         inProgress={false}
         messagePlaceholder="TransactionPanel.sendMessagePlaceholder"
         onBlur={[Function]}
@@ -10361,7 +10361,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
         totalMessagePages={1}
       />
       <SendMessageForm
-        form="TransactionPanel.SendMessageForm"
+        formId="TransactionPanel.SendMessageForm"
         inProgress={false}
         messagePlaceholder="TransactionPanel.sendMessagePlaceholder"
         onBlur={[Function]}
diff --git a/src/forms/BookingDatesForm/BookingDatesForm.js b/src/forms/BookingDatesForm/BookingDatesForm.js
index e60391c0..1f978cd2 100644
--- a/src/forms/BookingDatesForm/BookingDatesForm.js
+++ b/src/forms/BookingDatesForm/BookingDatesForm.js
@@ -79,7 +79,7 @@ export class BookingDatesFormComponent extends Component {
           const {
             endDatePlaceholder,
             startDatePlaceholder,
-            form,
+            formId,
             handleSubmit,
             intl,
             isOwnListing,
@@ -161,10 +161,10 @@ export class BookingDatesFormComponent extends Component {
                 className={css.bookingDates}
                 name="bookingDates"
                 unitType={unitType}
-                startDateId={`${form}.bookingStartDate`}
+                startDateId={`${formId}.bookingStartDate`}
                 startDateLabel={bookingStartLabel}
                 startDatePlaceholderText={startDatePlaceholderText}
-                endDateId={`${form}.bookingEndDate`}
+                endDateId={`${formId}.bookingEndDate`}
                 endDateLabel={bookingEndLabel}
                 endDatePlaceholderText={endDatePlaceholderText}
                 focusedInput={this.state.focusedInput}
diff --git a/src/forms/SendMessageForm/SendMessageForm.js b/src/forms/SendMessageForm/SendMessageForm.js
index 716022c8..821802d8 100644
--- a/src/forms/SendMessageForm/SendMessageForm.js
+++ b/src/forms/SendMessageForm/SendMessageForm.js
@@ -66,6 +66,7 @@ class SendMessageFormComponent extends Component {
             sendMessageError,
             invalid,
             form,
+            formId,
           } = formRenderProps;
 
           const classes = classNames(rootClassName || css.root, className);
@@ -76,7 +77,7 @@ class SendMessageFormComponent extends Component {
               <FieldTextInput
                 inputRootClass={css.textarea}
                 type="textarea"
-                id="message"
+                id={formId ? `${formId}.message` : 'message'}
                 name="message"
                 placeholder={messagePlaceholder}
                 onFocus={this.handleFocus}