import React from 'react'
import { connect } from 'react-redux'
import { Link } from 'react-router'
import { setSearchTerm } from './actionCreators'
const { string, func } = React.PropTypes

const Landing = React.createClass({
  propTypes: {
    searchTerm: string,
    dispatch: func
  },
  handleSearchTermChange (event) {
    // dispatch is available through connect
    this.props.dispatch(setSearchTerm(event.target.value))
  },
  render () {
    return (
      <div className='landing'>
        <h1>bizzy bear's video emporium</h1>
        <input onChange={this.handleSearchTermChange} value={this.props.searchTerm} type='text' placeholder='search' />
        <Link to='/search'>or browse all</Link>
      </div>
    )
  }
})

// take in entire redux store, return just the particular piece of state that this component cares about.
const mapStateToProps = (state) => {
  return {
    searchTerm: state.searchTerm
  }
}
// landing cares about searchTerm, nothing else from redux. pass in the desired redux state as props to landing.
// landing is now a redux-connected component. connect creates a new function which we immediately invoke (IIFE) on Landing.
export default connect(mapStateToProps)(Landing)

@@ -162,16 +162,24 @@
 ng, func
+, object
  %7D = Rea
@@ -228,16 +228,58 @@
 Class(%7B%0A
+  contextTypes: %7B%0A    router: object%0A  %7D,%0A
   propTy
@@ -477,16 +477,255 @@
 ))%0A  %7D,%0A
+  handleSearchSubmit (event) %7B%0A    // a form will attempt to navigate the page if you do not preventDefault%0A    event.preventDefault()%0A    // programmatically navigate with react router%0A    this.context.router.transitionTo('/search')%0A  %7D,%0A
   render
@@ -820,16 +820,68 @@
 um%3C/h1%3E%0A
+        %3Cform onSubmit=%7Bthis.handleSearchSubmit%7D%3E%0A  
         
@@ -992,16 +992,32 @@
 rch' /%3E%0A
+        %3C/form%3E%0A
         

Add search submit event.