LandingPage with HeroSection. Query is handled through redux.

src/containers/LandingPage/LandingPage.css

@@ -0,0 +1,3 @@
+.form {
+    width: 100%;
+}

src/containers/LandingPage/LandingPage.js

@@ -1,14 +1,46 @@
-import React from 'react';
-import { FormattedMessage } from 'react-intl';
-import { NamedLink, PageLayout } from '../../components';
+import React, { PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { HeroSection, NamedRedirect, PageLayout } from '../../components';
+import { HeroSearchForm } from '../../containers';
+import { changeLocationFilter } from '../../ducks/LocationFilter.ducks';
+import css from './LandingPage.css';
 
-export default () => (
-  <PageLayout title="Landing page">
-    <NamedLink name="SearchPage" query={{ location: 'helsinki' }}>
-      <FormattedMessage
-        id="landingpage.examplelink"
-        defaultMessage="Show nice studios! (default)"
-      />
-    </NamedLink>
-  </PageLayout>
-)
+const createSubmitHandler = onLocationChanged => formData => {
+  onLocationChanged(formData.location);
+};
+
+export const LandingPageComponent = props => {
+  const handleSubmit = createSubmitHandler(props.onLocationChanged);
+  const componentOrRedirect = props.LocationFilter && props.LocationFilter.length > 0
+    ? <NamedRedirect name="SearchPage" query={{ location: props.LocationFilter }} />
+    : (
+      <PageLayout title="Landing page">
+        <HeroSection>
+          <HeroSearchForm className={css.form} onSubmit={handleSubmit} />
+        </HeroSection>
+      </PageLayout>
+    );
+
+  return componentOrRedirect;
+};
+
+const { func, string } = PropTypes;
+
+LandingPageComponent.defaultProps = { LocationFilter: '' };
+
+LandingPageComponent.propTypes = { onLocationChanged: func.isRequired, LocationFilter: string };
+
+/**
+ * Container functions.
+ * Since we add this to global store state with combineReducers, this will only get partial state
+ * which is page specific.
+ */
+const mapStateToProps = function mapStateToProps(state) {
+  return state;
+};
+
+const mapDispatchToProps = function mapDispatchToProps(dispatch) {
+  return { onLocationChanged: v => dispatch(changeLocationFilter(v)) };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(LandingPageComponent)

src/containers/LandingPage/LandingPage.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import { TestProvider } from '../../util/test-helpers';
-import LandingPage from './LandingPage';
+import { LandingPageComponent } from './LandingPage';
 import { RoutesProvider } from '../../components';
 import routesConfiguration from '../../routesConfiguration';
 
@@ -11,7 +11,7 @@ describe('LandingPage', () => {
       (
         <TestProvider>
           <RoutesProvider routes={routesConfiguration}>
-            <LandingPage />
+            <LandingPageComponent onLocationChanged={v => v} />
           </RoutesProvider>
         </TestProvider>
       ),

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

@@ -119,14 +119,51 @@ exports[`LandingPage matches snapshot 1`] = `
   <h1>
     Landing page
   </h1>
-  <a
-    className=""
-    href="/s?location=helsinki"
-    onClick={[Function]}
-    style={Object {}}>
-    <span>
-      Show nice studios! (default)
-    </span>
-  </a>
+  <section
+    className={undefined}>
+    <div
+      className={undefined}>
+      <div
+        className={undefined}>
+        <div
+          className={undefined}>
+          <span>
+            Book Studiotime anywhere
+          </span>
+        </div>
+        <div
+          className={undefined}>
+          <span>
+            The largest online community to rent music studios
+          </span>
+        </div>
+      </div>
+      <div
+        className={undefined}>
+        <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="" />
+          <button
+            className={undefined}
+            disabled={true}
+            type="submit">
+            <span>
+              Search
+            </span>
+          </button>
+        </form>
+      </div>
+    </div>
+  </section>
 </div>
 `;

src/ducks/LocationFilter.ducks.js

@@ -0,0 +1,24 @@
+/**
+ * This file contains Action types, Action creators, and reducer of global
+ * LocationFilter. Global actions can be used in multiple pages.
+ * We are following Ducks module proposition:
+ * https://github.com/erikras/ducks-modular-redux
+ */
+
+// Actions
+export const CHANGE_LOCATION = 'app/LocationFilter/CHANGE_LOCATION';
+
+// Reducer
+export default function reducer(state = '', action = {}) {
+  const { type, payload } = action;
+  switch (type) {
+    case CHANGE_LOCATION: {
+      return payload;
+    }
+    default:
+      return state;
+  }
+}
+
+// Action types
+export const changeLocationFilter = location => ({ type: CHANGE_LOCATION, payload: location });

src/ducks/LocationFilter.test.js

@@ -0,0 +1,27 @@
+import reducer, { CHANGE_LOCATION, changeLocationFilter } from './LocationFilter.ducks';
+
+describe('LocationFilterDucks', () => {
+  describe('actions', () => {
+    it('should create an action to change the filter', () => {
+      const expectedAction = { type: CHANGE_LOCATION, payload: 'helsinki' };
+      expect(changeLocationFilter('helsinki')).toEqual(expectedAction);
+    });
+  });
+
+  describe('reducer', () => {
+    it('should return the initial state', () => {
+      const initial = reducer(undefined, {});
+      expect(initial).toEqual('');
+    });
+
+    it('should handle CHANGE_LOCATION', () => {
+      const addFilter1 = changeLocationFilter('Helsinki');
+      const addFilter2 = changeLocationFilter('Espoo');
+      const reduced = reducer('', addFilter1);
+
+      const reducedWithInitialContent = reducer(addFilter1.payload, addFilter2);
+      expect(reduced).toEqual(addFilter1.payload);
+      expect(reducedWithInitialContent).toEqual(addFilter2.payload);
+    });
+  });
+});

src/ducks/index.js

@@ -6,5 +6,6 @@
 
 import { reducer as formReducer } from 'redux-form';
 import FlashNotification from './FlashNotification.ducks';
+import LocationFilter from './LocationFilter.ducks';
 
-export { formReducer as form, FlashNotification };
+export { formReducer as form, FlashNotification, LocationFilter };