From 37c57638120b85ad2e6918c32877cb573d533e18 Mon Sep 17 00:00:00 2001
From: Kate Ridgle <kroo.2394@gmail.com>
Date: Sat, 8 Jul 2023 23:19:06 -0700
Subject: [PATCH 1/4] added form and divs and inputs

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

diff --git a/frontend/components/App.js b/frontend/components/App.js
index 815684369..5dd96c8eb 100644
--- a/frontend/components/App.js
+++ b/frontend/components/App.js
@@ -1,9 +1,56 @@
-import React from 'react'
+import React from 'react';
+import axios from 'axios';
 
 const URL = 'http://localhost:9000/api/todos'
 
-export default class App extends React.Component {
-  render() {
-    return null
+export default class App extends React.Component { 
+
+  state = {
+    todos: [],
+    error: '',
+    todoNameInput: '',
+  }
+
+  onNameChange = evt => {
+    const {value} = evt.target
+    this.setState({...this.state, todoNameInput: value})
+  }
+
+  fetchAllTodos = () => {
+    axios.get(URL)
+      .then(res => {
+        this.setState({...this.state, todos: res.data.data})
+      })
+      .catch(err => {
+
+      })
   }
+  componentDidMount(){
+  this.fetchAllTodos()
+ }
+  
+ 
+ render() {
+    return (
+
+      <div>
+        <div id="error">Error: {this.state.error}</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 onchange={this.onNameChange} value={this.state.todoNameInput} type="text" placeholder="type todo"></input>
+          <input type="submit"></input>
+          <button>Clear Completed</button>
+        </form>
+      </div>
+    )
+  }
+
 }

From 335dc69573d7f2ffadc621ce78830195b9ab9e46 Mon Sep 17 00:00:00 2001
From: Kate Ridgle <kroo.2394@gmail.com>
Date: Sat, 8 Jul 2023 23:34:20 -0700
Subject: [PATCH 2/4] an issue with text box arising but trucking

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

diff --git a/frontend/components/App.js b/frontend/components/App.js
index 5dd96c8eb..ae33c590a 100644
--- a/frontend/components/App.js
+++ b/frontend/components/App.js
@@ -15,14 +15,28 @@ export default class App extends React.Component {
     const {value} = evt.target
     this.setState({...this.state, todoNameInput: value})
   }
+  postNewTodo = () => {
 
+    axios.post(URL, {name: this.state.todoNameInput})
+      .then(res =>{
+      this.fetchAllTodos()
+      this.setState({...this.state, todoNameInput:''})
+      })
+      .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})
       })
       .catch(err => {
-
+        this.setState({...this.state, error: err.response.data.message})
       })
   }
   componentDidMount(){
@@ -44,8 +58,8 @@ export default class App extends React.Component {
         }
 
         </div>
-        <form id="todoForm">
-          <input onchange={this.onNameChange} value={this.state.todoNameInput} type="text" placeholder="type todo"></input>
+        <form id="todoForm" onSubmit={this.onTodoFormSubmit}>
+          <input value={this.state.todoNameInput} type="text" placeholder="type todo" onchange={this.onNameChange} ></input>
           <input type="submit"></input>
           <button>Clear Completed</button>
         </form>

From 8ef5b2bceaab05a512d7203cb0b289dad64fda9f Mon Sep 17 00:00:00 2001
From: Kate Ridgle <kroo.2394@gmail.com>
Date: Sun, 9 Jul 2023 00:41:58 -0700
Subject: [PATCH 3/4] still input issue but otherwise working

---
 frontend/components/App.js | 48 ++++++++++++++++++++++++++++----------
 1 file changed, 36 insertions(+), 12 deletions(-)

diff --git a/frontend/components/App.js b/frontend/components/App.js
index ae33c590a..a254984c0 100644
--- a/frontend/components/App.js
+++ b/frontend/components/App.js
@@ -9,36 +9,59 @@ export default class App extends React.Component {
     todos: [],
     error: '',
     todoNameInput: '',
+    displayCompleted: true,
   }
 
   onNameChange = evt => {
     const {value} = evt.target
     this.setState({...this.state, todoNameInput: value})
   }
+  
+  resetForm = () =>{
+    this.setState({...this.state, todoNameInput: ''})
+  }
+  
+  setAxiosResponseError = err => this.setState({...this.state, error: err.response.data.message})
+  
   postNewTodo = () => {
 
     axios.post(URL, {name: this.state.todoNameInput})
       .then(res =>{
-      this.fetchAllTodos()
-      this.setState({...this.state, todoNameInput:''})
-      })
-      .catch(err => {
-        this.setState({...this.state, error: err.response.data.message})
+      this.setState({...this.state, todos: this.state.todos.concat(res.data.data)})
+      this.resetForm()
       })
+      .catch(this.setAxiosResponseError)
   }
+  
   onTodoFormSubmit = evt => {
     evt.preventdefault()
     this.postNewTodo()
   }
+  
   fetchAllTodos = () => {
     axios.get(URL)
       .then(res => {
         this.setState({...this.state, todos: res.data.data})
       })
-      .catch(err => {
-        this.setState({...this.state, error: err.response.data.message})
-      })
+      .catch(this.setAxiosResponseError)
+  }
+
+  toggleCompleted = id => evt => {
+    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(err => {
+
+    })
+  }
+  toggleDisplayCompleted = () => {
+    this.setState({...this.state, displayCompleted: this.state.displayCompleted})
   }
+  
   componentDidMount(){
   this.fetchAllTodos()
  }
@@ -52,17 +75,18 @@ export default class App extends React.Component {
         <div id="todos">
             <h2>Todos:</h2>
             {
-          this.state.todos.map(td=> {
-            return <div key={td.id}>{td.name}</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
+          }, [])
         }
 
         </div>
         <form id="todoForm" onSubmit={this.onTodoFormSubmit}>
           <input value={this.state.todoNameInput} type="text" placeholder="type todo" onchange={this.onNameChange} ></input>
           <input type="submit"></input>
-          <button>Clear Completed</button>
         </form>
+        <button onClick={this.toggleDisplayCompleted}>{this.state.displayCompleted ? 'Hide': 'Show'}Clear Completed</button>
       </div>
     )
   }

From f6357434c1c8f3a828ccab7766b30eda8490085e Mon Sep 17 00:00:00 2001
From: Kate Ridgle <kroo.2394@gmail.com>
Date: Sun, 9 Jul 2023 01:03:33 -0700
Subject: [PATCH 4/4] completed task

---
 frontend/components/App.js      | 28 +++++++++++++---------------
 frontend/components/Form.js     | 17 ++++++++++++++++-
 frontend/components/Todo.js     |  7 ++++++-
 frontend/components/TodoList.js | 21 ++++++++++++++++++++-
 4 files changed, 55 insertions(+), 18 deletions(-)

diff --git a/frontend/components/App.js b/frontend/components/App.js
index a254984c0..326c17004 100644
--- a/frontend/components/App.js
+++ b/frontend/components/App.js
@@ -1,5 +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'
 
@@ -72,21 +74,17 @@ export default class App extends React.Component {
 
       <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>
-        <form id="todoForm" onSubmit={this.onTodoFormSubmit}>
-          <input value={this.state.todoNameInput} type="text" placeholder="type todo" onchange={this.onNameChange} ></input>
-          <input type="submit"></input>
-        </form>
-        <button onClick={this.toggleDisplayCompleted}>{this.state.displayCompleted ? 'Hide': 'Show'}Clear Completed</button>
+          <TodoList 
+          todos={this.state.todos}
+          displayCompleted={this.state.displayCompleted}
+          toggleCompleted={this.toggleCompleted}/>
+          <Form 
+          onTodoFormSubmit={this.onTodoFormSubmit}
+          onNameChange={this.onNameChange}
+          todoNameInput={this.state.todoNameInput}
+          toggleDisplayCompleted={this.toggleDisplayCompleted}
+          displayCompleted={this.state.displayCompleted}/>
+        
       </div>
     )
   }
diff --git a/frontend/components/Form.js b/frontend/components/Form.js
index 3932207be..a60851108 100644
--- a/frontend/components/Form.js
+++ b/frontend/components/Form.js
@@ -2,6 +2,21 @@ import React from 'react'
 
 export default class Form extends React.Component {
   render() {
-    return null
+    return (
+    <div>
+      <form id="todoForm" 
+      onSubmit={this.props.onTodoFormSubmit}>
+          <input value={this.props.todoNameInput} 
+          type="text" 
+          placeholder="type todo" 
+          onchange={this.props.onNameChange} ></input>
+          <input type="submit"></input>
+        </form>
+        <button 
+        onClick={this.props.toggleDisplayCompleted}>
+          {this.props.displayCompleted ? 'Hide': 'Show'}
+          Clear Completed</button>
+    </div>
+    )
   }
 }
diff --git a/frontend/components/Todo.js b/frontend/components/Todo.js
index aac687f6d..2b46df564 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 ce08a27ba..1e20229f0 100644
--- a/frontend/components/TodoList.js
+++ b/frontend/components/TodoList.js
@@ -1,7 +1,26 @@
 import React from 'react'
+import Todo from './Todo'
 
 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
+               (
+                <Todo  
+                key={td.id}
+                toggleCompleted={this.props.toggleCompleted}
+                todo={td}/>
+               )
+            return acc
+          }, [])
+        }
+
+        </div>
+    )
   }
 }