From 6d3df36f121bdd0a5a6d5c9f503427c96740bf73 Mon Sep 17 00:00:00 2001
From: james starling <e.s.gbeast@gmail.com>
Date: Sat, 17 Dec 2022 11:38:46 -0500
Subject: [PATCH 1/3] all together

---
 frontend/components/App.js      | 93 +++++++++++++++++++++++++++++++--
 frontend/components/Form.js     | 12 ++++-
 frontend/components/Todo.js     | 18 +++++--
 frontend/components/TodoList.js | 20 +++++--
 frontend/index.js               |  2 +-
 5 files changed, 132 insertions(+), 13 deletions(-)

diff --git a/frontend/components/App.js b/frontend/components/App.js
index 815684369..25215ffa0 100644
--- a/frontend/components/App.js
+++ b/frontend/components/App.js
@@ -1,9 +1,94 @@
-import React from 'react'
+import React from 'react';
+import TodoList from './TodoList';
+import Form from './Form';
+import axios from 'axios';
 
-const URL = 'http://localhost:9000/api/todos'
+const URL = 'http://localhost:9000/api/todos';
 
 export default class App extends React.Component {
+  constructor(){
+    super();
+    this.state = {
+      todoList: [],
+      inputValue: '',
+      hideCompleted: false
+    }
+  }
+
+  componentDidMount(){
+    console.log('App: Component Mounted');
+    axios.get(URL)
+      .then(res => {
+        this.setState({
+          ...this.state,
+          todoList: res.data.data
+        })
+        console.log(res);
+      })
+      .catch(err => console.log('App: The following error occured', err));
+  }
+
+  toggleHidden = ()=>{
+    this.setState({
+      ...this.state,
+      hideCompleted: !this.state.hideCompleted
+    })
+  }
+
+  toggleCompleted = (itemId)=>{
+    this.setState({
+      todoList: this.state.todoList.map(item => {
+        if(itemId === item.id) {
+          return {
+            ...item,
+            completed: !item.completed
+          };
+        };
+        return {...item};
+      })
+    });
+    axios.patch(`${URL}/${itemId}`, { data: [...this.state.todoList] })
+      .then(res =>{
+        console.log('App: Successful patch made', res)
+      })
+      .catch(err =>{
+        console.log('App: Failed patch', err);
+      })
+  };
+
+  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 
+    }
+    axios.post(URL, newListItem)
+      .then(res => {
+        this.setState({
+          ...this.state,
+          todoList: [...this.state.todoList, res.data.data],
+          inputValue: ''
+        })
+      })
+      .catch(err => console.log('App: Failed to post to API', err));
+  }
+
   render() {
-    return null
+    console.log('App: Rendered Component', this.state.todoList);
+    return (
+      <div className='App'>
+        <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>
+    )
   }
-}
+};
\ No newline at end of file
diff --git a/frontend/components/Form.js b/frontend/components/Form.js
index 3932207be..f3f0eaa38 100644
--- a/frontend/components/Form.js
+++ b/frontend/components/Form.js
@@ -2,6 +2,14 @@ import React from 'react'
 
 export default class Form extends React.Component {
   render() {
-    return null
+    return (
+      <form onSubmit={this.props.handleSubmit}>
+        <input 
+          type='text' 
+          onChange={this.props.inputChange}
+          value={this.props.inputValue} />
+        <button>Add me!</button>
+      </form>
+    )
   }
-}
+}
\ No newline at end of file
diff --git a/frontend/components/Todo.js b/frontend/components/Todo.js
index aac687f6d..37989e55f 100644
--- a/frontend/components/Todo.js
+++ b/frontend/components/Todo.js
@@ -1,7 +1,19 @@
-import React from 'react'
+import React, {useEffect} from 'react'
 
 export default class Todo extends React.Component {
+  constructor(){
+    super();
+  }
   render() {
-    return null
+    return (
+      <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 ? ' ✔️' : ''}
+        <br/>
+        <br/>
+      </div>
+    )
   }
-}
+}
\ No newline at end of file
diff --git a/frontend/components/TodoList.js b/frontend/components/TodoList.js
index ce08a27ba..814bfb254 100644
--- a/frontend/components/TodoList.js
+++ b/frontend/components/TodoList.js
@@ -1,7 +1,21 @@
-import React from 'react'
+import React from 'react';
+import Todo from './Todo';
 
 export default class TodoList extends React.Component {
+  constructor(){
+    super();
+  }
+
   render() {
-    return null
+    return (
+      <div className='list'>
+        Todos:
+        <br />
+        <br />
+        {this.props.todoItems.map(item => {
+          return <Todo todoItem={item} key={item.id} toggleCompleted={this.props.toggleCompleted} hideCompleted={this.props.hideCompleted} />
+        })}
+      </div>
+    )
   }
-}
+}
\ No newline at end of file
diff --git a/frontend/index.js b/frontend/index.js
index 2c8561e84..98f251be1 100644
--- a/frontend/index.js
+++ b/frontend/index.js
@@ -6,7 +6,7 @@ import './styles/styles.css'
 
 render(
   <React.StrictMode>
-    <h1>Todo App AJAX</h1>
+    <h1>Todo App </h1>
     <App />
   </React.StrictMode>
   , document.getElementById('root')

From ecb780b7791e3b57f0fd3d96760d8a4e77119a23 Mon Sep 17 00:00:00 2001
From: james starling <e.s.gbeast@gmail.com>
Date: Sat, 17 Dec 2022 12:41:07 -0500
Subject: [PATCH 2/3] progression

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

diff --git a/frontend/components/App.js b/frontend/components/App.js
index 25215ffa0..456b55690 100644
--- a/frontend/components/App.js
+++ b/frontend/components/App.js
@@ -11,9 +11,11 @@ export default class App extends React.Component {
     this.state = {
       todoList: [],
       inputValue: '',
-      hideCompleted: false
+      hideCompleted: false,
+      error:''
     }
   }
+  axioserror = error => this.setState({...this.state, error: error.response.message})
 
   componentDidMount(){
     console.log('App: Component Mounted');
@@ -78,13 +80,15 @@ export default class App extends React.Component {
           inputValue: ''
         })
       })
-      .catch(err => console.log('App: Failed to post to API', err));
+      .catch(
+        this.axioserror());
   }
 
   render() {
     console.log('App: Rendered Component', this.state.todoList);
     return (
       <div className='App'>
+        <div id="error">Error:{this.state.error}</div>
         <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>

From 7364a95fcfb58bfa9a72557899df44062fb4d7c5 Mon Sep 17 00:00:00 2001
From: james starling <e.s.gbeast@gmail.com>
Date: Sat, 17 Dec 2022 15:33:20 -0500
Subject: [PATCH 3/3] css edit border: dash

---
 frontend/components/App.js | 2 +-
 frontend/styles/styles.css | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/frontend/components/App.js b/frontend/components/App.js
index 456b55690..6327737ed 100644
--- a/frontend/components/App.js
+++ b/frontend/components/App.js
@@ -87,7 +87,7 @@ export default class App extends React.Component {
   render() {
     console.log('App: Rendered Component', this.state.todoList);
     return (
-      <div className='App'>
+      <div className='App' id="list">
         <div id="error">Error:{this.state.error}</div>
         <TodoList todoItems={this.state.todoList} toggleCompleted={this.toggleCompleted} hideCompleted={this.state.hideCompleted} />
         <Form inputValue={this.state.inputValue} inputChange={this.inputChange} handleSubmit={this.handleSubmit} />
diff --git a/frontend/styles/styles.css b/frontend/styles/styles.css
index fda8a420d..81ad737f3 100644
--- a/frontend/styles/styles.css
+++ b/frontend/styles/styles.css
@@ -83,3 +83,10 @@ ul, form {
 .todo:hover {
   cursor: pointer;
 }
+.list {
+  display: flex;
+  flex-direction: column;
+  border: solid black 2px;
+  max-width: 100%;
+  height: 100%;
+}
\ No newline at end of file