/**
 * Created by youha on 4/12/2016.
 */
'use strict';
var React = require('react');
var ReactDOM = require('react-dom');


var List = React.createClass({
    displayName: 'list',
    render: function () {
        function renderLi(item) {
            return <li key={item.key}>{item.name}</li>;
        }

        return (
            <div>
                <ul>{this.props.data.map(renderLi)}</ul>
            </div>
        )
    }
});

var TodoList = React.createClass({
    displayName: 'todoList',
    getInitialState: function () {
        return {
            items: [],
            text: ''
        }
    },
    submit: function (e) {
        e.preventDefault();
        this.state.items.push({
            name: this.state.text,
            key: new Date()
        });
        this.state.text = '';
        this.setState({
            text: this.state.text,
            items: this.state.items
        });
    },
    textChange: function (e) {
        this.setState({
            text: e.target.value
        });
    },
    render: function () {
        return (
            <div>
                <List data={this.state.items}></List>
                <form onSubmit={this.submit}>
                    <input value={this.state.text} onChange={this.textChange}/>
                    <button>{'Add #' + (this.state.items.length + 1)}</button>
                </form>
            </div>
        )
    }
});


var el = document.getElementById('todoList');

ReactDOM.render(React.createElement(TodoList, null), el);



@@ -113,24 +113,61 @@
 act-dom');%0A%0A
+var firebase = require('firebase');%0A%0A
 %0Avar List = 
@@ -651,21 +651,33 @@
  %7D,%0A    
-submi
+componentWillMoun
 t: funct
@@ -673,33 +673,32 @@
 ount: function (
-e
 ) %7B%0A        e.pr
@@ -697,28 +697,151 @@
     
-e.preventDefault();%0A
+this.firebaseRef = new firebase('https://mimikiyru.firebaseio.com/todoList');%0A        this.firebaseRef.on(%22child_added%22, function (data) %7B%0A    
     
@@ -866,17 +866,28 @@
 ms.push(
-%7B
+data.val());
 %0A       
@@ -891,20 +891,53 @@
         
-name
+this.setState(%7B%0A                items
 : this.s
@@ -945,41 +945,193 @@
 ate.
+i
 te
-xt,%0A            key: new Date
+ms%0A            %7D);%0A        %7D.bind(this));%0A    %7D,%0A    componentWillUnmount: function () %7B%0A        this.firebaseRef.off();%0A    %7D,%0A    submit: function (e) %7B%0A        e.preventDefault
 ()
+;
 %0A   
@@ -1139,83 +1139,166 @@
     
-%7D);%0A        this.state.text = '';%0A        this.setState(%7B%0A            text:
+var date = new Date();%0A        this.firebaseRef.push(%7B%0A            name: this.state.text,%0A            key: new Date().getTime().toString()%0A        %7D);%0A       
  thi
@@ -1301,33 +1301,38 @@
  this.state.text
-,
+ = '';
 %0A            ite
@@ -1320,33 +1320,56 @@
 '';%0A        
-    items
+this.setState(%7B%0A            text
 : this.state
@@ -1361,37 +1361,36 @@
 ext: this.state.
-i
 te
-ms
+xt
 %0A        %7D);%0A   

add todo list