<commit_before>/** @jsx React.DOM */

//   FeatureList
//     Feature
//       - name
//       - status
//       - description
//       - button-edit
//       - button-delete
//       - toggle-status
//   FeatureForm

//    StrategyList
//      Strategy
//    StrategyForm

var FeatureList = React.createClass({
    getInitialState: function() {
        return {
            features: []
        };
    },

    componentDidMount: function () {
        reqwest("/features").then(this.setFeatures);
    },

    render: function () {
        var featureNodes = this.state.features.map(function (feature) {
            return (
                <Feature feature={feature} />
            );
        });

        return (
            <div className="mod shadow">
              <div className="inner">
                <div className="bd">
                  {featureNodes}
                </div>
              </div>
            </div>
        );
    },

    setFeatures: function (data) {
        this.setState({features: data.features});
    }
});

var Feature = React.createClass({
    // TODO: validate props?

    handleStatusChange: function (event) {
        console.log(event);
    },

    render: function () {
        return (
            <div>
              <div className="line">
                <div className="unit r-size1of3">
                  <div className="mod">
                    <div className="inner">
                       <div className="bd">
                         <p>{this.props.feature.name}</p>
                         <p className="neutral">{this.props.feature.description}</p>

                       </div>
                    </div>
                  </div>
                </div>

                <div className="unit r-size1of3">
                  <div className="mod">
                    <div className="inner">
                       <div className="bd">
                         <p>
                           <label>
                              {this.props.feature.status}
                              <input
                                 type="checkbox"
                                 checked={this.props.feature.status === 'on'}
                                 className="mll"
                                 onChange={this.handleStatusChange}
                              />
                           </label>
                         </p>
                       </div>
                    </div>
                  </div>
                </div>

                <div className="unit r-size1of3">
                  <div className="mod">
                    <div className="inner">
                       <div className="bd">
                         <button className="pam mtl mll">Edit</button>
                         <button className="pam mtl mll">Delete</button>
                       </div>
                    </div>
                  </div>
                </div>
              </div>

              <hr />
            </div>
        );
    }
});


React.renderComponent(
    FeatureList(null),
    document.getElementById('content')
);<commit_msg>#13 Post enable change to server and update state<commit_after>/** @jsx React.DOM */

//   FeatureList
//     Feature
//       - name
//       - status
//       - description
//       - button-edit
//       - button-delete
//       - toggle-status
//   FeatureForm

//    StrategyList
//      Strategy
//    StrategyForm

var FeatureList = React.createClass({
    getInitialState: function() {
        return {
            features: []
        };
    },

    componentDidMount: function () {
        reqwest('/features').then(this.setFeatures);
    },

    setFeatures: function (data) {
        this.setState({features: data.features});
    },

    updateFeature: function (feature) {
        var newFeatures = this.state.features;
        newFeatures.forEach(function(f){
            if(f.name === feature.name) {
                f = feature;
            }
        });

        reqwest({
            url: 'features/' + feature.name,
            method: 'post',
            type: 'json',
            data: feature
        }).then(function() {
            this.setState({features: newFeatures});
        }.bind(this), function() {
            alert("update failed");
        }.bind(this));
    },

    render: function () {
        var featureNodes = this.state.features.map(function (feature) {
            return (
                <Feature feature={feature} updateFeature={this.updateFeature} />
            );
        }.bind(this));

        return (
            <div className="mod shadow">
              <div className="inner">
                <div className="bd">
                  {featureNodes}
                </div>
              </div>
            </div>
        );
    }
});

var Feature = React.createClass({
    // TODO: validate props?
/*
    handleStatusChange: function (feature, event) {
        console.log(feature);
        console.log(event);
    },
*/
    handleEnableChange: function(event) {
        var feature = this.props.feature;

        feature.enabled = event.target.checked;
        this.props.updateFeature(feature);
    },

    render: function () {
        return (
            <div>
              <div className="line">
                <div className="unit r-size1of3">
                  <div className="mod">
                    <div className="inner">
                       <div className="bd">
                         <p>{this.props.feature.name}</p>
                         <p className="neutral">{this.props.feature.description}</p>

                       </div>
                    </div>
                  </div>
                </div>

                <div className="unit r-size1of3">
                  <div className="mod">
                    <div className="inner">
                       <div className="bd">
                         <p>
                           <label>
                              {this.props.feature.status}
                              <input
                                 type="checkbox"
                                 checked={this.props.feature.enabled}
                                 className="mll"
                                 onChange={this.handleEnableChange}
                              />
                           </label>
                         </p>
                       </div>
                    </div>
                  </div>
                </div>

                <div className="unit r-size1of3">
                  <div className="mod">
                    <div className="inner">
                       <div className="bd">
                         <button className="pam mtl mll">Edit</button>
                         <button className="pam mtl mll">Delete</button>
                       </div>
                    </div>
                  </div>
                </div>
              </div>

              <hr />
            </div>
        );
    }
});


React.renderComponent(
    FeatureList(null),
    document.getElementById('content')
);
{'fraction_non_alphanumeric': 0.12335549582684963, 'fraction_numerical': 0.0019804781440090537, 'mean_word_length': 1.0068123758160659, 'pattern_counts': {'":': 0, '<': 101, '<?xml version=': 0, '>': 101, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 8, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3851053', 'n_tokens_mistral': 1744, 'n_tokens_neox': 1645, 'n_words': 316}