From 08a283ed0ee5e682a409c6e0ef0b3e8c00445756 Mon Sep 17 00:00:00 2001
From: Emrie <emrie@emries-mbp.mynetworksettings.com>
Date: Mon, 10 Apr 2023 14:59:31 -0400
Subject: [PATCH 1/4] todolist created

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

diff --git a/frontend/components/App.js b/frontend/components/App.js
index 38b7a2f5..7ed7789d 100644
--- a/frontend/components/App.js
+++ b/frontend/components/App.js
@@ -1,10 +1,43 @@
 import React from 'react'
 
 export default class App extends React.Component {
+constructor(){
+  super();
+  this.state = {
+   ToDos: [
+      {
+        name: 'Organize Garage',
+        id: 1528817077286, // could look different, you could use a timestamp to generate it
+        completed: false
+      },
+      {
+        name: 'Bake Cookies',
+        id: 1528817084358,
+        completed: false
+      }
+    ]
+  }
+}
+
+
+
   render() {
+    const { ToDos } = this.state;
+    console.log(ToDos)
     return (
       <div>
-        Todo App
+        <h1>TODOS</h1>
+        <ul>
+        {ToDos.map(todo=>{
+          return (<li>{todo.name}{todo.completed? <span>- completed</span>: <span></span>}</li>)
+        })}
+        </ul>
+        
+        <form>
+          <input type="text"/>
+          <button>ADD</button>
+          <button>CLEAR</button>
+        </form>
       </div>
     )
   }
diff --git a/frontend/components/Form.js b/frontend/components/Form.js
index 30fbc48d..f8f3bbb2 100644
--- a/frontend/components/Form.js
+++ b/frontend/components/Form.js
@@ -4,7 +4,7 @@ export default class Form extends React.Component {
   render() {
     return (
       <div>
-        Form
+       
       </div>
     )
   }

From 2e8ed7b7da1b569b684a80c651ad3e99fde38edd Mon Sep 17 00:00:00 2001
From: Emrie <emrie@emries-mbp.mynetworksettings.com>
Date: Mon, 10 Apr 2023 15:26:19 -0400
Subject: [PATCH 2/4] components created almost

---
 frontend/components/App.js      | 53 +++++++++++++++++----------------
 frontend/components/Todo.js     | 13 ++++----
 frontend/components/TodoList.js | 12 +++++---
 3 files changed, 42 insertions(+), 36 deletions(-)

diff --git a/frontend/components/App.js b/frontend/components/App.js
index 7ed7789d..b05c9a02 100644
--- a/frontend/components/App.js
+++ b/frontend/components/App.js
@@ -1,44 +1,47 @@
 import React from 'react'
+import ToDo from './TodoList';
+import ToDoList from './TodoList';
+
+
+
+
+
 
 export default class App extends React.Component {
-constructor(){
-  super();
-  this.state = {
-   ToDos: [
-      {
-        name: 'Organize Garage',
-        id: 1528817077286, // could look different, you could use a timestamp to generate it
-        completed: false
-      },
-      {
-        name: 'Bake Cookies',
-        id: 1528817084358,
-        completed: false
-      }
-    ]
+  constructor() {
+    super();
+    this.state = {
+      todos: [
+        {
+          name: 'Organize Garage',
+          id: 1528817077286, // could look different, you could use a timestamp to generate it
+          completed: false
+        },
+        {
+          name: 'Bake Cookies',
+          id: 1528817084358,
+          completed: false
+        }
+      ]
+    }
   }
-}
 
 
 
   render() {
-    const { ToDos } = this.state;
-    console.log(ToDos)
+    const { todos } = this.state;
+    console.log(todos)
     return (
       <div>
         <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 type="text"/>
+          <input type="text" />
           <button>ADD</button>
           <button>CLEAR</button>
         </form>
       </div>
     )
+
   }
 }
diff --git a/frontend/components/Todo.js b/frontend/components/Todo.js
index ca86f981..327679cb 100644
--- a/frontend/components/Todo.js
+++ b/frontend/components/Todo.js
@@ -1,11 +1,10 @@
 import React from 'react'
 
-export default class Todo extends React.Component {
+export default class ToDo extends React.Component {
   render() {
-    return (
-      <div>
-        Todo
-      </div>
-    )
-  }
+    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..6b626e66 100644
--- a/frontend/components/TodoList.js
+++ b/frontend/components/TodoList.js
@@ -1,11 +1,15 @@
 import React from 'react'
+import ToDo from './Todo'
 
-export default class TodoList extends React.Component {
+export default class ToDoList extends React.Component {
   render() {
     return (
-      <div>
-        TodoList
-      </div>
+      <ul>
+        {this.props.todos.map(todo => { return (<ToDo todo={todo} />) })}
+      </ul>
+
     )
+
   }
 }
+

From f208b3f54babefa63fee1e1c36bb0baf17f76a06 Mon Sep 17 00:00:00 2001
From: Emrie <emrie@emries-mbp.mynetworksettings.com>
Date: Mon, 10 Apr 2023 15:32:58 -0400
Subject: [PATCH 3/4] tired

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

diff --git a/frontend/components/App.js b/frontend/components/App.js
index b05c9a02..6f0dfe6d 100644
--- a/frontend/components/App.js
+++ b/frontend/components/App.js
@@ -1,10 +1,7 @@
 import React from 'react'
 import ToDo from './TodoList';
 import ToDoList from './TodoList';
-
-
-
-
+import Form from './Form';
 
 
 export default class App extends React.Component {
@@ -34,12 +31,8 @@ export default class App extends React.Component {
     return (
       <div>
         <h1>TODOS</h1>
-        <ToDoList todos={todos}/>
-        <form>
-          <input type="text" />
-          <button>ADD</button>
-          <button>CLEAR</button>
-        </form>
+        <ToDoList todos={todos} />
+        <Form/>
       </div>
     )
 
diff --git a/frontend/components/Form.js b/frontend/components/Form.js
index f8f3bbb2..ada4b483 100644
--- a/frontend/components/Form.js
+++ b/frontend/components/Form.js
@@ -3,9 +3,10 @@ import React from 'react'
 export default class Form extends React.Component {
   render() {
     return (
-      <div>
-       
-      </div>
-    )
+    <form>
+      <input type="text" />
+      <button>ADD</button>
+      <button>CLEAR</button>
+    </form>)
   }
 }

From 5c5b5583b8f35474b4b0c9305da4e920cdf95423 Mon Sep 17 00:00:00 2001
From: Emrie <emrie@emries-mbp.mynetworksettings.com>
Date: Tue, 11 Apr 2023 14:20:19 -0400
Subject: [PATCH 4/4] finished everything

---
 frontend/components/App.js      | 40 +++++++++++++++++++++++++++++++--
 frontend/components/Form.js     | 32 +++++++++++++++++++++-----
 frontend/components/Todo.js     |  6 ++++-
 frontend/components/TodoList.js |  2 +-
 4 files changed, 71 insertions(+), 9 deletions(-)

diff --git a/frontend/components/App.js b/frontend/components/App.js
index 6f0dfe6d..a054266c 100644
--- a/frontend/components/App.js
+++ b/frontend/components/App.js
@@ -23,6 +23,41 @@ export default class App extends React.Component {
     }
   }
 
+handleAdd = (name) => {
+  const newtoDo = {
+    name: name,
+    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() {
@@ -31,8 +66,9 @@ export default class App extends React.Component {
     return (
       <div>
         <h1>TODOS</h1>
-        <ToDoList todos={todos} />
-        <Form/>
+        <ToDoList handletoggle={this.handletoggle} todos={todos} />
+        <Form handleAdd={this.handleAdd} />
+        <button onClick={this.handleClear}>CLEAR</button>
       </div>
     )
 
diff --git a/frontend/components/Form.js b/frontend/components/Form.js
index ada4b483..c1382610 100644
--- a/frontend/components/Form.js
+++ b/frontend/components/Form.js
@@ -1,12 +1,34 @@
 import React from 'react'
 
 export default class Form extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      input: ""
+    }
+  }
+
+  handlesumbit = (e) => {
+    e.preventDefault();
+    this.props.handleAdd(this.state.input)
+  }
+
+  handlechange = (e) => {
+    this.setState({
+      ...this.state,
+      input: e.target.value
+    })
+  }
+
+
+
   render() {
+    
     return (
-    <form>
-      <input type="text" />
-      <button>ADD</button>
-      <button>CLEAR</button>
-    </form>)
+      <form>
+        <input onChange={this.handlechange} type="text" />
+        <button onClick={this.handlesumbit}>ADD</button>
+
+      </form>)
   }
 }
diff --git a/frontend/components/Todo.js b/frontend/components/Todo.js
index 327679cb..164bdd10 100644
--- a/frontend/components/Todo.js
+++ b/frontend/components/Todo.js
@@ -1,9 +1,13 @@
 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>
+    <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 6b626e66..6453e8af 100644
--- a/frontend/components/TodoList.js
+++ b/frontend/components/TodoList.js
@@ -5,7 +5,7 @@ export default class ToDoList extends React.Component {
   render() {
     return (
       <ul>
-        {this.props.todos.map(todo => { return (<ToDo todo={todo} />) })}
+        {this.props.todos.map(todo => { return (<ToDo key={todo.id} handletoggle={this.props.handletoggle} todo={todo} />) })}
       </ul>
 
     )