From 55f112bde00dcbf9af54bee275010ee30b8055a4 Mon Sep 17 00:00:00 2001
From: Anthony Climer <anthonyclimer0925@gmail.com>
Date: Fri, 10 Feb 2023 18:34:54 -0500
Subject: [PATCH 01/10] Completed a portion of the project. Projecting the data
 fetched from the api

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

diff --git a/frontend/components/App.js b/frontend/components/App.js
index 815684369..4edd4405f 100644
--- a/frontend/components/App.js
+++ b/frontend/components/App.js
@@ -1,9 +1,44 @@
 import React from 'react'
+import axios from 'axios'
 
 const URL = 'http://localhost:9000/api/todos'
 
 export default class App extends React.Component {
+  constructor (){
+    super();
+    this.state = {
+      todos: [],
+    }
+  }
+
+  fetchAllTodos = () =>{
+    axios.get(URL)
+    .then(res => {
+      this.setState({...this.state, todos: res.data.data})
+    })
+    .catch(err => console.error(err))
+  }
+
+  componentDidMount(){
+    this.fetchAllTodos()
+  }
   render() {
-    return null
+    return (
+      <div>
+        <div id = 'todos'>
+          <h2>Todos:</h2>
+          {
+            this.state.todos.map( td => {
+              return <div key = {td.id}>{td.name}</div>
+            })
+          }
+        </div>
+        <form id ='todoForm'>
+          <input type = 'text' placeholder='Type todo'></input>
+          <input type = 'submit'></input>
+          <button>Clear the completed</button>
+        </form>
+      </div>
+    )
   }
 }

From 533d80613d42224bafab0fb6c1bba5346020fede Mon Sep 17 00:00:00 2001
From: Anthony Climer <anthonyclimer0925@gmail.com>
Date: Fri, 10 Feb 2023 18:41:54 -0500
Subject: [PATCH 02/10] Added an error message for an incident

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

diff --git a/frontend/components/App.js b/frontend/components/App.js
index 4edd4405f..aa2ab00d9 100644
--- a/frontend/components/App.js
+++ b/frontend/components/App.js
@@ -8,6 +8,7 @@ export default class App extends React.Component {
     super();
     this.state = {
       todos: [],
+      error: '',
     }
   }
 
@@ -16,7 +17,9 @@ export default class App extends React.Component {
     .then(res => {
       this.setState({...this.state, todos: res.data.data})
     })
-    .catch(err => console.error(err))
+    .catch(err => {
+      this.setState({...this.state, error: err.response.data.message})
+    })
   }
 
   componentDidMount(){
@@ -25,6 +28,7 @@ export default class App extends React.Component {
   render() {
     return (
       <div>
+        <div id='error'>Error:{this.state.error}</div>
         <div id = 'todos'>
           <h2>Todos:</h2>
           {

From 032ff08a2216a1fef7340d47b36eaa7d17db7b7d Mon Sep 17 00:00:00 2001
From: Anthony Climer <anthonyclimer0925@gmail.com>
Date: Fri, 10 Feb 2023 18:53:05 -0500
Subject: [PATCH 03/10] The input is now able to be changed by the user and not
 by the component state itself

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

diff --git a/frontend/components/App.js b/frontend/components/App.js
index aa2ab00d9..7c35fea07 100644
--- a/frontend/components/App.js
+++ b/frontend/components/App.js
@@ -9,9 +9,15 @@ export default class App extends React.Component {
     this.state = {
       todos: [],
       error: '',
+      todoNameInput: '',
     }
   }
 
+  onTodoNameInputChange = evt => {
+    const {value} = evt.target
+    this.setState({...this.state, todoNameInput: value})
+  }
+
   fetchAllTodos = () =>{
     axios.get(URL)
     .then(res => {
@@ -38,7 +44,7 @@ export default class App extends React.Component {
           }
         </div>
         <form id ='todoForm'>
-          <input type = 'text' placeholder='Type todo'></input>
+          <input value = {this.state.todoNameInput} onChange = {this.onTodoNameInputChange} type = 'text' placeholder='Type todo'></input>
           <input type = 'submit'></input>
           <button>Clear the completed</button>
         </form>

From dcb67040904f6bc8a8d759e814fc6ed9e1e22d1d Mon Sep 17 00:00:00 2001
From: Anthony Climer <anthonyclimer0925@gmail.com>
Date: Fri, 10 Feb 2023 19:20:52 -0500
Subject: [PATCH 04/10] Completed the submit and add to the state feature

---
 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 7c35fea07..9ba485dfe 100644
--- a/frontend/components/App.js
+++ b/frontend/components/App.js
@@ -18,10 +18,24 @@ export default class App extends React.Component {
     this.setState({...this.state, todoNameInput: value})
   }
 
+  postNewTodo = () => {
+    axios.post(URL, {name: this.state.todoNameInput})
+    .then(res => {
+      this.fetchAllTodos()
+    })
+    .catch(err => this.setState({...this.state, error: err.response.data.message }))
+  }
+
+  onTodoFormSubmit = evt => {
+    evt.preventDefault()
+    this.postNewTodo()
+  }
+
   fetchAllTodos = () =>{
     axios.get(URL)
     .then(res => {
       this.setState({...this.state, todos: res.data.data})
+      this.setState({...this.state, todoNameInput: ''})
     })
     .catch(err => {
       this.setState({...this.state, error: err.response.data.message})
@@ -43,7 +57,7 @@ export default class App extends React.Component {
             })
           }
         </div>
-        <form id ='todoForm'>
+        <form id ='todoForm'  onSubmit ={this.onTodoFormSubmit}>
           <input value = {this.state.todoNameInput} onChange = {this.onTodoNameInputChange} type = 'text' placeholder='Type todo'></input>
           <input type = 'submit'></input>
           <button>Clear the completed</button>

From 618db3b5531e47e9db1689733c9b9a5889857faa Mon Sep 17 00:00:00 2001
From: Anthony Climer <anthonyclimer0925@gmail.com>
Date: Fri, 10 Feb 2023 19:35:12 -0500
Subject: [PATCH 05/10] I have erased the dry code

---
 frontend/components/App.js | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/frontend/components/App.js b/frontend/components/App.js
index 9ba485dfe..b0dcfd8b1 100644
--- a/frontend/components/App.js
+++ b/frontend/components/App.js
@@ -23,23 +23,24 @@ export default class App extends React.Component {
     .then(res => {
       this.fetchAllTodos()
     })
-    .catch(err => this.setState({...this.state, error: err.response.data.message }))
+    .catch(this.setAxiosResponseErr)
   }
 
   onTodoFormSubmit = evt => {
     evt.preventDefault()
     this.postNewTodo()
   }
-
+  setAxiosResponseErr = (err) => this.setState({...this.state, error: err.response.data.message})
+  resetForm = () => 
+    this.setState({...this.state, todoNameInput: ''})
+  
   fetchAllTodos = () =>{
     axios.get(URL)
     .then(res => {
       this.setState({...this.state, todos: res.data.data})
-      this.setState({...this.state, todoNameInput: ''})
-    })
-    .catch(err => {
-      this.setState({...this.state, error: err.response.data.message})
+      this.resetForm()
     })
+    .catch(this.setAxiosResponseErr)
   }
 
   componentDidMount(){

From 94b2a9ed7542d53c4d4165e18a9bd2c0b7fa1760 Mon Sep 17 00:00:00 2001
From: Anthony Climer <anthonyclimer0925@gmail.com>
Date: Fri, 10 Feb 2023 20:16:40 -0500
Subject: [PATCH 06/10] Did the checks for the completing tasks

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

diff --git a/frontend/components/App.js b/frontend/components/App.js
index b0dcfd8b1..76e5174c8 100644
--- a/frontend/components/App.js
+++ b/frontend/components/App.js
@@ -21,7 +21,8 @@ export default class App extends React.Component {
   postNewTodo = () => {
     axios.post(URL, {name: this.state.todoNameInput})
     .then(res => {
-      this.fetchAllTodos()
+      this.setState({...this.state, todos: this.state.todos.concat(res.data.data) })
+      this.resetForm()
     })
     .catch(this.setAxiosResponseErr)
   }
@@ -38,7 +39,17 @@ export default class App extends React.Component {
     axios.get(URL)
     .then(res => {
       this.setState({...this.state, todos: res.data.data})
-      this.resetForm()
+    })
+    .catch(this.setAxiosResponseErr)
+  }
+
+  toggleCompleted = id => () => {
+    axios.patch(`${URL}/${id}`)
+    .then(res => {
+      this.setState({...this.state, todos: this.state.todos.map(td => {
+        if(td.id !== id) return td
+        return res.data.data
+      })})
     })
     .catch(this.setAxiosResponseErr)
   }
@@ -54,7 +65,7 @@ export default class App extends React.Component {
           <h2>Todos:</h2>
           {
             this.state.todos.map( td => {
-              return <div key = {td.id}>{td.name}</div>
+              return <div onClick={this.toggleCompleted(td.id)} key = {td.id}>{td.name}{td.completed ? '✔️': ''}</div>
             })
           }
         </div>

From 88de83e7bf373f0fdaa4a5157202ce186579ca30 Mon Sep 17 00:00:00 2001
From: Anthony Climer <anthonyclimer0925@gmail.com>
Date: Fri, 10 Feb 2023 20:39:35 -0500
Subject: [PATCH 07/10] The appearing and dissapearing part(completed and
 uncompleted) of the application works

---
 frontend/components/App.js | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/frontend/components/App.js b/frontend/components/App.js
index 76e5174c8..2a0f6c419 100644
--- a/frontend/components/App.js
+++ b/frontend/components/App.js
@@ -10,6 +10,7 @@ export default class App extends React.Component {
       todos: [],
       error: '',
       todoNameInput: '',
+      displayCompleted: true,
     }
   }
 
@@ -54,6 +55,10 @@ export default class App extends React.Component {
     .catch(this.setAxiosResponseErr)
   }
 
+  toggleDisplayCompleted=() => {
+    this.setState({...this.state, displayCompleted: !this.state.displayCompleted})
+  }
+
   componentDidMount(){
     this.fetchAllTodos()
   }
@@ -64,15 +69,20 @@ export default class App extends React.Component {
         <div id = 'todos'>
           <h2>Todos:</h2>
           {
-            this.state.todos.map( td => {
-              return <div onClick={this.toggleCompleted(td.id)} key = {td.id}>{td.name}{td.completed ? '✔️': ''}</div>
-            })
+            this.state.todos.reduce((acc, td ) => {
+              if(this.state.displayCompleted || !td.completed) return acc.concat(
+                <div onClick={this.toggleCompleted(td.id)} key = {td.id}>{td.name}{td.completed ? '✔️': ''}</div>
+              )
+              return acc
+            },[])
+              // return <div onClick={this.toggleCompleted(td.id)} key = {td.id}>{td.name}{td.completed ? '✔️': ''}</div>
+            
           }
         </div>
         <form id ='todoForm'  onSubmit ={this.onTodoFormSubmit}>
           <input value = {this.state.todoNameInput} onChange = {this.onTodoNameInputChange} type = 'text' placeholder='Type todo'></input>
           <input type = 'submit'></input>
-          <button>Clear the completed</button>
+          <button onClick ={this.toggleDisplayCompleted}>{this.state.displayCompleted ? 'Hide':'Show'} the completed</button>
         </form>
       </div>
     )

From 937f1de4ab32efa8193cb6e91f8f4af6aee3b772 Mon Sep 17 00:00:00 2001
From: Anthony Climer <anthonyclimer0925@gmail.com>
Date: Fri, 10 Feb 2023 20:57:30 -0500
Subject: [PATCH 08/10] The form component has been filled out

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

diff --git a/frontend/components/App.js b/frontend/components/App.js
index 2a0f6c419..1bc409951 100644
--- a/frontend/components/App.js
+++ b/frontend/components/App.js
@@ -1,5 +1,6 @@
 import React from 'react'
 import axios from 'axios'
+import Form from './Form'
 
 const URL = 'http://localhost:9000/api/todos'
 
@@ -75,15 +76,15 @@ export default class App extends React.Component {
               )
               return acc
             },[])
-              // return <div onClick={this.toggleCompleted(td.id)} key = {td.id}>{td.name}{td.completed ? '✔️': ''}</div>
-            
           }
         </div>
-        <form id ='todoForm'  onSubmit ={this.onTodoFormSubmit}>
-          <input value = {this.state.todoNameInput} onChange = {this.onTodoNameInputChange} type = 'text' placeholder='Type todo'></input>
-          <input type = 'submit'></input>
-          <button onClick ={this.toggleDisplayCompleted}>{this.state.displayCompleted ? 'Hide':'Show'} the completed</button>
-        </form>
+        <Form 
+        onTodoFormSubmit = {this.onTodoFormSubmit}
+        onTodoNameInputChange = {this.onTodoNameInputChange}
+        toggleDisplayCompleted ={this.toggleDisplayCompleted}
+        displayCompleted = {this.state.displayCompleted}
+        todoNameInput = {this.state.todoNameInput}
+        />
       </div>
     )
   }
diff --git a/frontend/components/Form.js b/frontend/components/Form.js
index 3932207be..aaaea4a32 100644
--- a/frontend/components/Form.js
+++ b/frontend/components/Form.js
@@ -2,6 +2,18 @@ import React from 'react'
 
 export default class Form extends React.Component {
   render() {
-    return null
+    return (
+      <>
+              <form id ='todoForm'
+              onSubmit ={this.props.onTodoFormSubmit}>
+                <input value = {this.props.todoNameInput} onChange = {this.props.onTodoNameInputChange} 
+                type = 'text' 
+                placeholder='Type todo'></input>
+                <input type = 'submit'></input>
+                <button onClick ={this.props.toggleDisplayCompleted}>
+                  {this.props.displayCompleted ? 'Hide':'Show'} the completed</button>
+        </form>
+      </>
+    )
   }
 }

From 127bcf7aba1b045b361741ffa3a25e1edee5d817 Mon Sep 17 00:00:00 2001
From: Anthony Climer <anthonyclimer0925@gmail.com>
Date: Fri, 10 Feb 2023 21:02:50 -0500
Subject: [PATCH 09/10] The formList is dun

---
 frontend/components/App.js      | 17 ++++++-----------
 frontend/components/TodoList.js | 14 +++++++++++++-
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/frontend/components/App.js b/frontend/components/App.js
index 1bc409951..a40263096 100644
--- a/frontend/components/App.js
+++ b/frontend/components/App.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import axios from 'axios'
 import Form from './Form'
+import TodoList from './TodoList'
 
 const URL = 'http://localhost:9000/api/todos'
 
@@ -67,17 +68,11 @@ export default class App extends React.Component {
     return (
       <div>
         <div id='error'>Error:{this.state.error}</div>
-        <div id = 'todos'>
-          <h2>Todos:</h2>
-          {
-            this.state.todos.reduce((acc, td ) => {
-              if(this.state.displayCompleted || !td.completed) return acc.concat(
-                <div onClick={this.toggleCompleted(td.id)} key = {td.id}>{td.name}{td.completed ? '✔️': ''}</div>
-              )
-              return acc
-            },[])
-          }
-        </div>
+        <TodoList
+        todos={this.state.todos}
+        displayCompleted={this.state.displayCompleted}
+        toggleCompleted={this.toggleCompleted}
+        />
         <Form 
         onTodoFormSubmit = {this.onTodoFormSubmit}
         onTodoNameInputChange = {this.onTodoNameInputChange}
diff --git a/frontend/components/TodoList.js b/frontend/components/TodoList.js
index ce08a27ba..602eb6b5a 100644
--- a/frontend/components/TodoList.js
+++ b/frontend/components/TodoList.js
@@ -2,6 +2,18 @@ import React from 'react'
 
 export default class TodoList extends React.Component {
   render() {
-    return null
+    return (
+      <div id = 'todos'>
+      <h2>Todos:</h2>
+      {
+        this.props.todos.reduce((acc, td ) => {
+          if(this.props.displayCompleted || !td.completed) return acc.concat(
+            <div onClick={this.props.toggleCompleted(td.id)} key = {td.id}>{td.name}{td.completed ? '✔️': ''}</div>
+          )
+          return acc
+        },[])
+      }
+    </div>
+    )
   }
 }

From 79647eafba735b7621d21797b63081252307f526 Mon Sep 17 00:00:00 2001
From: Anthony Climer <anthonyclimer0925@gmail.com>
Date: Fri, 10 Feb 2023 21:12:39 -0500
Subject: [PATCH 10/10] I have completed the p

---
 frontend/components/Todo.js     | 7 ++++++-
 frontend/components/TodoList.js | 8 ++++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/frontend/components/Todo.js b/frontend/components/Todo.js
index aac687f6d..5db721458 100644
--- a/frontend/components/Todo.js
+++ b/frontend/components/Todo.js
@@ -2,6 +2,11 @@ import React from 'react'
 
 export default class Todo extends React.Component {
   render() {
-    return null
+    return (
+      <div onClick={this.props.toggleCompleted(this.props.todo.id)} 
+      >
+        {this.props.todo.name}{this.props.todo.completed ? '✔️': ''}
+      </div>
+    )
   }
 }
diff --git a/frontend/components/TodoList.js b/frontend/components/TodoList.js
index 602eb6b5a..8b65f5bfa 100644
--- a/frontend/components/TodoList.js
+++ b/frontend/components/TodoList.js
@@ -1,5 +1,5 @@
 import React from 'react'
-
+import Todo from './Todo'
 export default class TodoList extends React.Component {
   render() {
     return (
@@ -8,7 +8,11 @@ export default class TodoList extends React.Component {
       {
         this.props.todos.reduce((acc, td ) => {
           if(this.props.displayCompleted || !td.completed) return acc.concat(
-            <div onClick={this.props.toggleCompleted(td.id)} key = {td.id}>{td.name}{td.completed ? '✔️': ''}</div>
+          <Todo
+            key = {td.id}
+            toggleCompleted={this.props.toggleCompleted}
+            todo={td}
+          />
           )
           return acc
         },[])