From e814984eecf48d36ee480f252c166ddc21e7d3eb Mon Sep 17 00:00:00 2001
From: Anthony Climer <anthonyclimer0925@gmail.com>
Date: Wed, 8 Feb 2023 20:40:45 -0500
Subject: [PATCH 1/4] Frame work done :)

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

diff --git a/frontend/components/App.js b/frontend/components/App.js
index 38b7a2f5..5cc67860 100644
--- a/frontend/components/App.js
+++ b/frontend/components/App.js
@@ -4,7 +4,21 @@ export default class App extends React.Component {
   render() {
     return (
       <div>
-        Todo App
+        <h1>Todos</h1>
+
+
+        <ul>
+          <li>Brush teeth</li>
+          <li>Take out the dogs and feed them</li>
+          <li>Use restroom</li>
+        </ul>
+
+        <form>
+          <input/>
+          <button>Add</button>
+        </form>
+
+        <button>Clear</button>
       </div>
     )
   }

From 9ad1ec6230276b6afa9c0fb66dae0e180b041610 Mon Sep 17 00:00:00 2001
From: Anthony Climer <anthonyclimer0925@gmail.com>
Date: Wed, 8 Feb 2023 21:17:15 -0500
Subject: [PATCH 2/4] I have the dummy data rendering in the dom

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

diff --git a/frontend/components/App.js b/frontend/components/App.js
index 5cc67860..aa569516 100644
--- a/frontend/components/App.js
+++ b/frontend/components/App.js
@@ -1,16 +1,38 @@
 import React from 'react'
 
 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
+        }
+      ]
+    }
+  }
+
   render() {
+    const {todos} = this.state
+    
     return (
       <div>
         <h1>Todos</h1>
 
 
         <ul>
-          <li>Brush teeth</li>
-          <li>Take out the dogs and feed them</li>
-          <li>Use restroom</li>
+          {
+            todos.map(todo => {
+              return (<li>{todo.name} {todo.completed?<span>completed</span> : <span></span>}</li>)
+            })
+          }
         </ul>
 
         <form>

From 0a3ea06f2e380f721ffad53ba377ae34d0f0648d Mon Sep 17 00:00:00 2001
From: Anthony Climer <anthonyclimer0925@gmail.com>
Date: Wed, 8 Feb 2023 21:40:28 -0500
Subject: [PATCH 3/4] Added sub components

---
 frontend/components/App.js      | 17 ++++++-----------
 frontend/components/Form.js     | 13 ++++++-------
 frontend/components/Todo.js     | 10 +++-------
 frontend/components/TodoList.js | 18 ++++++++++--------
 4 files changed, 25 insertions(+), 33 deletions(-)

diff --git a/frontend/components/App.js b/frontend/components/App.js
index aa569516..81fdd2c3 100644
--- a/frontend/components/App.js
+++ b/frontend/components/App.js
@@ -1,5 +1,9 @@
 import React from 'react'
 
+import TodoList from './TodoList'
+import TodoForm from './Form'
+
+
 export default class App extends React.Component {
   constructor(){
     super();
@@ -27,18 +31,9 @@ export default class App extends React.Component {
         <h1>Todos</h1>
 
 
-        <ul>
-          {
-            todos.map(todo => {
-              return (<li>{todo.name} {todo.completed?<span>completed</span> : <span></span>}</li>)
-            })
-          }
-        </ul>
+        <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..c4f68f80 100644
--- a/frontend/components/Form.js
+++ b/frontend/components/Form.js
@@ -1,11 +1,10 @@
 import React from 'react'
 
-export default class Form extends React.Component {
-  render() {
-    return (
-      <div>
-        Form
-      </div>
-    )
+export default class TodoForm extends React.Component{
+  render(){
+    return(<form>
+      <input/>
+      <button>Add</button>
+    </form>)
   }
 }
diff --git a/frontend/components/Todo.js b/frontend/components/Todo.js
index ca86f981..82796745 100644
--- a/frontend/components/Todo.js
+++ b/frontend/components/Todo.js
@@ -1,11 +1,7 @@
 import React from 'react'
 
 export default class Todo extends React.Component {
-  render() {
-    return (
-      <div>
-        Todo
-      </div>
-    )
-  }
+  render(){
+    return(<li>{this.props.todo.name} {this.props.todo.completed?<span>completed</span> : <span></span>}</li>)
+  };
 }
diff --git a/frontend/components/TodoList.js b/frontend/components/TodoList.js
index 95410373..e5b7683c 100644
--- a/frontend/components/TodoList.js
+++ b/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 todo={todo}/>)
+        })
+      }
+    </ul>)
   }
 }

From 1cc0282eafb059a6f689f4266054054be80cb8a6 Mon Sep 17 00:00:00 2001
From: Anthony Climer <anthonyclimer0925@gmail.com>
Date: Wed, 8 Feb 2023 22:34:18 -0500
Subject: [PATCH 4/4] All of it done

---
 frontend/components/App.js      | 45 ++++++++++++++++++++++++++++++---
 frontend/components/Form.js     | 22 ++++++++++++++--
 frontend/components/Todo.js     |  5 +++-
 frontend/components/TodoList.js |  2 +-
 4 files changed, 67 insertions(+), 7 deletions(-)

diff --git a/frontend/components/App.js b/frontend/components/App.js
index 81fdd2c3..8bfab102 100644
--- a/frontend/components/App.js
+++ b/frontend/components/App.js
@@ -23,6 +23,45 @@ export default class App extends React.Component {
     }
   }
 
+  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
     
@@ -31,11 +70,11 @@ export default class App extends React.Component {
         <h1>Todos</h1>
 
 
-        <TodoList todos={todos}/>
+        <TodoList handleToggle={this.handleToggle} todos={todos}/>
 
-        <TodoForm/>
+        <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 c4f68f80..7065fc1f 100644
--- a/frontend/components/Form.js
+++ b/frontend/components/Form.js
@@ -1,10 +1,28 @@
 import React from 'react'
 
 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/>
-      <button>Add</button>
+      <input onChange = {this.handleChange}/>
+      <button onClick={this.handleSubmit}>Add</button>
     </form>)
   }
 }
diff --git a/frontend/components/Todo.js b/frontend/components/Todo.js
index 82796745..ad544683 100644
--- a/frontend/components/Todo.js
+++ b/frontend/components/Todo.js
@@ -1,7 +1,10 @@
 import React from 'react'
 
 export default class Todo extends React.Component {
+  handleClick =() => {
+    this.props.handleToggle(this.props.todo.id);
+  }
   render(){
-    return(<li>{this.props.todo.name} {this.props.todo.completed?<span>completed</span> : <span></span>}</li>)
+    return(<li onClick ={this.handleClick}>{this.props.todo.name} {this.props.todo.completed?<span>completed</span> : <span></span>}</li>)
   };
 }
diff --git a/frontend/components/TodoList.js b/frontend/components/TodoList.js
index e5b7683c..172776da 100644
--- a/frontend/components/TodoList.js
+++ b/frontend/components/TodoList.js
@@ -5,7 +5,7 @@ export default class TodoList extends React.Component{
     return(        <ul>
       {
         this.props.todos.map(todo => {
-          return (<Todo todo={todo}/>)
+          return (<Todo  key={todo.id} handleToggle={this.props.handleToggle} todo={todo}/>)
         })
       }
     </ul>)