EditListingLocationPanel - fix flashing initial value when submitting

src/components/EditListingLocationPanel/EditListingLocationPanel.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { FormattedMessage } from 'react-intl';
@@ -8,77 +8,100 @@ import { EditListingLocationForm } from '../../forms';
 
 import css from './EditListingLocationPanel.css';
 
-const EditListingLocationPanel = props => {
-  const {
-    className,
-    rootClassName,
-    listing,
-    onSubmit,
-    onChange,
-    submitButtonText,
-    panelUpdated,
-    updateInProgress,
-    errors,
-  } = props;
+class EditListingLocationPanel extends Component {
+  constructor(props) {
+    super(props);
 
-  const classes = classNames(rootClassName || css.root, className);
-  const currentListing = ensureOwnListing(listing);
-  const { geolocation, publicData } = currentListing.attributes;
+    this.getInitialValues = this.getInitialValues.bind(this);
 
-  const panelTitle = currentListing.id ? (
-    <FormattedMessage
-      id="EditListingLocationPanel.title"
-      values={{ listingTitle: <ListingLink listing={listing} /> }}
-    />
-  ) : (
-    <FormattedMessage id="EditListingLocationPanel.createListingTitle" />
-  );
+    this.state = {
+      initialValues: this.getInitialValues(),
+    };
+  }
 
-  // Only render current search if full place object is available in the URL params
-  // TODO bounds and country are missing - those need to be queried directly from Google Places
-  const locationFieldsPresent =
-    publicData && publicData.location && publicData.location.address && geolocation;
-  const location = publicData && publicData.location ? publicData.location : {};
-  const { address, building } = location;
+  getInitialValues() {
+    const { listing } = this.props;
+    const currentListing = ensureOwnListing(listing);
+    const { geolocation, publicData } = currentListing.attributes;
 
-  const initialSearchFormValues = {
-    building,
-    location: locationFieldsPresent
-      ? {
-          search: address,
-          selectedPlace: { address, origin: geolocation },
-        }
-      : null,
-  };
+    // Only render current search if full place object is available in the URL params
+    // TODO bounds and country are missing - those need to be queried directly from Google Places
+    const locationFieldsPresent =
+      publicData && publicData.location && publicData.location.address && geolocation;
+    const location = publicData && publicData.location ? publicData.location : {};
+    const { address, building } = location;
 
-  return (
-    <div className={classes}>
-      <h1 className={css.title}>{panelTitle}</h1>
-      <EditListingLocationForm
-        className={css.form}
-        initialValues={initialSearchFormValues}
-        onSubmit={values => {
-          const { building = '', location } = values;
-          const {
-            selectedPlace: { address, origin },
-          } = location;
-          const updateValues = {
-            geolocation: origin,
-            publicData: {
-              location: { address, building },
-            },
-          };
-          onSubmit(updateValues);
-        }}
-        onChange={onChange}
-        saveActionMsg={submitButtonText}
-        updated={panelUpdated}
-        updateError={errors.updateListingError}
-        updateInProgress={updateInProgress}
+    return {
+      building,
+      location: locationFieldsPresent
+        ? {
+            search: address,
+            selectedPlace: { address, origin: geolocation },
+          }
+        : null,
+    };
+  }
+
+  render() {
+    const {
+      className,
+      rootClassName,
+      listing,
+      onSubmit,
+      onChange,
+      submitButtonText,
+      panelUpdated,
+      updateInProgress,
+      errors,
+    } = this.props;
+
+    const classes = classNames(rootClassName || css.root, className);
+    const currentListing = ensureOwnListing(listing);
+
+    const panelTitle = currentListing.id ? (
+      <FormattedMessage
+        id="EditListingLocationPanel.title"
+        values={{ listingTitle: <ListingLink listing={listing} /> }}
       />
-    </div>
-  );
-};
+    ) : (
+      <FormattedMessage id="EditListingLocationPanel.createListingTitle" />
+    );
+
+    return (
+      <div className={classes}>
+        <h1 className={css.title}>{panelTitle}</h1>
+        <EditListingLocationForm
+          className={css.form}
+          initialValues={this.state.initialValues}
+          onSubmit={values => {
+            const { building = '', location } = values;
+            const {
+              selectedPlace: { address, origin },
+            } = location;
+            const updateValues = {
+              geolocation: origin,
+              publicData: {
+                location: { address, building },
+              },
+            };
+            this.setState({
+              initialValues: {
+                building,
+                location: { search: address, selectedPlace: { address, origin } },
+              },
+            });
+            onSubmit(updateValues);
+          }}
+          onChange={onChange}
+          saveActionMsg={submitButtonText}
+          updated={panelUpdated}
+          updateError={errors.updateListingError}
+          updateInProgress={updateInProgress}
+        />
+      </div>
+    );
+  }
+}
 
 const { func, object, string, bool } = PropTypes;