<commit_before>//
//- omniscient ToDo app
//- author:  @djidja8
//- version: v0.1
//
'use strict'

var React     = require('react'),
    immstruct = require('immstruct'),
    component = require('omniscient')

var todostore = immstruct({
            completed: 2,
             items: [
                      { checked: false, text: 'Buy milk' },
                      { checked: true,  text: 'Make example application with JSX' },
                      { checked: false, text: 'Compile using the --harmony flag' },
                      { checked: false, text: 'Check checkboxes' },
                      { checked: true,  text: 'Update example to use React 0.12' }
                    ]
    })

var checkedMixin = {
  onChecked() {
    this.props.todo.update('checked', state => !state)
  }
}

var removedMixin = {
  onRemoved(key) {
    // this.props.todolist.update(items => items.filter((item, index) => index === this.key ))
  }
}
var Todo = component([checkedMixin, removedMixin], function() {
    return (
       <li className={this.props.todo.get('checked') && 'completed'}>
        <div className="view">
          <input className="toggle" type="checkbox" onChange={this.onChecked} checked={this.props.todo.get('checked')}/>
          <label> {this.props.todo.get('text')} </label>
          <button className="destroy" onClick={this.onRemoved}/>
        </div>
        <input className="edit"/>
      </li>
    )}
)

var TodoList = component(function() {
    return (
        <section id="main">
          <input id="toggle-all" type="checkbox"/>
          <ul id="todo-list">
            { this.props.todolist.map((item, index) => <Todo key={index} todo={item}/>).toArray() }
          </ul>
        </section>
    )}
)

var addedMixin = {
  onAdded(event) {
    if (event.key === 'Enter') {
      event.preventDefault()

      var val = this.refs.text.getDOMNode().value.trim()
      if (val) {
        this.props.todolist.update(items => items.push(immstruct({checked: false, text: val}).current) )
        this.refs.text.getDOMNode().value = ''
      }
    }
  }
}
var clearCompletedMixin = {
  clearCompleted() {
    if(this.props.completed > 0) {
      //todo ?
      this.props.todolist.update(items => items.slice(immstruct({checked: false, text: val}).current) )
    }
  }
}
var Main = component([addedMixin, clearCompletedMixin], function() {
    console.log(this.props.todolist.deref())
    return (
      <div id="todoapp">
        <header id="header">
          <h1> Todos </h1>
          <input id="new-todo" placeholder='What needs to be done?' autoFocus={true} onKeyDown={this.onAdded} ref="text"/>
        </header>

        { <TodoList todolist={this.props.todolist}/> }

        <footer id="footer">
          <span id="todo-count">
            <strong> ({this.props.todolist.size - this.props.completed}) items left </strong>
          </span>
          <ul id="filters">
            <li className="selected"><a href="#/"> All </a></li>
            <li><a href="#/active"> Active </a></li>
            <li><a href="#/completed"> Completed </a></li>
          </ul>
          <button id="clear-completed" onClick={this.clearCompleted}> Clear completed </button>
        </footer>
      </div>
    )
})

function render() {
  React.render(<Main todolist={todostore.cursor(['items'])} completed={todostore.cursor('completed')}/>, document.body);
}
todostore.on('swap', render)
render()<commit_msg>total completed calculated value works<commit_after>//
//- app:     Omniscient-ToDo
//- author:  @djidja8
//- version: v0.1
//
'use strict'

var React     = require('react'),
    immstruct = require('immstruct'),
    component = require('omniscient')

var todostore = immstruct({
             items: [
                      { checked: false, text: 'Buy milk' },
                      { checked: true,  text: 'Make example application with JSX' },
                      { checked: false, text: 'Compile using the --harmony flag' },
                      { checked: false, text: 'Check checkboxes' },
                      { checked: true,  text: 'Update example to use React 0.12' }
                    ]
    })

var checkedMixin = {
  onChecked() {
    this.props.todo.update('checked', state => !state)
  }
}

var Todo = component(checkedMixin, function() {
    return (
       <li className={this.props.todo.get('checked') && 'completed'}>
        <div className="view">
          <input className="toggle" type="checkbox" onChange={this.onChecked} checked={this.props.todo.get('checked')}/>
          <label> {this.props.todo.get('text')} </label>
          <button className="destroy"/>
        </div>
        <input className="edit"/>
      </li>
    )}
)

var TodoList = component(function() {
    return (
        <section id="main">
          <input id="toggle-all" type="checkbox"/>
          <ul id="todo-list">
            { this.props.todolist.map((item, index) => <Todo key={index} todo={item}/>).toArray() }
          </ul>
        </section>
    )}
)

var addedMixin = {
  onAdded(event) {
    if (event.key === 'Enter') {
      event.preventDefault()

      var val = this.refs.text.getDOMNode().value.trim()
      if (val) {
        this.props.todolist.update(items => items.push(immstruct({checked: false, text: val}).current) )
        this.refs.text.getDOMNode().value = ''
      }
    }
  }
}
var clearCompletedMixin = {
  clearCompleted() {
    if(this.props.completed > 0) {
      //todo ?
      // this.props.todolist.update(items => items.filter(immstruct({checked: false, text: val}).current) )
    }
  }
}
var Main = component([addedMixin, clearCompletedMixin], function() {
    function completed(todolist) {
      var totalCompleted = 0
      todolist.forEach(function(item) { if(item.get('checked')) totalCompleted += 1 })
      return totalCompleted;
    }

    return (
      <div id="todoapp">
        <header id="header">
          <h1> Todos </h1>
          <input id="new-todo" placeholder='What needs to be done?' autoFocus={true} onKeyDown={this.onAdded} ref="text"/>
        </header>

        { <TodoList todolist={this.props.todolist}/> }

        <footer id="footer">
          <span id="todo-count">
            <strong> ({this.props.todolist.size - completed(this.props.todolist)}) items left </strong>
          </span>
          <ul id="filters">
            <li className="selected"><a href="#/"> All </a></li>
            <li><a href="#/active"> Active </a></li>
            <li><a href="#/completed"> Completed </a></li>
          </ul>
          <button id="clear-completed" onClick={this.clearCompleted}> Clear completed </button>
        </footer>
      </div>
    )
})

function render() {
  React.render(<Main todolist={todostore.cursor(['items'])}/>, document.body);
}
todostore.on('swap', render)
render()
{'fraction_non_alphanumeric': 0.17285587975243147, 'fraction_numerical': 0.003094606542882405, 'mean_word_length': 2.318826405867971, 'pattern_counts': {'":': 0, '<': 95, '<?xml version=': 0, '>': 107, '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': '7093057', 'n_tokens_mistral': 2170, 'n_tokens_neox': 2117, 'n_words': 431}