diff --git a/src/containers/LandingPage/LandingPage.css b/src/containers/LandingPage/LandingPage.css new file mode 100644 index 00000000..b2e54dc8 --- /dev/null +++ b/src/containers/LandingPage/LandingPage.css @@ -0,0 +1,3 @@ +.form { + width: 100%; +} diff --git a/src/containers/LandingPage/LandingPage.js b/src/containers/LandingPage/LandingPage.js index c08581dd..8a13ec55 100644 --- a/src/containers/LandingPage/LandingPage.js +++ b/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 () => ( - - - - - -) +const createSubmitHandler = onLocationChanged => formData => { + onLocationChanged(formData.location); +}; + +export const LandingPageComponent = props => { + const handleSubmit = createSubmitHandler(props.onLocationChanged); + const componentOrRedirect = props.LocationFilter && props.LocationFilter.length > 0 + ? + : ( + + + + + + ); + + 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) diff --git a/src/containers/LandingPage/LandingPage.test.js b/src/containers/LandingPage/LandingPage.test.js index eb61d60b..4614d5b8 100644 --- a/src/containers/LandingPage/LandingPage.test.js +++ b/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', () => { ( - + v} /> ), diff --git a/src/containers/LandingPage/__snapshots__/LandingPage.test.js.snap b/src/containers/LandingPage/__snapshots__/LandingPage.test.js.snap index 2e55d7ee..1be63bdb 100644 --- a/src/containers/LandingPage/__snapshots__/LandingPage.test.js.snap +++ b/src/containers/LandingPage/__snapshots__/LandingPage.test.js.snap @@ -119,14 +119,51 @@ exports[`LandingPage matches snapshot 1`] = `

Landing page

- - - Show nice studios! (default) - - +
+
+
+
+ + Book Studiotime anywhere + +
+
+ + The largest online community to rent music studios + +
+
+
+
+ + +
+
+
+
`; diff --git a/src/ducks/LocationFilter.ducks.js b/src/ducks/LocationFilter.ducks.js new file mode 100644 index 00000000..78f259ec --- /dev/null +++ b/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 }); diff --git a/src/ducks/LocationFilter.test.js b/src/ducks/LocationFilter.test.js new file mode 100644 index 00000000..036e1ec1 --- /dev/null +++ b/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); + }); + }); +}); diff --git a/src/ducks/index.js b/src/ducks/index.js index 6d774136..7a760a4d 100644 --- a/src/ducks/index.js +++ b/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 };