Finished proj

frontend/components/App.js

@@ -1,9 +1,114 @@
 import React from 'react'
+import axios from "axios"
+import TodoList from "./TodoList"
+import Form from "./Form"
 
 const URL = 'http://localhost:9000/api/todos'
 
 export default class App extends React.Component {
+  constructor(){
+    super();
+    this.state ={
+      todos: [],
+      error: {
+        message: "",
+        status: false
+      },
+      todoNameInput: ""
+    }
+  }
+
+
+  handleClearButton = () => {
+    this.setState({
+      ...this.state,
+      todos: this.state.todos.filter(element => {
+        return (element.completed === false)
+      })
+    })
+  }
+
+    toggleClick = (id) => {
+      axios.patch(`${URL}/${id}`)
+      .then(res => {
+        this.setState({
+          ...this.state, todos: this.state.todos.map(element => {
+            if (element.id !== id) return element
+            return res.data.data
+          })
+        })
+      })
+      .catch(this.setAxiosResponseError)
+    }
+
+
+
+    onChangeTodoInput = (event) => {
+      const { value } = event.target
+      this.setState({
+        ...this.state,
+        todoNameInput: value
+      })
+    }
+
+    setAxiosResponseError = err => this.setState({
+      ...this.state, error: {
+        message: err.response.data.message,
+        status: true
+      }
+    })
+
+    fetchAllTodos = () => {
+      axios.get(URL)
+      .then(res => {
+        this.setState({
+          ...this.state, todos: res.data.data, error: {}
+        })
+      })
+      .catch(this.setAxiosResponseError)
+    }
+
+    resetForm = () => {
+      this.setState({
+        ...this.state,
+        todoNameInput: ""
+      })
+    }
+
+    postNewTodo = () => {
+      axios.post(URL, {name: this.state.todoNameInput})
+      .then(res => {
+        this.setState({
+          ...this.state,
+          todos: this.state.todos.concat(res.data.data),
+          error: {
+            message: "",
+            status: false
+          }
+        })
+        this.resetForm();
+      })
+      .catch(this.setAxiosResponseError)
+    }
+
+    onSubmitTodo = (event) => {
+      event.preventDefault();
+      this.postNewTodo();
+    }
+
+    componentDidMount(){
+      this.fetchAllTodos();
+    }
+
   render() {
-    return null
+    const { todos } = this.state;
+    return (
+      <div>
+        {this.state.error.status? <div id="error">Error: {this.state.error.message}</div> : <></>}
+        <h2>Todos:</h2>
+        <TodoList data={todos} toggleClick={this.toggleClick}/>
+        <Form todoInput={this.state.todoNameInput} onChangeTodoInput={this.onChangeTodoInput} onSubmitTodo={this.onSubmitTodo} handleClearButton={this.handleClearButton}></Form>
+      </div>
+    )
   }
 }

frontend/components/Form.js

@@ -1,7 +1,34 @@
 import React from 'react'
 
 export default class Form extends React.Component {
+
+  inputChangeHandler = (event) => {
+    this.props.onChangeTodoInput(event)
+  }
+
+  handleSubmit = (event) => {
+    this.props.onSubmitTodo(event);
+  }
+
+  handleClear = () => {
+    this.props.handleClearButton();
+  }
+
+
   render() {
-    return null
+    return (
+      <div>
+      <form id="todoForm" onSubmit={this.handleSubmit}> 
+        <input
+        value={this.props.todoInput}
+        onChange={this.inputChangeHandler}
+        type="text"
+        placeholder='Type todo'
+        />
+        <button type="submit">Submit</button>
+      </form>
+      <button onClick={this.handleClear}>Clear Completed</button>
+      </div>
+    )
   }
 }

frontend/components/Todo.js

@@ -1,7 +1,14 @@
 import React from 'react'
 
 export default class Todo extends React.Component {
+
+  handleClick = () => {
+    this.props.toggleClick(this.props.data.id)
+  }
+
   render() {
-    return null
+    return (
+      <li onClick={this.handleClick}>{this.props.data.name}{this.props.data.completed? "✔" : ""}</li>
+    )
   }
 }

frontend/components/TodoList.js

@@ -1,7 +1,15 @@
 import React from 'react'
+import Todo from "./Todo"
 
 export default class TodoList extends React.Component {
   render() {
-    return null
+
+    return (
+      <ul>
+        {this.props.data.map(element => {
+          return(<Todo key={element.id} data={element} toggleClick={this.props.toggleClick}/>)
+        })}
+      </ul>
+    )
   }
 }