diff --git a/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.js b/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.js index 4d7c1632..1fd63e71 100644 --- a/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.js +++ b/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.js @@ -24,6 +24,7 @@ const EditListingDescriptionFormComponent = props => ( handleSubmit, intl, invalid, + pristine, saveActionMsg, updated, updateError, @@ -62,7 +63,7 @@ const EditListingDescriptionFormComponent = props => ( ) : null; const classes = classNames(css.root, className); - const submitReady = updated; + const submitReady = updated && pristine; const submitInProgress = updateInProgress; const submitDisabled = invalid || disabled || submitInProgress; diff --git a/src/containers/EditListingFeaturesForm/EditListingFeaturesForm.js b/src/containers/EditListingFeaturesForm/EditListingFeaturesForm.js index f845fd5f..64607dd4 100644 --- a/src/containers/EditListingFeaturesForm/EditListingFeaturesForm.js +++ b/src/containers/EditListingFeaturesForm/EditListingFeaturesForm.js @@ -17,12 +17,12 @@ const EditListingFeaturesFormComponent = props => ( mutators={{ ...arrayMutators }} render={fieldRenderProps => { const { - form, disabled, rootClassName, className, name, handleSubmit, + pristine, saveActionMsg, updated, updateError, @@ -30,7 +30,7 @@ const EditListingFeaturesFormComponent = props => ( } = fieldRenderProps; const classes = classNames(rootClassName || css.root, className); - const submitReady = updated; + const submitReady = updated && pristine; const submitInProgress = updateInProgress; const submitDisabled = disabled || submitInProgress; @@ -46,7 +46,7 @@ const EditListingFeaturesFormComponent = props => ( diff --git a/src/containers/EditListingLocationForm/EditListingLocationForm.js b/src/containers/EditListingLocationForm/EditListingLocationForm.js index 99080ac8..07860579 100644 --- a/src/containers/EditListingLocationForm/EditListingLocationForm.js +++ b/src/containers/EditListingLocationForm/EditListingLocationForm.js @@ -21,10 +21,10 @@ export const EditListingLocationFormComponent = props => ( const { className, disabled, - form, handleSubmit, intl, invalid, + pristine, saveActionMsg, updated, updateError, @@ -55,7 +55,7 @@ export const EditListingLocationFormComponent = props => ( ) : null; const classes = classNames(css.root, className); - const submitReady = updated; + const submitReady = updated && pristine; const submitInProgress = updateInProgress; const submitDisabled = invalid || disabled || submitInProgress; @@ -84,7 +84,7 @@ export const EditListingLocationFormComponent = props => ( className={css.building} type="text" name="building" - id={`${form}.building`} + id="building" label={buildingMessage} placeholder={buildingPlaceholderMessage} /> diff --git a/src/containers/EditListingPhotosForm/EditListingPhotosForm.js b/src/containers/EditListingPhotosForm/EditListingPhotosForm.js index 4f2a1817..76b7ed5a 100644 --- a/src/containers/EditListingPhotosForm/EditListingPhotosForm.js +++ b/src/containers/EditListingPhotosForm/EditListingPhotosForm.js @@ -1,9 +1,10 @@ import React, { Component } from 'react'; -import { bool, func, object, shape, string } from 'prop-types'; +import { array, bool, func, object, shape, string } from 'prop-types'; import { compose } from 'redux'; import { Form as FinalForm, Field } from 'react-final-form'; import { FormattedMessage, intlShape, injectIntl } from 'react-intl'; import { arrayMove } from 'react-sortable-hoc'; +import { isEqual } from 'lodash'; import classNames from 'classnames'; import { propTypes } from '../../util/types'; import { nonEmptyArray, composeValidators } from '../../util/validators'; @@ -20,6 +21,7 @@ export class EditListingPhotosFormComponent extends Component { this.state = { imageUploadRequested: false }; this.onImageUploadHandler = this.onImageUploadHandler.bind(this); this.onSortEnd = this.onSortEnd.bind(this); + this.submittedImages = []; } onImageUploadHandler(file) { @@ -50,8 +52,7 @@ export class EditListingPhotosFormComponent extends Component { initialValues={{ images: this.props.images }} render={fieldRenderProps => { const { - blur, - change, + form, className, disabled, errors, @@ -117,7 +118,16 @@ export class EditListingPhotosFormComponent extends Component {

) : null; - const submitReady = updated || ready; + const submittedOnce = this.submittedImages.length > 0; + // imgs can contain added images (with temp ids) and submitted images with uniq ids. + const arrayOfImgIds = imgs => + imgs.map(i => (typeof i.id === 'string' ? i.imageId : i.id)); + const imageIdsFromProps = arrayOfImgIds(images); + const imageIdsFromPreviousSubmit = arrayOfImgIds(this.submittedImages); + const imageArrayHasSameImages = isEqual(imageIdsFromProps, imageIdsFromPreviousSubmit); + const pristineSinceLastSubmit = submittedOnce && imageArrayHasSameImages; + + const submitReady = (updated && pristineSinceLastSubmit) || ready; const submitInProgress = updateInProgress; const submitDisabled = invalid || disabled || submitInProgress || imageUploadRequested || ready; @@ -125,7 +135,13 @@ export class EditListingPhotosFormComponent extends Component { const classes = classNames(css.root, className); return ( -
+ { + this.submittedImages = images; + handleSubmit(e); + }} + > {updateError ? (

@@ -155,8 +171,8 @@ export class EditListingPhotosFormComponent extends Component { const { name } = input; const onChange = e => { const file = e.target.files[0]; - change(`addImage`, file); - blur(`addImage`); + form.change(`addImage`, file); + form.blur(`addImage`); onImageUploadHandler(file); }; const inputProps = { accept, id: name, name, onChange, type }; @@ -215,7 +231,7 @@ export class EditListingPhotosFormComponent extends Component { } } -EditListingPhotosFormComponent.defaultProps = { errors: {}, updateError: null }; +EditListingPhotosFormComponent.defaultProps = { errors: {}, updateError: null, images: [] }; EditListingPhotosFormComponent.propTypes = { errors: shape({ @@ -223,6 +239,7 @@ EditListingPhotosFormComponent.propTypes = { showListingsError: object, uploadImageError: object, }), + images: array, intl: intlShape.isRequired, onImageUpload: func.isRequired, onUpdateImageOrder: func.isRequired, diff --git a/src/containers/EditListingPhotosForm/__snapshots__/EditListingPhotosForm.test.js.snap b/src/containers/EditListingPhotosForm/__snapshots__/EditListingPhotosForm.test.js.snap index 5b53b8ff..08634120 100644 --- a/src/containers/EditListingPhotosForm/__snapshots__/EditListingPhotosForm.test.js.snap +++ b/src/containers/EditListingPhotosForm/__snapshots__/EditListingPhotosForm.test.js.snap @@ -5,9 +5,10 @@ exports[`EditListingPhotosForm matches snapshot 1`] = ` dispatch={[Function]} errors={Object {}} imageUploadRequested={false} + images={Array []} initialValues={ Object { - "images": undefined, + "images": Array [], } } intl={ diff --git a/src/containers/EditListingPoliciesForm/EditListingPoliciesForm.js b/src/containers/EditListingPoliciesForm/EditListingPoliciesForm.js index 9e293471..d64454e8 100644 --- a/src/containers/EditListingPoliciesForm/EditListingPoliciesForm.js +++ b/src/containers/EditListingPoliciesForm/EditListingPoliciesForm.js @@ -19,6 +19,7 @@ export const EditListingPoliciesFormComponent = props => ( handleSubmit, intl, invalid, + pristine, saveActionMsg, updated, updateError, @@ -39,7 +40,7 @@ export const EditListingPoliciesFormComponent = props => ( ) : null; const classes = classNames(css.root, className); - const submitReady = updated; + const submitReady = updated && pristine; const submitInProgress = updateInProgress; const submitDisabled = invalid || disabled || submitInProgress; diff --git a/src/containers/EditListingPricingForm/EditListingPricingForm.js b/src/containers/EditListingPricingForm/EditListingPricingForm.js index 0ecbfde0..81a9e112 100644 --- a/src/containers/EditListingPricingForm/EditListingPricingForm.js +++ b/src/containers/EditListingPricingForm/EditListingPricingForm.js @@ -25,6 +25,7 @@ export const EditListingPricingFormComponent = props => ( handleSubmit, intl, invalid, + pristine, saveActionMsg, updated, updateError, @@ -60,7 +61,7 @@ export const EditListingPricingFormComponent = props => ( : priceRequired; const classes = classNames(css.root, className); - const submitReady = updated; + const submitReady = updated && pristine; const submitInProgress = updateInProgress; const submitDisabled = invalid || disabled || submitInProgress;