From 91ba31794972eac8ad70894eae746132354ef8d5 Mon Sep 17 00:00:00 2001
From: RealSadLemon <esmodearburk@gmail.com>
Date: Mon, 6 Jun 2022 18:42:03 -0500
Subject: [PATCH 1/4] First commit, Created state in constructor and imported
 TodoList Component

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

diff --git a/frontend/components/App.js b/frontend/components/App.js
index 38b7a2f5..d301e144 100644
--- a/frontend/components/App.js
+++ b/frontend/components/App.js
@@ -1,10 +1,26 @@
-import React from 'react'
+import React from 'react';
+import TodoList from './TodoList';
 
 export default class App extends React.Component {
+  constructor(){
+    super();
+    const date = new Date();
+    const timestamp = date.getTime();
+    this.state = [
+      {
+        name: 'Brush Teeth',
+        id: timestamp,
+        completed: false
+      }
+    ];
+  }
+
+
+
   render() {
     return (
-      <div>
-        Todo App
+      <div className='App'>
+        <TodoList todoItems={this.state} />
       </div>
     )
   }

From 55ef40a0f0637efc8f149193d14a790de9ba7441 Mon Sep 17 00:00:00 2001
From: RealSadLemon <esmodearburk@gmail.com>
Date: Mon, 6 Jun 2022 19:19:45 -0500
Subject: [PATCH 2/4] Displayed todoList and added onClick functionality for
 toggling completion

---
 frontend/components/App.js      | 37 ++++++++++++++++++++++++---------
 frontend/components/Todo.js     | 12 ++++++++---
 frontend/components/TodoList.js | 16 +++++++++++---
 3 files changed, 49 insertions(+), 16 deletions(-)

diff --git a/frontend/components/App.js b/frontend/components/App.js
index d301e144..3d1c8eaa 100644
--- a/frontend/components/App.js
+++ b/frontend/components/App.js
@@ -1,26 +1,43 @@
 import React from 'react';
 import TodoList from './TodoList';
 
+const todoList = [
+  {
+    name: 'Brush Teeth',
+    id: new Date().getTime(),
+    completed: false
+  }
+];
+
 export default class App extends React.Component {
   constructor(){
     super();
-    const date = new Date();
-    const timestamp = date.getTime();
-    this.state = [
-      {
-        name: 'Brush Teeth',
-        id: timestamp,
-        completed: false
-      }
-    ];
+    this.state = {
+      todoList: todoList
+    }
   }
 
+  toggleCompleted = (itemId)=>{
+    this.setState({
+      todoList: this.state.todoList.map(item => {
+        if(itemId === item.id) {
+          return{
+            ...item,
+            completed: !item.completed
+          }
+        }
+      })
+    })
+  }
 
+  handleSubmit = (e)=>{
+    e.preventDefault();
+  }
 
   render() {
     return (
       <div className='App'>
-        <TodoList todoItems={this.state} />
+        <TodoList todoItems={this.state.todoList} toggleCompleted={this.toggleCompleted} />
       </div>
     )
   }
diff --git a/frontend/components/Todo.js b/frontend/components/Todo.js
index ca86f981..46dfa2c8 100644
--- a/frontend/components/Todo.js
+++ b/frontend/components/Todo.js
@@ -1,10 +1,16 @@
-import React from 'react'
+import React, {useEffect} from 'react'
 
 export default class Todo extends React.Component {
+  constructor(){
+    super();
+  }
   render() {
     return (
-      <div>
-        Todo
+      <div 
+        className={`list-item ${this.props.hideCompleted && this.props.todoItem.completed ? 'hidden' : ''}`} 
+        onClick={()=> this.props.toggleCompleted(this.props.todoItem.id)}
+        >
+        {this.props.todoItem.name}{this.props.todoItem.completed ? ' ✓' : ''}
       </div>
     )
   }
diff --git a/frontend/components/TodoList.js b/frontend/components/TodoList.js
index 95410373..c377a8f2 100644
--- a/frontend/components/TodoList.js
+++ b/frontend/components/TodoList.js
@@ -1,10 +1,20 @@
-import React from 'react'
+import React from 'react';
+import Todo from './Todo';
 
 export default class TodoList extends React.Component {
+  constructor(){
+    super();
+  }
+
   render() {
     return (
-      <div>
-        TodoList
+      <div className='list'>
+        Todos:
+        <br />
+        <br />
+        {this.props.todoItems.map(item => {
+          return <Todo todoItem={item} key={item.id} toggleCompleted={this.props.toggleCompleted} />
+        })}
       </div>
     )
   }

From 30af0c8655cd0257a0b700bd8bce391a892a2cb2 Mon Sep 17 00:00:00 2001
From: RealSadLemon <esmodearburk@gmail.com>
Date: Mon, 6 Jun 2022 19:38:52 -0500
Subject: [PATCH 3/4] Added Form functionality to add items to list

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

diff --git a/frontend/components/App.js b/frontend/components/App.js
index 3d1c8eaa..2f505c8a 100644
--- a/frontend/components/App.js
+++ b/frontend/components/App.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import TodoList from './TodoList';
+import Form from './Form';
 
 const todoList = [
   {
@@ -13,7 +14,9 @@ export default class App extends React.Component {
   constructor(){
     super();
     this.state = {
-      todoList: todoList
+      todoList: todoList,
+      inputValue: '',
+      hideCompleted: false
     }
   }
 
@@ -21,24 +24,42 @@ export default class App extends React.Component {
     this.setState({
       todoList: this.state.todoList.map(item => {
         if(itemId === item.id) {
-          return{
+          return {
             ...item,
             completed: !item.completed
-          }
-        }
+          };
+        };
+        return {...item};
       })
+    });
+  };
+
+  inputChange = (e)=>{
+    this.setState({
+      ...this.state,
+      inputValue: e.target.value
     })
   }
 
   handleSubmit = (e)=>{
     e.preventDefault();
+    const newListItem = {
+      name: this.state.inputValue,
+      id: new Date().getTime(),
+      completed: false 
+    }
+    this.setState({
+      ...this.state,
+      todoList: [...this.state.todoList, newListItem]
+    })
   }
 
   render() {
     return (
       <div className='App'>
         <TodoList todoItems={this.state.todoList} toggleCompleted={this.toggleCompleted} />
+        <Form inputValue={this.state.inputValue} inputChange={this.inputChange} handleSubmit={this.handleSubmit} />
       </div>
     )
   }
-}
+};
diff --git a/frontend/components/Form.js b/frontend/components/Form.js
index 30fbc48d..1e4da403 100644
--- a/frontend/components/Form.js
+++ b/frontend/components/Form.js
@@ -3,9 +3,13 @@ import React from 'react'
 export default class Form extends React.Component {
   render() {
     return (
-      <div>
-        Form
-      </div>
+      <form onSubmit={this.props.handleSubmit}>
+        <input 
+          type='text' 
+          onChange={this.props.inputChange}
+          value={this.props.inputValue} />
+        <button>DO THIS!</button>
+      </form>
     )
   }
 }

From 9e5c64ec49d17c034a9007e5610ab508827b0111 Mon Sep 17 00:00:00 2001
From: RealSadLemon <esmodearburk@gmail.com>
Date: Mon, 6 Jun 2022 19:52:53 -0500
Subject: [PATCH 4/4] Created hide completed items button and finished tasks

---
 frontend/components/App.js      | 14 ++++++++++++--
 frontend/components/Todo.js     |  2 ++
 frontend/components/TodoList.js |  2 +-
 frontend/styles/styles.css      |  8 ++++++++
 4 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/frontend/components/App.js b/frontend/components/App.js
index 2f505c8a..54548433 100644
--- a/frontend/components/App.js
+++ b/frontend/components/App.js
@@ -20,6 +20,14 @@ export default class App extends React.Component {
     }
   }
 
+  toggleHidden = ()=>{
+    this.setState({
+      ...this.state,
+      hideCompleted: !this.state.hideCompleted
+    })
+
+  }
+
   toggleCompleted = (itemId)=>{
     this.setState({
       todoList: this.state.todoList.map(item => {
@@ -50,15 +58,17 @@ export default class App extends React.Component {
     }
     this.setState({
       ...this.state,
-      todoList: [...this.state.todoList, newListItem]
+      todoList: [...this.state.todoList, newListItem],
+      inputValue: ''
     })
   }
 
   render() {
     return (
       <div className='App'>
-        <TodoList todoItems={this.state.todoList} toggleCompleted={this.toggleCompleted} />
+        <TodoList todoItems={this.state.todoList} toggleCompleted={this.toggleCompleted} hideCompleted={this.state.hideCompleted} />
         <Form inputValue={this.state.inputValue} inputChange={this.inputChange} handleSubmit={this.handleSubmit} />
+        <button onClick={this.toggleHidden}>{this.state.hideCompleted ? 'Show Completed' : 'Hide Completed'}</button>
       </div>
     )
   }
diff --git a/frontend/components/Todo.js b/frontend/components/Todo.js
index 46dfa2c8..3fe78ebd 100644
--- a/frontend/components/Todo.js
+++ b/frontend/components/Todo.js
@@ -11,6 +11,8 @@ export default class Todo extends React.Component {
         onClick={()=> this.props.toggleCompleted(this.props.todoItem.id)}
         >
         {this.props.todoItem.name}{this.props.todoItem.completed ? ' ✓' : ''}
+        <br/>
+        <br/>
       </div>
     )
   }
diff --git a/frontend/components/TodoList.js b/frontend/components/TodoList.js
index c377a8f2..caafa7d6 100644
--- a/frontend/components/TodoList.js
+++ b/frontend/components/TodoList.js
@@ -13,7 +13,7 @@ export default class TodoList extends React.Component {
         <br />
         <br />
         {this.props.todoItems.map(item => {
-          return <Todo todoItem={item} key={item.id} toggleCompleted={this.props.toggleCompleted} />
+          return <Todo todoItem={item} key={item.id} toggleCompleted={this.props.toggleCompleted} hideCompleted={this.props.hideCompleted} />
         })}
       </div>
     )
diff --git a/frontend/styles/styles.css b/frontend/styles/styles.css
index fda8a420..58e057e3 100644
--- a/frontend/styles/styles.css
+++ b/frontend/styles/styles.css
@@ -83,3 +83,11 @@ ul, form {
 .todo:hover {
   cursor: pointer;
 }
+
+.list-item {
+  margin-left: 1rem;
+}
+
+.hidden {
+  display: none;
+}
\ No newline at end of file