From c6480654348acab766824f1039a368af7aff0a32 Mon Sep 17 00:00:00 2001
From: Brice Favre <brice.favre@gmail.com>
Date: Thu, 28 Jan 2016 11:55:31 +0100
Subject: [PATCH 1/2] Add a state component

---
 src/components/AddTodo.js | 28 ++++++++++++++++++++++++++++
 src/components/TodoApp.js | 11 -----------
 src/containers/TodoApp.js | 15 +++++++++++++++
 src/index.js              |  2 +-
 4 files changed, 44 insertions(+), 12 deletions(-)
 create mode 100644 src/components/AddTodo.js
 delete mode 100644 src/components/TodoApp.js
 create mode 100644 src/containers/TodoApp.js

diff --git a/src/components/AddTodo.js b/src/components/AddTodo.js
new file mode 100644
index 0000000..4db827d
--- /dev/null
+++ b/src/components/AddTodo.js
@@ -0,0 +1,28 @@
+import React from 'react'
+
+class AddTodo extends React.Component {
+  constructor(props) {
+    super(props)
+  }
+
+  handleClick(e) {
+    var node = this.refs.input
+    var text = node.value.trim()
+    this.props.onAddClick(text)
+    node.value = ''
+  }
+
+  render() {
+    return (
+      <div>
+        <input type='text' ref='input' />
+        <button onClick={this.handleClick}>
+          Add
+        </button>
+      </div>
+    );
+  }
+}
+
+
+export default AddTodo
\ No newline at end of file
diff --git a/src/components/TodoApp.js b/src/components/TodoApp.js
deleted file mode 100644
index 6f626bb..0000000
--- a/src/components/TodoApp.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react'
-
-import TodoList from './TodoList'
-
-export default function TodoApp(props) {
-  return (
-    <div className="todoApp">
-      <TodoList data={props.data}/>
-    </div>
-  )
-}
diff --git a/src/containers/TodoApp.js b/src/containers/TodoApp.js
new file mode 100644
index 0000000..68480ee
--- /dev/null
+++ b/src/containers/TodoApp.js
@@ -0,0 +1,15 @@
+import React from 'react'
+import TodoList from '../components/TodoList'
+import AddTodo from '../components/AddTodo'
+
+export default function TodoApp(props) {
+  return (
+    <div className="todoApp">
+      <AddTodo 
+        onAddClick={function(text) {
+          console.log(text)
+        }} />
+      <TodoList data={props.data}/>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 5914ad2..562caa6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { render } from 'react-dom'
-import TodoApp from './components/TodoApp'
+import TodoApp from './containers/TodoApp'
 
 var data = [
   {id: 1, text: "Do The App", completed: 0},

From e3980ed901ac74cfbace68772685cccf9e853e6f Mon Sep 17 00:00:00 2001
From: Brice Favre <brice.favre@gmail.com>
Date: Mon, 15 Feb 2016 19:39:02 +0100
Subject: [PATCH 2/2] Refactor state component

---
 src/components/AddTodo.js  |  7 +++++--
 src/components/TodoApp.js  | 26 ++++++++++++++++++++++++++
 src/components/TodoList.js |  2 +-
 src/containers/TodoApp.js  | 15 ---------------
 src/index.js               |  2 +-
 5 files changed, 33 insertions(+), 19 deletions(-)
 create mode 100644 src/components/TodoApp.js
 delete mode 100644 src/containers/TodoApp.js

diff --git a/src/components/AddTodo.js b/src/components/AddTodo.js
index 4db827d..927ca0c 100644
--- a/src/components/AddTodo.js
+++ b/src/components/AddTodo.js
@@ -3,12 +3,13 @@ import React from 'react'
 class AddTodo extends React.Component {
   constructor(props) {
     super(props)
+    this.state = props
   }
 
   handleClick(e) {
     var node = this.refs.input
     var text = node.value.trim()
-    this.props.onAddClick(text)
+    this.state.onAddClick(text)
     node.value = ''
   }
 
@@ -16,7 +17,9 @@ class AddTodo extends React.Component {
     return (
       <div>
         <input type='text' ref='input' />
-        <button onClick={this.handleClick}>
+        <button onClick={() => {
+          this.handleClick()
+        }}>
           Add
         </button>
       </div>
diff --git a/src/components/TodoApp.js b/src/components/TodoApp.js
new file mode 100644
index 0000000..b8a41bb
--- /dev/null
+++ b/src/components/TodoApp.js
@@ -0,0 +1,26 @@
+import React from 'react'
+import TodoList from '../components/TodoList'
+import AddTodo from '../components/AddTodo'
+
+class TodoApp extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = props
+  }
+
+  render() {
+    return (
+      <div className="todoApp">
+        <AddTodo
+        onAddClick={ (text) => {
+          let todos = this.state.data
+          todos.push({id: Date.now(), text: text, completed: 0})
+          this.setState({data: todos})
+        }}/>
+        <TodoList todos={this.state.data}/>
+      </div>
+    )    
+  }
+}
+
+export default TodoApp
\ No newline at end of file
diff --git a/src/components/TodoList.js b/src/components/TodoList.js
index fde395c..e86d1aa 100644
--- a/src/components/TodoList.js
+++ b/src/components/TodoList.js
@@ -6,7 +6,7 @@ export default function TodoList(props) {
   return (
     <div className="TodoList">
       <ul>
-        {props.data.map(function(todo) {
+        {props.todos.map(function(todo) {
           return <Todo key={todo.id} completed={todo.completed} text={todo.text} />
         })}
       </ul>
diff --git a/src/containers/TodoApp.js b/src/containers/TodoApp.js
deleted file mode 100644
index 68480ee..0000000
--- a/src/containers/TodoApp.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react'
-import TodoList from '../components/TodoList'
-import AddTodo from '../components/AddTodo'
-
-export default function TodoApp(props) {
-  return (
-    <div className="todoApp">
-      <AddTodo 
-        onAddClick={function(text) {
-          console.log(text)
-        }} />
-      <TodoList data={props.data}/>
-    </div>
-  )
-}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 562caa6..5914ad2 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { render } from 'react-dom'
-import TodoApp from './containers/TodoApp'
+import TodoApp from './components/TodoApp'
 
 var data = [
   {id: 1, text: "Do The App", completed: 0},