content: import React, { Component } from 'react';
  
  import { connect } from 'react-redux';
  import { bindActionCreators } from 'redux';
  import { fetchDealDetails } from '../actions/index';
  
  class DealDetails extends Component {
  
    componentWillMount() {
      console.log('call action to get deal details for id ' + this.props.id);
      this.props.fetchDealDetails(this.props.id);
    }
  
    render() {
      return (
        <div className="deal-details">
          <h2>{ this.props.dealDetails.dealDetails.title }</h2>
          <div className="row">
            <div className="col-xs-7 col-sm-8 col-md-9">
              <div className="clearfix">
                <div className="pull-xs-left deal-author">Posted by <strong>{this.props.dealDetails.dealDetails.author}</strong></div>
                <div className="pull-xs-right deal-category">{this.props.dealDetails.dealDetails.category}</div>
              </div>
              <div className="deal-link">{ this.props.dealDetails.dealDetails.storeName } - { this.props.dealDetails.dealDetails.storeLink }</div>
              <div className="deal-summary">{ this.props.dealDetails.dealDetails.text}</div>
            </div>
            <div className="col-xs-5 col-sm-4 col-md-3">
              <img src={ this.props.dealDetails.dealDetails.picture } />
            </div>
          </div>
        </div>
      );
    }
  }
  
  function mapStateToProps(state) {
    return {
      dealDetails: state.dealDetails
    };
  }
  
  export default connect(mapStateToProps, { fetchDealDetails })(DealDetails);
  