Pull

frontend/components/App.js

@@ -1,10 +1,80 @@
 import React from 'react'
 
+import TodoList from './TodoList'
+import TodoForm from './Form'
+
+
 export default class App extends React.Component {
+  constructor(){
+    super();
+    this.state = {
+      todos:[
+        {
+          name: 'Organize Garage',
+          id: 1528817077286,
+          completed: false
+        },
+        {
+          name: 'Bake Cookies',
+          id: 1528817084358,
+          completed: false
+        }
+      ]
+    }
+  }
+
+  handleAdd = (task) => {
+
+    const newTodo = {
+      name: task,
+      id:Date.now(),
+      completed: false
+    }
+
+    this.setState({
+      ...this.state,
+      todos: [...this.state.todos, newTodo]
+    });
+  }
+
+  handleClear = () => {
+    this.setState({
+      ...this.state,
+      todos:this.state.todos.filter(todo => {
+        return (todo.completed === false)
+      })
+    })
+  }
+
+  handleToggle = (clickedId) => {
+
+    this.setState({
+      ...this.state,
+      todos: this.state.todos.map(todo => {
+        if(todo.id=== clickedId){
+          return {...todo,
+          completed: !todo.completed
+        }
+      }
+      return todo;
+    })
+
+    })
+  }
+
   render() {
+    const {todos} = this.state
+
     return (
       <div>
-        Todo App
+        <h1>Todos</h1>
+
+
+        <TodoList handleToggle={this.handleToggle} todos={todos}/>
+
+        <TodoForm handleAdd={this.handleAdd}/>
+
+        <button onClick={this.handleClear}>Clear</button>
       </div>
     )
   }

frontend/components/Form.js

@@ -1,11 +1,28 @@
 import React from 'react'
 
-export default class Form extends React.Component {
-  render() {
-    return (
-      <div>
-        Form
-      </div>
-    )
+export default class TodoForm extends React.Component{
+  constructor(){
+    super();
+    this.state = {
+      input:''
+    }
+  }
+  handleSubmit= (e)=> {
+    e.preventDefault();
+    this.props.handleAdd(this.state.input);
+  }
+
+  handleChange = (e) => {
+    this.setState({
+      ...this.State,
+      input: e.target.value
+    })
+  }
+
+  render(){
+    return(<form>
+      <input onChange = {this.handleChange}/>
+      <button onClick={this.handleSubmit}>Add</button>
+    </form>)
   }
 }

frontend/components/Todo.js

@@ -1,11 +1,10 @@
 import React from 'react'
 
 export default class Todo extends React.Component {
-  render() {
-    return (
-      <div>
-        Todo
-      </div>
-    )
+  handleClick =() => {
+    this.props.handleToggle(this.props.todo.id);
   }
+  render(){
+    return(<li onClick ={this.handleClick}>{this.props.todo.name} {this.props.todo.completed?<span>completed</span> : <span></span>}</li>)
+  };
 }

frontend/components/TodoList.js

@@ -1,11 +1,13 @@
 import React from 'react'
-
-export default class TodoList extends React.Component {
-  render() {
-    return (
-      <div>
-        TodoList
-      </div>
-    )
+import Todo from './Todo'
+export default class TodoList extends React.Component{
+  render(){
+    return(        <ul>
+      {
+        this.props.todos.map(todo => {
+          return (<Todo  key={todo.id} handleToggle={this.props.handleToggle} todo={todo}/>)
+        })
+      }
+    </ul>)
   }
 }