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

var States = require("../constants/States");
var AppComponent = require("../components/AppComponent");
var BackboneMixin = require("../mixins/BackboneMixin");

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

  mixins: [BackboneMixin],

  propTypes: {
    collection: React.PropTypes.object.isRequired,
    fetchState: React.PropTypes.number,
    router: React.PropTypes.object.isRequired
  },

  getResource: function () {
    return this.props.collection;
  },

  sortCollectionBy: function (comparator) {
    var collection = this.props.collection;
    comparator =
      collection.sortKey === comparator && !collection.sortReverse ?
      "-" + comparator :
      comparator;
    collection.setComparator(comparator);
    collection.sort();
  },

  getAppNodes: function () {
    return (
      this.props.collection.map(function (model) {
        return (
          <AppComponent
            key={model.id}
            model={model}
            router={this.props.router} />
        );
      }, this)
    );
  },

  render: function () {
    var sortKey = this.props.collection.sortKey;

    var loadingClassSet = classNames({
      "hidden": this.props.fetchState !== States.STATE_LOADING
    });

    var noAppsClassSet = classNames({
      "hidden": this.props.collection.length !== 0
    });

    var errorClassSet = classNames({
      "hidden": this.props.fetchState !== States.STATE_ERROR
    });

    var headerClassSet = classNames({
      "clickable": true,
      "dropup": this.props.collection.sortReverse
    });

    var tableClassSet = classNames({
      "table table-fixed": true,
      "table-hover table-selectable":
        this.props.collection.length !== 0 &&
        this.props.fetchState !== States.STATE_LOADING
    });

    return (
      <table className={tableClassSet}>
        <colgroup>
          <col style={{width: "28%"}} />
          <col style={{width: "14%"}} />
          <col style={{width: "14%"}} />
          <col style={{width: "14%"}} />
          <col style={{width: "14%"}} />
          <col style={{width: "16%"}} />
        </colgroup>
        <thead><commit_msg>AppListComponent retrieves apps from store<commit_after>var classNames = require("classnames");
var lazy = require("lazy.js");
var React = require("react/addons");

var States = require("../constants/States");
var AppComponent = require("../components/AppComponent");
var BackboneMixin = require("../mixins/BackboneMixin");

var AppsStore = require("../stores/AppsStore");
var AppsEvents = require("../events/AppsEvents");

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

  propTypes: {
    router: React.PropTypes.object.isRequired
  },

  getInitialState: function () {
    return {
      apps: [],
      fetchState: States.STATE_LOADING
    };
  },

  componentWillMount: function () {
    AppsStore.on(AppsEvents.CHANGE, this.onAppsChange);
    AppsStore.on(AppsEvents.REQUEST_APPS_ERROR, this.onAppsRequestError);
  },

  componentWillUnmount: function () {
    DeploymentStore.removeListener(AppsEvents.CHANGE,
      this.onAppsChange);
    DeploymentStore.removeListener(AppsEvents.REQUEST_APPS_ERROR,
      this.onAppsRequestError);
  },

  onAppsChange: function () {
    this.setState({
      apps: AppsStore.apps,
      fetchState: States.STATE_SUCCESS
    });
  },

  onAppsRequestError: function () {
    this.setState({
      fetchState: States.STATE_ERROR
    });
  },

  sortCollectionBy: function (comparator) {
    var collection = this.props.collection;
    comparator =
      collection.sortKey === comparator && !collection.sortReverse ?
      "-" + comparator :
      comparator;
    collection.setComparator(comparator);
    collection.sort();
  },

  getAppNodes: function () {
    var state = this.state;

    return lazy(state.apps)
      .map(function (app) {
        return (
          <AppComponent key={app.id} model={app} router={this.props.router} />
        );
      })
      .value();
  },

  render: function () {
    var state = this.state;
    var sortKey = this.props.collection.sortKey;

    var loadingClassSet = classNames({
      "hidden": state.fetchState !== States.STATE_LOADING
    });

    var noAppsClassSet = classNames({
      "hidden": state.apps.length !== 0
    });

    var errorClassSet = classNames({
      "hidden": state.fetchState !== States.STATE_ERROR
    });

    var headerClassSet = classNames({
      "clickable": true,
      "dropup": this.props.collection.sortReverse
    });

    var tableClassSet = classNames({
      "table table-fixed": true,
      "table-hover table-selectable":
        state.apps.length !== 0 &&
        state.fetchState !== States.STATE_LOADING
    });

    return (
      <table className={tableClassSet}>
        <colgroup>
          <col style={{width: "28%"}} />
          <col style={{width: "14%"}} />
          <col style={{width: "14%"}} />
          <col style={{width: "14%"}} />
          <col style={{width: "14%"}} />
          <col style={{width: "16%"}} />
        </colgroup>
        <thead>
{'fraction_non_alphanumeric': 0.14957430340557276, 'fraction_numerical': 0.005417956656346749, 'mean_word_length': 2.781272860277981, 'pattern_counts': {'":': 14, '<': 25, '<?xml version=': 0, '>': 25, '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': '6424322', 'n_tokens_mistral': 1580, 'n_tokens_neox': 1538, 'n_words': 287}