pull

frontend/components/App.js

@@ -1,9 +1,98 @@
-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,
+      error:''
+    }
+  }
+  axioserror = error => this.setState({...this.state, error: error.response.message})
+
+  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(
+        this.axioserror());
+  }
+
   render() {
-    return null
+    console.log('App: Rendered Component', this.state.todoList);
+    return (
+      <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} />
+        <button onClick={this.toggleHidden}>{this.state.hideCompleted ? 'Show Completed' : 'Hide Completed'}</button>
+      </div>
+    )
   }
-}
+};

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>
+    )
   }
-}
+}

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>
+    )
   }
-}
+}

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>
+    )
   }
-}
+}

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')

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%;
+}