Make a proper location search from landing page

src/app.test.js

@@ -12,9 +12,11 @@ const render = (url, context) => {
 
 describe('Application', () => {
   it('renders in the client without crashing', () => {
+    window.google = { maps: {} };
     const store = configureStore({});
     const div = document.createElement('div');
     ReactDOM.render(<ClientApp store={store} />, div);
+    delete window.google;
   });
 
   it('renders in the server without crashing', () => {

src/components/LocationAutocompleteInput/LocationAutocompleteInput.css

@@ -3,13 +3,13 @@
 }
 
 .input {
-  height: 30px;
+  height: 50px;
 }
 
 .predictions {
   position: absolute;
   margin: 0;
-  top: 30px;
+  top: 50px;
   width: 100%;
   background-color: #fff;
   border: 1px solid #eee;

src/components/LocationAutocompleteInput/LocationAutocompleteInput.js

@@ -251,7 +251,8 @@ class LocationAutocompleteInput extends Component {
       });
   }
   render() {
-    const { name, onFocus, onBlur } = this.props.input;
+    const { className, placeholder, input } = this.props;
+    const { name, onFocus, onBlur } = input;
     const { search, predictions } = currentValue(this.props);
 
     const handleOnFocus = e => {
@@ -274,8 +275,9 @@ class LocationAutocompleteInput extends Component {
     return (
       <div className={css.root}>
         <input
-          className={css.input}
+          className={`${className} ${css.input}`}
           type="search"
+          placeholder={placeholder}
           name={name}
           value={search}
           onFocus={handleOnFocus}
@@ -303,7 +305,11 @@ class LocationAutocompleteInput extends Component {
   }
 }
 
+LocationAutocompleteInput.defaultProps = { className: '', placeholder: '' };
+
 LocationAutocompleteInput.propTypes = {
+  className: string,
+  placeholder: string,
   input: shape({
     name: string.isRequired,
     value: shape({

src/containers/HeroSearchForm/HeroSearchForm.css

@@ -1,6 +1,5 @@
 .locationInput {
   width: 100%;
-  height: 50px;
   background-color: white;
 }
 

src/containers/HeroSearchForm/HeroSearchForm.js

@@ -1,21 +1,25 @@
 import React from 'react';
 import { Field, reduxForm, propTypes as formPropTypes } from 'redux-form';
 import { FormattedMessage, intlShape, injectIntl } from 'react-intl';
+import { LocationAutocompleteInput } from '../../components';
+import { autocompleteSearchRequired, autocompletePlaceSelected } from '../../util/validators';
+
 import css from './HeroSearchForm.css';
 
 const HeroSearchForm = props => {
   const { className, intl, handleSubmit, pristine, submitting } = props;
   const addClassName = className ? { className } : {};
-  const placeholderMsg = { id: 'HeroSearchForm.placeholder' };
 
   return (
     <form {...addClassName} onSubmit={handleSubmit}>
       <Field
-        name="location"
         className={css.locationInput}
-        component="input"
-        type="text"
-        placeholder={intl.formatMessage(placeholderMsg)}
+        name="location"
+        label="Location"
+        placeholder={intl.formatMessage({ id: 'HeroSearchForm.placeholder' })}
+        format={null}
+        component={LocationAutocompleteInput}
+        validate={[autocompleteSearchRequired(), autocompletePlaceSelected()]}
       />
       <button className={css.locationButton} type="submit" disabled={pristine || submitting}>
         <FormattedMessage id="HeroSearchForm.search" />

src/containers/HeroSearchForm/HeroSearchForm.test.js

@@ -4,7 +4,9 @@ import HeroSearchForm from './HeroSearchForm';
 
 describe('HeroSearchForm', () => {
   it('matches snapshot', () => {
+    window.google = { maps: {} };
     const tree = renderDeep(<HeroSearchForm />);
     expect(tree).toMatchSnapshot();
+    delete window.google;
   });
 });

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

@@ -1,17 +1,19 @@
 exports[`HeroSearchForm matches snapshot 1`] = `
 <form
   onSubmit={[Function]}>
-  <input
-    className={undefined}
-    name="location"
-    onBlur={[Function]}
-    onChange={[Function]}
-    onDragStart={[Function]}
-    onDrop={[Function]}
-    onFocus={[Function]}
-    placeholder="Location search (soon)"
-    type="text"
-    value="" />
+  <div
+    className={undefined}>
+    <input
+      className=" undefined"
+      name="location"
+      onBlur={[Function]}
+      onChange={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      placeholder="Search by location, e.g. New York"
+      type="search"
+      value="" />
+  </div>
   <button
     className={undefined}
     disabled={true}

src/containers/LandingPage/LandingPage.js

@@ -1,38 +1,34 @@
 import React, { PropTypes } from 'react';
-import { connect } from 'react-redux';
-import { HeroSection, NamedRedirect, PageLayout } from '../../components';
+import { withRouter } from 'react-router-dom';
+import { HeroSection, PageLayout } from '../../components';
 import { HeroSearchForm } from '../../containers';
-import { changeLocationFilter } from '../../ducks/LocationFilter.duck';
+import { stringify } from '../../util/urlHelpers';
+
 import css from './LandingPage.css';
 
-const createSubmitHandler = onLocationChanged =>
-  formData => {
-    onLocationChanged(formData.location);
+export const LandingPageComponent = props => {
+  const { push: historyPush } = props;
+
+  const handleSubmit = values => {
+    const { location: { selectedPlace } } = values;
+    const { address, origin, bounds } = selectedPlace;
+    const searchQuery = stringify({ address, origin, bounds });
+    historyPush(`/s?${searchQuery}`);
   };
 
-export const LandingPageComponent = props => {
-  const { onLocationChanged, filter } = props;
-  const handleSubmit = createSubmitHandler(onLocationChanged);
-
-  return filter.length > 0
-    ? <NamedRedirect name="SearchPage" search={`location=${filter}`} />
-    : <PageLayout title="Landing page">
-        <HeroSection>
-          <HeroSearchForm className={css.form} onSubmit={handleSubmit} />
-        </HeroSection>
-      </PageLayout>;
+  return (
+    <PageLayout title="Landing page">
+      <HeroSection>
+        <HeroSearchForm className={css.form} onSubmit={handleSubmit} />
+      </HeroSection>
+    </PageLayout>
+  );
 };
 
-const { func, string } = PropTypes;
+const { func } = PropTypes;
 
-LandingPageComponent.defaultProps = { filter: '' };
-
-LandingPageComponent.propTypes = { onLocationChanged: func.isRequired, filter: string };
-
-const mapStateToProps = state => ({ filter: state.LocationFilter });
-
-const mapDispatchToProps = function mapDispatchToProps(dispatch) {
-  return { onLocationChanged: v => dispatch(changeLocationFilter(v)) };
+LandingPageComponent.propTypes = {
+  push: func.isRequired,
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(LandingPageComponent);
+export default withRouter(LandingPageComponent);

src/containers/LandingPage/LandingPage.test.js

@@ -4,9 +4,11 @@ import { LandingPageComponent } from './LandingPage';
 import { RoutesProvider } from '../../components';
 import routesConfiguration from '../../routesConfiguration';
 
+const noop = () => null;
+
 describe('LandingPage', () => {
   it('matches snapshot', () => {
-    const tree = renderShallow(<LandingPageComponent onLocationChanged={v => v} />);
+    const tree = renderShallow(<LandingPageComponent onLocationChanged={v => v} push={noop} />);
     expect(tree).toMatchSnapshot();
   });
 });

src/translations/en.json

@@ -1,7 +1,7 @@
 {
   "AuthenticationPage.loginFailed": "The email and password you entered did not match our records. Please double-check and try again.",
   "AuthenticationPage.loginRequiredFor": "You must log in to view the page at",
-  "HeroSearchForm.placeholder": "Location search (soon)",
+  "HeroSearchForm.placeholder": "Search by location, e.g. New York",
   "HeroSearchForm.search": "Search",
   "HeroSection.subTitle": "The largest online community to rent music studios",
   "HeroSection.title": "Book Studiotime anywhere",