content: import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import { bindActionCreators } from 'redux';
  import { getCharacterDetails, clearCharacterDetails } from '../../actions/index';
  
  import DescriptionBlock from './descriptionBlock';
  import RelatedCharacterPanel from './relatedCharacterPanel';
  import CommentBox from './commentBox';
  import CommentPanel from './commentPanel';
  
  export class CharacterDetails extends Component {
    constructor(props) {
      super(props);
      this.state = {
        height: 500
      };
    }
  
    componentWillMount() {
      const body = document.body;
      const html = document.documentElement;
      this.setState({
        height: Math.max(body.offsetHeight,
                html.clientHeight, html.offsetHeight) - 70
      });
      this.props.clearCharacterDetails();
      this.props.getCharacterDetails(this.props.params.characterId);
    }
  
    render() {
      if (this.props.characterDetails) {
        const character = this.props.characterDetails;
        return (
          <div className="intro-header" style={{ minHeight: `${this.state.height}px` }}>
            <div className="buffer" />
            <div className="container intro-panel">
              <div className="row">
                <div className="col-lg-12 text-center">
                  <div className="intro-message">
                    <h1 className="sub-panel-title">{character.name}</h1>
                    <img alt={character.name} className="character-portrait" src={character.image} />
                  </div>
                </div>
              </div>
              <DescriptionBlock characterDetails={character} />
            </div>
  
            <RelatedCharacterPanel character={character} />
  
            <CommentPanel character={character} />
  
            <CommentBox character={character} />
  
          </div>
        );
      } else {
        return (
          <div className="intro-header" style={{ minHeight: `${this.state.height}px` }}>
            <div className="buffer" />
            <div className="container intro-panel">
              <div className="row">
                <div className="col-lg-12 text-center">
                  <div className="intro-message">
                    <h1>Loading...</h1>
                  </div>
                </div>
              </div>
              <div className="row">
                <div className="col-lg-12 text-center" />
              </div>
            </div>
          </div>
        );
      }
    }
  }
  
  /* istanbul ignore next */
  function mapStateToProps({ characterInfo, characterDetails, characterClicked }) {
    return {
      characterInfo,
      characterDetails,
      characterClicked
    };
  }
  
  /* istanbul ignore next */
  function mapDispatchToProps(dispatch) {
    return bindActionCreators({ getCharacterDetails, clearCharacterDetails }, dispatch);
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(CharacterDetails);
  