content: import React from 'react'
  import { connect } from 'react-redux'
  import { browserHistory, Link } from 'react-router'
  import {putOrder} from '../reducers/order'
  import store from '../store'
  //import {putProduce} from '../reducers/produce'
  
  // import { putPayment } from '../reducers/payment' /// correct this
  
  const mapStateToProps = (state) => ({
    auth: state.auth, 
    produce: state.produce.selectedProduce,
    farmer: state.farmer.selectedFarmer
  })
  
  const mapDispatchToProps = dispatch => ({
    putOrder
  })
  
  
  export class ViewListing extends React.Component {
    constructor() {
      super()
      this.state = {
        quantity: '1 pound',
        c_review: ''
      }
      this.handleChange = this.handleChange.bind(this)
      this.handleSubmit = this.handleSubmit.bind(this)
    }
  
    handleChange(evt) {
      const type = evt.target.name
      const value = evt.target.value
      this.setState({
        [type]: value
      })
    }
  
    handleSubmit(evt) {
      evt.preventDefault()
      console.log('IN HANDLE SUBMIT')
      // console.log('authprops', this.)
      this.props.putOrder({...this.state, 
        farmer_id: parseInt(this.props.farmer.id), 
        consumer_id: parseInt(this.props.auth.id),
        produce_id: parseInt(this.props.produce.id)
        })
      browserHistory.push('/')
    }
  
    render() {
      console.log('props', this.props)
      return (
        <div className="mapview"> 
          <div className="mapview">
            <h2> More about this farmer: </h2>
            <p> {this.props.farmer.first_name} </p>
            <p> {this.props.farmer.last_name} </p>
            <p> {this.props.farmer.address} </p>
            <p> {this.props.farmer.city} </p>
            <p> {this.props.farmer.state} </p>
            <p> {this.props.farmer.zip} </p>
            <p> {this.props.farmer.phone} </p>
            <p> {this.props.farmer.email} </p>
  
  
            <h2> Produce Offered:  </h2> 
            <h3> {this.props.produce.name} </h3>
            <h2> Quantity Available: </h2>
            <h3> {this.props.produce.quantity} </h3>
          </div>
          <hr/>
          <div className="mapform">
            <img src="/barn.png" height="30" width="30" />
            <img src="/barn.png" height="30" width="30" />
            <img src="/barn.png" height="30" width="30" />
          </div>
          <div>
            <h2>Add Produce Info:</h2>
          </div>
          <div className="col-xs-6">
            <form className="form-horizontal" onSubmit={this.handleSubmit}>
              <div className="form-group">
                <div>
                  <label htmlFor="quantity">Quantity Requested: </label>
                </div>
                <div>
                  <select name="quantity" type="text" className="form-control col-xs-6" onChange={this.handleChange}>
                    <option value="1 pound">1 pound</option>
                    <option value="2 pounds">2 pounds</option>
                    <option value="3 pounds">3 pounds</option>
                    <option value="4 pounds">4 pounds</option>
                    <option value="5 pounds">5 pounds</option>
                    <option value="6 pounds">6 pounds</option>
                    <option value="7 pounds">7 pounds</option>
                    <option value="8 pounds">8 pounds</option>
                    <option value="9 pounds">9 pounds</option>
                    <option value="10 pounds">10 pounds</option>
                  </select>
                </div>
                <div className="form-group">
                <div>
                  <label htmlFor="name">Additional Notes:</label>
                </div>
                <div>
                  <input name="c_review" type="text" className="form-control col-xs-6" onChange={this.handleChange}/>
                </div>
              </div>
              </div>
            <div className="col-xs-12 mapview">
              <button type="submit" className="btn btn-success">Request Produce</button>
            </div>
            </form>
          </div>
        </div>
        )
    }
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(ViewListing)
  
  
  