From 40e2423d91a89a282d3ba3b469abf5b5f50047a0 Mon Sep 17 00:00:00 2001
From: Texi Schaeffer <texirae.schaeffer@gmail.com>
Date: Mon, 30 Jan 2023 13:41:29 -0600
Subject: [PATCH 1/6] added in all dom

---
 frontend/components/App.js | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/frontend/components/App.js b/frontend/components/App.js
index 38b7a2f5..e6857e23 100644
--- a/frontend/components/App.js
+++ b/frontend/components/App.js
@@ -4,7 +4,19 @@ export default class App extends React.Component {
   render() {
     return (
       <div>
-        Todo App
+        <h1>Todo App</h1>
+        <ul>
+          <li>Walk the dog</li>
+          <li>Take out trash</li>
+          <li>Workout</li>
+        </ul>
+
+        <form>
+          <input/>
+          <button>Add</button>
+        </form>
+
+        <button>Clear</button>
       </div>
     )
   }

From dacba73c8c70796b1798a34cbc7616d1913993ac Mon Sep 17 00:00:00 2001
From: Texi Schaeffer <texirae.schaeffer@gmail.com>
Date: Mon, 30 Jan 2023 13:57:34 -0600
Subject: [PATCH 2/6] added todo state

---
 frontend/components/App.js | 35 ++++++++++++++++++++++++++++++++---
 1 file changed, 32 insertions(+), 3 deletions(-)

diff --git a/frontend/components/App.js b/frontend/components/App.js
index e6857e23..ce581ff6 100644
--- a/frontend/components/App.js
+++ b/frontend/components/App.js
@@ -1,14 +1,43 @@
 import React from 'react'
 
 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
+        },
+        {
+          task: 'Organize Garage',
+          id: 1357913,
+          completed: false
+        }
+      ]
+    }
+  }
   render() {
+    const { todos } = this.state;
+    console.log(todos);
+
     return (
       <div>
         <h1>Todo App</h1>
+
         <ul>
-          <li>Walk the dog</li>
-          <li>Take out trash</li>
-          <li>Workout</li>
+          {
+            todos.map(todo => {
+              return(<li>{todo.task}</li>)
+            })
+          }
         </ul>
 
         <form>

From 9dbaed38d6dcce0ddfb175da752e4a9cb68b3af9 Mon Sep 17 00:00:00 2001
From: Texi Schaeffer <texirae.schaeffer@gmail.com>
Date: Mon, 30 Jan 2023 14:24:34 -0600
Subject: [PATCH 3/6] created todo list component

---
 frontend/components/App.js      | 18 +++---------------
 frontend/components/Todo.js     |  2 +-
 frontend/components/TodoList.js |  9 ++++++++-
 3 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/frontend/components/App.js b/frontend/components/App.js
index ce581ff6..474f7947 100644
--- a/frontend/components/App.js
+++ b/frontend/components/App.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import TodoList from './TodoList';
 
 export default class App extends React.Component {
 
@@ -16,29 +17,16 @@ export default class App extends React.Component {
           id: 9876543,
           completed: false
         },
-        {
-          task: 'Organize Garage',
-          id: 1357913,
-          completed: false
-        }
       ]
     }
   }
   render() {
     const { todos } = this.state;
-    console.log(todos);
 
     return (
       <div>
-        <h1>Todo App</h1>
-
-        <ul>
-          {
-            todos.map(todo => {
-              return(<li>{todo.task}</li>)
-            })
-          }
-        </ul>
+        <h1>Todo List</h1>
+        <TodoList todos={ todos }/>
 
         <form>
           <input/>
diff --git a/frontend/components/Todo.js b/frontend/components/Todo.js
index ca86f981..dd841b03 100644
--- a/frontend/components/Todo.js
+++ b/frontend/components/Todo.js
@@ -4,7 +4,7 @@ export default class Todo extends React.Component {
   render() {
     return (
       <div>
-        Todo
+        <li>{ this.props.todo.task } { this.props.todo.completed ? <span>- completed</span> : <span></span>}</li>
       </div>
     )
   }
diff --git a/frontend/components/TodoList.js b/frontend/components/TodoList.js
index 95410373..4919ba2e 100644
--- a/frontend/components/TodoList.js
+++ b/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 todo={todo} />)
+            })
+          }
+        </ul>
       </div>
     )
   }

From e482dde9cb692b58152796bba8ab811f92b44f66 Mon Sep 17 00:00:00 2001
From: Texi Schaeffer <texirae.schaeffer@gmail.com>
Date: Mon, 30 Jan 2023 14:30:42 -0600
Subject: [PATCH 4/6] added todo form component

---
 frontend/components/App.js  | 9 +++------
 frontend/components/Form.js | 9 +++++++--
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/frontend/components/App.js b/frontend/components/App.js
index 474f7947..1cdaa25c 100644
--- a/frontend/components/App.js
+++ b/frontend/components/App.js
@@ -1,5 +1,6 @@
 import React from 'react'
 import TodoList from './TodoList';
+import TodoForm from './Form';
 
 export default class App extends React.Component {
 
@@ -10,7 +11,7 @@ export default class App extends React.Component {
         {
           task: 'Walk the dog',
           id: 1234567,
-          completed: false
+          completed: true
         },
         {
           task: 'Bake Cookies',
@@ -27,11 +28,7 @@ export default class App extends React.Component {
       <div>
         <h1>Todo List</h1>
         <TodoList todos={ todos }/>
-
-        <form>
-          <input/>
-          <button>Add</button>
-        </form>
+        <TodoForm />
 
         <button>Clear</button>
       </div>
diff --git a/frontend/components/Form.js b/frontend/components/Form.js
index 30fbc48d..72febf3f 100644
--- a/frontend/components/Form.js
+++ b/frontend/components/Form.js
@@ -1,10 +1,15 @@
-import React from 'react'
+import React from 'react';
+import Todo from './Todo';
+import TodoList from './TodoList';
 
 export default class Form extends React.Component {
   render() {
     return (
       <div>
-        Form
+        <form>
+          <input/>
+          <button>Add</button>
+        </form>
       </div>
     )
   }

From 4afce98e5bd7bc29b584334bbeeccd77edae7ebd Mon Sep 17 00:00:00 2001
From: Texi Schaeffer <texirae.schaeffer@gmail.com>
Date: Mon, 30 Jan 2023 15:01:14 -0600
Subject: [PATCH 5/6] added submit and clear button click functions

---
 frontend/components/App.js  | 39 ++++++++++++++++++++++++++++++++++---
 frontend/components/Form.js | 11 +++++++++--
 2 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/frontend/components/App.js b/frontend/components/App.js
index 1cdaa25c..4f1c823c 100644
--- a/frontend/components/App.js
+++ b/frontend/components/App.js
@@ -21,16 +21,49 @@ export default class App extends React.Component {
       ]
     }
   }
+
+  handleAdd = () => {
+    //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: 'Cook',
+      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);
+      })
+    });    
+  }
+
   render() {
     const { todos } = this.state;
 
     return (
       <div>
         <h1>Todo List</h1>
-        <TodoList todos={ todos }/>
-        <TodoForm />
+        <TodoList todos={todos}/>
+        <TodoForm handleAdd = {this.handleAdd}/>
 
-        <button>Clear</button>
+        <button onClick = {this.handleClear}>Clear</button>
       </div>
     )
   }
diff --git a/frontend/components/Form.js b/frontend/components/Form.js
index 72febf3f..5d5025c0 100644
--- a/frontend/components/Form.js
+++ b/frontend/components/Form.js
@@ -3,12 +3,19 @@ import Todo from './Todo';
 import TodoList from './TodoList';
 
 export default class Form extends React.Component {
-  render() {
+  
+  handleSubmit = (e) => {
+    e.preventDefault();
+    this.props.handleAdd();
+  }
+
+  render() { 
+
     return (
       <div>
         <form>
           <input/>
-          <button>Add</button>
+          <button onClick={this.handleSubmit}>Add</button>
         </form>
       </div>
     )

From 5cf273faa976ad8bac6965fa56defaf9b1357ffc Mon Sep 17 00:00:00 2001
From: Texi Schaeffer <texirae.schaeffer@gmail.com>
Date: Mon, 30 Jan 2023 16:03:59 -0600
Subject: [PATCH 6/6] completed mvp

---
 frontend/components/App.js      | 30 +++++++++++++++++++++++++-----
 frontend/components/Form.js     | 18 ++++++++++++++++--
 frontend/components/Todo.js     |  7 ++++++-
 frontend/components/TodoList.js |  2 +-
 4 files changed, 48 insertions(+), 9 deletions(-)

diff --git a/frontend/components/App.js b/frontend/components/App.js
index 4f1c823c..a747ac1c 100644
--- a/frontend/components/App.js
+++ b/frontend/components/App.js
@@ -11,7 +11,7 @@ export default class App extends React.Component {
         {
           task: 'Walk the dog',
           id: 1234567,
-          completed: true
+          completed: false
         },
         {
           task: 'Bake Cookies',
@@ -22,14 +22,14 @@ export default class App extends React.Component {
     }
   }
 
-  handleAdd = () => {
+  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: 'Cook',
+      task: task,
       id: Date.now(),
       completed: false
     };
@@ -37,7 +37,7 @@ export default class App extends React.Component {
     this.setState({
       ...this.state,
       todos: [...this.state.todos, newTodo]
-    })
+    });
   }
 
   handleClear = () => {
@@ -54,13 +54,33 @@ export default class App extends React.Component {
     });    
   }
 
+  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>
         <h1>Todo List</h1>
-        <TodoList todos={todos}/>
+        <TodoList handleToggle={this.handleToggle} todos={todos}/>
         <TodoForm handleAdd = {this.handleAdd}/>
 
         <button onClick = {this.handleClear}>Clear</button>
diff --git a/frontend/components/Form.js b/frontend/components/Form.js
index 5d5025c0..226affa6 100644
--- a/frontend/components/Form.js
+++ b/frontend/components/Form.js
@@ -4,9 +4,23 @@ import TodoList from './TodoList';
 
 export default class Form extends React.Component {
   
+  constructor() {
+    super();
+    this.state = {
+      input: ""
+    }
+  }
+
   handleSubmit = (e) => {
     e.preventDefault();
-    this.props.handleAdd();
+    this.props.handleAdd(this.state.input);
+  }
+
+  handleChange = (e) => {
+    this.setState({
+      ...this.state,
+      input: e.target.value
+    });
   }
 
   render() { 
@@ -14,7 +28,7 @@ export default class Form extends React.Component {
     return (
       <div>
         <form>
-          <input/>
+          <input onChange={this.handleChange}/>
           <button onClick={this.handleSubmit}>Add</button>
         </form>
       </div>
diff --git a/frontend/components/Todo.js b/frontend/components/Todo.js
index dd841b03..8a149252 100644
--- a/frontend/components/Todo.js
+++ b/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>
-        <li>{ this.props.todo.task } { this.props.todo.completed ? <span>- completed</span> : <span></span>}</li>
+        <li onClick={this.handleClick}>{ this.props.todo.task } { this.props.todo.completed ? <span>- completed</span> : <span></span>}</li>
       </div>
     )
   }
diff --git a/frontend/components/TodoList.js b/frontend/components/TodoList.js
index 4919ba2e..dbdf5b74 100644
--- a/frontend/components/TodoList.js
+++ b/frontend/components/TodoList.js
@@ -8,7 +8,7 @@ export default class TodoList extends React.Component {
         <ul>
           {
             this.props.todos.map(todo => {
-              return(<Todo todo={todo} />)
+              return(<Todo handleToggle={this.props.handleToggle}todo={todo} />)
             })
           }
         </ul>