{"size": 1717, "ext": "js", "max_stars_repo_path": "src/js/components/todo/KeptTodo.js", "max_stars_repo_name": "lionelB/kept", "max_stars_repo_stars_event_min_datetime": "2015-01-09T15:38:30.000Z", "max_stars_repo_stars_event_max_datetime": "2021-11-30T12:49:19.000Z", "max_issues_repo_path": "src/js/components/todo/KeptTodo.js", "max_issues_repo_name": "davgit/kept", "max_issues_repo_issues_event_min_datetime": "2015-01-06T19:49:29.000Z", "max_issues_repo_issues_event_max_datetime": "2016-08-25T11:48:52.000Z", "max_forks_repo_path": "src/js/components/todo/KeptTodo.js", "max_forks_repo_name": "davgit/kept", "max_forks_repo_forks_event_min_datetime": "2015-02-03T11:39:24.000Z", "max_forks_repo_forks_event_max_datetime": "2021-11-30T12:52:20.000Z"}
{"max_stars_count": 84, "max_issues_count": 6, "max_forks_count": 24, "avg_line_length": 24.884057971, "max_line_length": 94, "alphanum_fraction": 0.6010483401}
/** @jsx React.DOM */

"use strict";

var React = require("react");
var ProgressBar = require("react-bootstrap").ProgressBar;
var KeptTodoTask = require("./KeptTodoTask");

var KeptTodo = React.createClass({
  getInitialState: function() {
    return {tasks: this.props.data.tasks || []};
  },

  // this is needed to map newly received props to current state
  componentWillReceiveProps: function(props) {
    this.setState({tasks: props.data.tasks});
  },

  clearCompleted: function() {
    this.updateTasks(this.state.tasks.filter(function(task) {
      return !task.done;
    }));
  },

  toggle: function(key) {
    this.updateTasks(this.state.tasks.map(function(task, i) {
      if (i !== key)
        return task;
      task.done = !task.done;
      return task;
    }));
  },

  updateTasks: function(tasks) {
    this.setState({tasks: tasks});
    this.props.update({
      type: "todo",
      id: this.props.data.id,
      title: this.props.data.title,
      tasks: tasks
    });
  },

  getProgress: function() {
    var done = this.state.tasks.filter(function(task) {
      return !!task.done;
    }).length;
    if (!this.state.tasks.length)
      return 0;
    return Math.round(done * 100 / this.state.tasks.length);
  },

  render: function() {
    return (
      <div>
        <ProgressBar now={this.getProgress()} label="%(percent)s%" />
        <ul className="list-group">{
          this.state.tasks.map(function(task, key) {
            return <KeptTodoTask key={key} data={task} toggle={this.toggle} />;
          }.bind(this))
        }</ul>
        <p><a href="#" className="clear" onClick={this.clearCompleted}>Clear completed</a></p>
      </div>
    );
  }
});

module.exports = KeptTodo;
