Completed MVP

frontend/components/App.js

@@ -1,10 +1,89 @@
 import React from 'react'
+import TodoList from './TodoList';
+import TodoForm from './Form';
 
 export default class App extends React.Component {
+
+  constructor() {
+    super();
+    this.state = {
+      todos: [
+        {
+          task: 'Walk the dog',
+          id: 1234567,
+          completed: false
+        },
+        {
+          task: 'Bake Cookies',
+          id: 9876543,
+          completed: false
+        },
+      ]
+    }
+  }
+
+  handleAdd = (task) => {
+    //1. set state
+    //2. change todos
+    //3. make a copy of todos
+    //4. add a new todo to the end of our todo list
+
+    const newTodo = {
+      task: task,
+      id: Date.now(),
+      completed: false
+    };
+
+    this.setState({
+      ...this.state,
+      todos: [...this.state.todos, newTodo]
+    });
+  }
+
+  handleClear = () => {
+    //1. setState
+    //2. loop through all todos
+    //3. remove all todos that have completed === true
+    //4. save filtered todos to state
+
+    this.setState({
+      ...this.state,
+      todos: this.state.todos.filter(todo => {
+        return (todo.completed === false);
+      })
+    });    
+  }
+
+  handleToggle = (clickedId) => {
+    //1. set state
+    //2. change todos
+    //3. find the todo that we clicked on
+    //4. flip the value of completed for that todo
+    //5. keep all other todos the same
+    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>Todo List</h1>
+        <TodoList handleToggle={this.handleToggle} todos={todos}/>
+        <TodoForm handleAdd = {this.handleAdd}/>
+
+        <button onClick = {this.handleClear}>Clear</button>
       </div>
     )
   }

frontend/components/Form.js

@@ -1,10 +1,36 @@
-import React from 'react'
+import React from 'react';
+import Todo from './Todo';
+import TodoList from './TodoList';
 
 export default class Form extends React.Component {
-  render() {
+
+  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 (
       <div>
-        Form
+        <form>
+          <input onChange={this.handleChange}/>
+          <button onClick={this.handleSubmit}>Add</button>
+        </form>
       </div>
     )
   }

frontend/components/Todo.js

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

frontend/components/TodoList.js

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