Show current location search in the search input

src/containers/LandingPage/LandingPage.js

@@ -12,15 +12,15 @@ export const LandingPageComponent = props => {
 
   const handleSubmit = values => {
     const selectedPlace = values && values.location ? values.location.selectedPlace : null;
-    const { address, origin, bounds } = selectedPlace || {};
-    const searchParams = { address, origin, bounds };
+    const { address, origin, bounds, country } = selectedPlace || {};
+    const searchParams = { address, origin, bounds, country };
     history.push(createResourceLocatorString('SearchPage', flattenedRoutes, {}, searchParams));
   };
 
   return (
     <PageLayout title="Landing page">
       <HeroSection>
-        <SearchForm className={css.form} onSubmit={handleSubmit} />
+        <SearchForm form="LandingPageSearchForm" className={css.form} onSubmit={handleSubmit} />
       </HeroSection>
     </PageLayout>
   );

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

@@ -3,6 +3,7 @@ exports[`LandingPage matches snapshot 1`] = `
   title="Landing page">
   <HeroSection>
     <ReduxForm
+      form="LandingPageSearchForm"
       onSubmit={[Function]} />
   </HeroSection>
 </Connect(withRouter(PageLayout))>

src/containers/SearchForm/SearchForm.js

@@ -9,6 +9,8 @@ const SearchForm = props => {
   const { className, intl, handleSubmit, submitting } = props;
   const addClassName = className ? { className } : {};
 
+  const submitDisabled = submitting;
+
   return (
     <form {...addClassName} onSubmit={handleSubmit}>
       <Field
@@ -19,7 +21,7 @@ const SearchForm = props => {
         format={null}
         component={LocationAutocompleteInput}
       />
-      <Button className={css.locationButton} type="submit" disabled={submitting}>
+      <Button className={css.locationButton} type="submit" disabled={submitDisabled}>
         <FormattedMessage id="SearchForm.search" />
         <div className={css.searchIcon}>
           <svg width="18" height="18" viewBox="189 165 18 18" xmlns="http://www.w3.org/2000/svg">
@@ -41,6 +43,13 @@ const SearchForm = props => {
   );
 };
 
-SearchForm.propTypes = { ...formPropTypes, intl: intlShape.isRequired };
+SearchForm.propTypes = {
+  ...formPropTypes,
 
-export default reduxForm({ form: 'searchform' })(injectIntl(SearchForm));
+  // from injectIntl
+  intl: intlShape.isRequired,
+};
+
+const formName = 'SearchForm';
+
+export default reduxForm({ form: formName })(injectIntl(SearchForm));

src/containers/Topbar/Topbar.js

@@ -64,8 +64,8 @@ class TopbarComponent extends Component {
   handleSubmit(values) {
     const selectedPlace = values && values.location ? values.location.selectedPlace : null;
     const { flattenedRoutes, history } = this.props;
-    const { address, origin, bounds } = selectedPlace || {};
-    const searchParams = { address, origin, bounds };
+    const { address, origin, bounds, country } = selectedPlace || {};
+    const searchParams = { address, origin, bounds, country };
     history.push(createResourceLocatorString('SearchPage', flattenedRoutes, {}, searchParams));
   }
 
@@ -91,13 +91,29 @@ class TopbarComponent extends Component {
     const me = ensureUser(currentUser);
     const profile = me.attributes.profile;
     const name = me.id ? `${profile.firstName} ${profile.lastName}` : '';
-    const { mobilemenu, mobilesearch } = parse(location.search);
+
+    const { mobilemenu, mobilesearch, address, origin, bounds, country } = parse(location.search, {
+      latlng: ['origin'],
+      latlngBounds: ['bounds'],
+    });
+
     const isMobileMenuOpen = mobilemenu === 'open';
     const isMobileSearchOpen = mobilesearch === 'open';
     const mobileMenu = (
       <MobileMenu isAuthenticated={isAuthenticated} name={name} onLogout={this.handleLogout} />
     );
 
+    // Only render current search if full place object is available in the URL params
+    const locationFieldsPresent = address && origin && bounds && country;
+    const initialSearchFormValues = {
+      location: locationFieldsPresent
+        ? {
+            search: address,
+            selectedPlace: { address, origin, bounds, country },
+          }
+        : null,
+    };
+
     return (
       <div className={css.root}>
         <div className={css.container}>
@@ -125,7 +141,12 @@ class TopbarComponent extends Component {
           onClose={this.handleMobileSearchClose}
           togglePageClassNames={togglePageClassNames}
         >
-          <SearchForm className={css.searchForm} onSubmit={this.handleSubmit} />
+          <SearchForm
+            form="TopbarSearchForm"
+            className={css.searchForm}
+            onSubmit={this.handleSubmit}
+            initialValues={initialSearchFormValues}
+          />
         </Modal>
       </div>
     );