import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux';
import { Field, reduxForm } from 'redux-form';
import { bookOffice } from '../actions';

class BookingForm extends Component {
  constructor(props) {
    super(props);
    this.state = { id:'' };
  }
  componentDidMount() {
    const { id } = this.props.match.params;
    this.setState({ id });
    console.log('BookingForm component mounted - id:', id);
    this.props.change('office_id', id);
  }
  onSubmit(fields) {
    console.log('office booking form submit - fields', fields);
    this.props.bookOffice(fields, (data) => {
      console.log('callback from bookOffice - data:', data);
      //data: {error: null, docs: Array(1), info: {…}}
      //this.props.history.push('/');
    });
  }
  renderInputField(field) {
    const { meta:{ touched, error } } = field;
    const className = `form-group ${ touched && error ? 'has-danger' : '' }`;
    return (
      <div className={className}>
        <label>{ field.label }</label>
        <input 
          { ...field.input }
          className="form-control"
          type="text"
        />
        <div className="text-help">
          { touched ? error : '' }
        </div>
      </div>
    );
  }
  render() {
    const { handleSubmit } = this.props;
    return (
      <div className="col-md-6">
        <br/>
        <h4>Book Office</h4>
        <hr/>
        <form onSubmit={ handleSubmit(this.onSubmit.bind(this)) }>
          <Field 
            name="office_id"
            label="Office ID"
            component={ this.renderInputField }
          />
          <Field 
            name="start_time"
            label="Start Date"
            component={ this.renderInputField }
          />
          <Field 
            name="end_time"
            label="End Date"
            component={ this.renderInputField }
          />
          <Field 
            name="price"
            label="Price"
            component={ this.renderInputField }
          />
          <button type="submit" className="btn btn-primary">Book Office</button>
        </form>
        <br/>
      </div>
    );
  }
}

function validate(values) {
  const errors = {};
  if (!values.start_time) {
    errors.start_time = 'Enter start time';
  }
  if (!values.end_time) {
    errors.end_time = 'Enter end time';
  }
  return errors;
}

export default reduxForm({ 
  form:'bookingForm',
  validate: validate
})(
  connect(null, { bookOffice })(BookingForm)
);

@@ -163,16 +163,33 @@
 import %7B
+ getOfficeDetail,
  bookOff
@@ -212,16 +212,60 @@
 ctions';
+%0Aimport %7B bindActionCreators %7D from 'redux';
 %0A%0Aclass 
@@ -564,16 +564,52 @@
 ', id);%0A
+    this.props.getOfficeDetail(id);%0A
   %7D%0A  on
@@ -2484,16 +2484,131 @@
 ors;%0A%7D%0A%0A
+function mapDispatchToProps(dispatch) %7B%0A  return bindActionCreators(%7B getOfficeDetail, bookOffice %7D, dispatch);%0A%7D%0A%0A
 export d
@@ -2694,22 +2694,26 @@
 ll, 
-%7B bookOffice %7D
+mapDispatchToProps
 )(Bo

use mapDispatchToProps to bring getOfficeDetail action into office_booking component