<commit_before>var React = require("react/addons");

var InfoActions = require("../../actions/InfoActions");
var InfoEvents = require("../../events/InfoEvents");
var InfoStore = require("../../stores/InfoStore");
var ModalComponent = require("../ModalComponent");
var ObjectDlComponent = require("../ObjectDlComponent");
var UnspecifiedNodeComponent =
  require("../../components/UnspecifiedNodeComponent");

var config = require("../../config/config");

var AboutModalComponent = React.createClass({
  displayName: "AboutModalComponent",

  propTypes: {
    onDestroy: React.PropTypes.func.isRequired
  },

  getInitialState: function () {
    return {
      info: InfoStore.info
    };
  },

  componentDidMount: function () {
    InfoActions.requestInfo();
  },

  componentWillMount: function () {
    InfoStore.on(InfoEvents.CHANGE, this.onInfoChange);
  },

  componentWillUnmount: function () {
    InfoStore.removeListener(InfoEvents.CHANGE, this.onInfoChange);
  },

  destroy: function () {
    // This will also call `this.props.onDestroy` since it is passed as the
    // callback for the modal's `onDestroy` prop.
    this.refs.modalComponent.destroy();
  },

  getInfo: function (attr) {
    return this.state.info[attr] ||
      <UnspecifiedNodeComponent tag="span" />;
  },

  onInfoChange: function () {
    this.setState({
      info: InfoStore.info
    });
  },

  render: function () {
    var marathonConfig = this.state.info.marathon_config;
    var zookeeperConfig = this.state.info.zookeeper_config;
    var logoPath = config.rootUrl + "img/marathon-logo.png";
    // @todo: #2815 remove extra div
    return (
      <div>
        <ModalComponent
            onDestroy={this.props.onDestroy}
            ref="modalComponent"
            size="lg">
          <div className="modal-header modal-header-blend">
            <button type="button" className="close"
              aria-hidden="true" onClick={this.destroy}>&times;</button>
            <h3 className="modal-title" title={`UI Version ${config.version}`}>
              <img width="160" height="27" alt="Marathon" src={logoPath} />
              <small className="text-muted" style={{"marginLeft": "1em"}}>
                Version {this.getInfo("version")}
              </small>
            </h3>
          </div>
          <div className="modal-body">
            <dl className="dl-horizontal dl-horizontal-lg">
              <dt title="frameworkId">Framework Id</dt>
              <dd>
                {this.getInfo("frameworkId")}
              </dd>
              <dt title="leader">Leader</dt>
              <dd>
                {this.getInfo("leader")}
              </dd>
            </dl>
            <h5 title="marathon_config">Marathon Config</h5>
            <ObjectDlComponent object={marathonConfig} />
            <h5 title="zookeeper_config">ZooKeeper Config</h5>
            <ObjectDlComponent object={zookeeperConfig} />
          </div>
        </ModalComponent>
      </div>
    );
  }
});

module.exports = AboutModalComponent;
<commit_msg>Refactor the about modal destroy handling<commit_after>var React = require("react/addons");

var InfoActions = require("../../actions/InfoActions");
var InfoEvents = require("../../events/InfoEvents");
var InfoStore = require("../../stores/InfoStore");
var ModalComponent = require("../ModalComponent");
var ObjectDlComponent = require("../ObjectDlComponent");
var UnspecifiedNodeComponent =
  require("../../components/UnspecifiedNodeComponent");

var config = require("../../config/config");

var AboutModalComponent = React.createClass({
  displayName: "AboutModalComponent",

  propTypes: {
    onDestroy: React.PropTypes.func.isRequired
  },

  getInitialState: function () {
    return {
      info: InfoStore.info
    };
  },

  componentDidMount: function () {
    InfoActions.requestInfo();
  },

  componentWillMount: function () {
    InfoStore.on(InfoEvents.CHANGE, this.onInfoChange);
  },

  componentWillUnmount: function () {
    InfoStore.removeListener(InfoEvents.CHANGE, this.onInfoChange);
  },

  destroy: function () {
    this.props.onDestroy();
  },

  getInfo: function (attr) {
    return this.state.info[attr] ||
      <UnspecifiedNodeComponent tag="span" />;
  },

  onInfoChange: function () {
    this.setState({
      info: InfoStore.info
    });
  },

  render: function () {
    var marathonConfig = this.state.info.marathon_config;
    var zookeeperConfig = this.state.info.zookeeper_config;
    var logoPath = config.rootUrl + "img/marathon-logo.png";
    return (
      <ModalComponent
          onDestroy={this.props.onDestroy}
          size="lg">
        <div className="modal-header modal-header-blend">
          <button type="button" className="close"
            aria-hidden="true" onClick={this.destroy}>&times;</button>
          <h3 className="modal-title" title={`UI Version ${config.version}`}>
            <img width="160" height="27" alt="Marathon" src={logoPath} />
            <small className="text-muted" style={{"marginLeft": "1em"}}>
              Version {this.getInfo("version")}
            </small>
          </h3>
        </div>
        <div className="modal-body">
          <dl className="dl-horizontal dl-horizontal-lg">
            <dt title="frameworkId">Framework Id</dt>
            <dd>
              {this.getInfo("frameworkId")}
            </dd>
            <dt title="leader">Leader</dt>
            <dd>
              {this.getInfo("leader")}
            </dd>
          </dl>
          <h5 title="marathon_config">Marathon Config</h5>
          <ObjectDlComponent object={marathonConfig} />
          <h5 title="zookeeper_config">ZooKeeper Config</h5>
          <ObjectDlComponent object={zookeeperConfig} />
        </div>
      </ModalComponent>
    );
  }
});

module.exports = AboutModalComponent;

{'fraction_non_alphanumeric': 0.1505413301254511, 'fraction_numerical': 0.004811823337343186, 'mean_word_length': 2.5948116121062386, 'pattern_counts': {'":': 2, '<': 65, '<?xml version=': 0, '>': 65, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5621762', 'n_tokens_mistral': 1703, 'n_tokens_neox': 1671, 'n_words': 304}