<commit_before><!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="../lib/react.js" charset="utf-8"></script>
    <script src="../lib/JSXTransformer.js" charset="utf-8"></script>
    <link rel="stylesheet" href="../lib/bootstrap.css" charset="utf-8">
    <title>ToDo-APP</title>
  </head>
  <body>
      <div class="row">
        <div class="col-md-offset-4 col-md-4">
          <center>
            <h3>
              <span class="label label-info">Todo App</span>
            </h3>
          </center>
          <div id="content"></div>
        </div>
      </div>

    <script type="text/jsx">
    var ToDoApp = React.createClass({
      getInitialState: function () {
        return {data: []};
      },

      handleUserInput: function (item) {
        var newItems = this.state.data.concat({'name': item, 'done': false});
        this.setState({data: newItems});
      },

      render: function() {
        return (
          <div>
            <InputBar onUserInput={this.handleUserInput} />
            <hr />
            <ToDoSection data={this.state.data} />
            <hr />
            <DoneSection data={this.state.data} />
          </div>
        );
      }
    });

    var InputBar = React.createClass({
      handleSubmit: function (e) {
        e.preventDefault();
        this.props.onUserInput(
          this.refs.newItem.getDOMNode().value
        );
      },

      render: function() {
        return (
          <form onSubmit={this.handleSubmit}>
            <div className="form-group">
              <input type="text" className="form-control"
                     id="newItem" ref="newItem"
                     placeholder="New Item" />
            </div>
          </form>
        );
      }
    });

    var ToDoSection = React.createClass({
      render: function() {
        var todos = [];
        this.props.data.forEach(function (todo) {
          if (todo.done == false) {
            todos.push(<ToDoItem name={todo.name} />);
          }
        });

        return (
          <div>
            <div>
              <h4>
                <span className="label label-primary">ToDo</span>
              </h4>
            </div>
            {todos}
          </div>
        );
      }
    });

    var ToDoItem = React.createClass({
      render: function() {
        return (
          <div className="input-group has-warning">
            <span className="input-group-addon">
              <input type="checkbox" />
            </span>
            <input type="text" className="form-control" value={this.props.name} />
          </div>
        );
      }
    });

    var DoneSection = React.createClass({
      render: function() {
        var dones = [];
        this.props.data.forEach(function (todo) {
          if (todo.done == true) {
            return (<ToDoItem name={todo.name} />);
          }
        });

        return (
          <div>
            <div>
              <h4>
                <span className="label label-success">Done</span>
              </h4>
            </div>
            {dones}
          </div>
        );
      }
    });

    var DoneItem = React.createClass({
      render: function() {
        return (
          <div className="input-group has-success">
            <span className="input-group-addon">√</span>
            <input type="text" className="form-control" value={this.props.name} readOnly />
          </div>
        );
      }
    });

    React.render(<ToDoApp />, document.getElementById('content'));
    </script><commit_msg>support to mark item as done<commit_after><!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="../lib/react.js" charset="utf-8"></script>
    <script src="../lib/JSXTransformer.js" charset="utf-8"></script>
    <link rel="stylesheet" href="../lib/bootstrap.css" charset="utf-8">
    <title>ToDo-APP</title>
  </head>
  <body>
      <div class="row">
        <div class="col-md-offset-4 col-md-4">
          <center>
            <h3>
              <span class="label label-info">Todo App</span>
            </h3>
          </center>
          <div id="content"></div>
        </div>
      </div>

    <script type="text/jsx">
    var ToDoApp = React.createClass({
      getInitialState: function () {
        return {data: []};
      },

      handleUserInput: function (item) {
        var newItems = this.state.data.concat({'name': item, 'done': false});
        this.setState({data: newItems});
      },

      handleDone: function (item) {
        this.state.data.forEach(function (todo) {
          if (todo.name == item.name) {
            todo.done = true
          }
        });
        this.setState({data: this.state.data});
      },

      render: function() {
        return (
          <div>
            <InputBar onUserInput={this.handleUserInput} />
            <hr />
            <ToDoSection data={this.state.data} onDone={this.handleDone}/>
            <hr />
            <DoneSection data={this.state.data} />
          </div>
        );
      }
    });

    var InputBar = React.createClass({
      handleSubmit: function (e) {
        e.preventDefault();
        this.props.onUserInput(
          this.refs.newItem.getDOMNode().value
        );
      },

      render: function() {
        return (
          <form onSubmit={this.handleSubmit}>
            <div className="form-group">
              <input type="text" className="form-control"
                     id="newItem" ref="newItem"
                     placeholder="New Item" />
            </div>
          </form>
        );
      }
    });

    var ToDoSection = React.createClass({
      handleDone: function (item) {
        this.props.onDone(item);
      },

      render: function() {
        var todos = [];
        {
          this.props.data.forEach(function (todo) {
            if (todo.done == false) {
              todos.push(<ToDoItem item={todo} onDone={this.handleDone} key={todo.name} />);
            }
          }, this)
        };

        return (
          <div>
            <div>
              <h4>
                <span className="label label-primary">ToDo</span>
              </h4>
            </div>
            {todos}
          </div>
        );
      }
    });

    var ToDoItem = React.createClass({
      handleChange: function () {
        this.props.onDone(this.props.item);
      },

      render: function() {
        return (
          <div className="input-group has-warning">
            <span className="input-group-addon">
              <input type="checkbox" onChange={this.handleChange} />
            </span>
            <input type="text" className="form-control" value={this.props.item.name} />
          </div>
        );
      }
    });

    var DoneSection = React.createClass({
      render: function() {
        var dones = [];
        this.props.data.forEach(function (todo) {
          if (todo.done == true) {
            dones.push(<DoneItem item={todo} key={todo.name} />);
          }
        });

        return (
          <div>
            <div>
              <h4>
                <span className="label label-success">Done</span>
              </h4>
            </div>
            {dones}
          </div>
        );
      }
    });

    var DoneItem = React.createClass({
      render: function() {
        return (
          <div className="input-group has-success">
            <span className="input-group-addon">√</span>
            <input type="text" className="form-control" value={this.props.item.name} readOnly />
          </div>
        );
      }
    });

    React.render(<ToDoApp />, document.getElementById('content'));
    </script>
{'fraction_non_alphanumeric': 0.15783289817232377, 'fraction_numerical': 0.003133159268929504, 'mean_word_length': 1.492192582953806, 'pattern_counts': {'":': 0, '<': 141, '<?xml version=': 0, '>': 141, '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': '1028325', 'n_tokens_mistral': 2277, 'n_tokens_neox': 2232, 'n_words': 396}