update

src/App.js

@@ -9,7 +9,7 @@ import TodosList from "./components/todos-list.component";
 
 import logo from "./logo.jpg";
 
-function App() {
+const App = () => {
   return (
     <Router>
       <div className="container">

src/components/create-todo.hooks.component.js

@@ -0,0 +1,115 @@
+import React, { useState } from 'react'
+import axios from 'axios'
+
+const CreateTodo = () => {
+    const [todoState, setTodoState] = useState({
+        todo_description: '',
+        todo_responsible: '',
+        todo_priority: '',
+        todo_completed: false
+    })
+
+   const onChangeTodoDescription = event => {
+        setTodoState({ ...todoState, todo_description: event.target.value })
+    }
+
+   const onChangeTodoResponsible = event => {
+        setTodoState({ ...todoState, todo_responsible: event.target.value })
+    }
+
+   const onChangeTodoPriority = event => {
+        setTodoState({ ...todoState, todo_priority: event.target.value })
+    }
+
+   const onSubmit = event => {
+        event.preventDefault();
+
+        console.log(`Form submitted:`)
+        console.log(`Todo Description: ${todoState.todo_description}`)
+        console.log(`Todo Responsible: ${todoState.todo_responsible}`)
+        console.log(`Todo Priority: ${todoState.todo_priority}`)
+
+        const newTodo = {
+            todo_description: todoState.todo_description,
+            todo_responsible: todoState.todo_responsible,
+            todo_priority: todoState.todo_priority,
+            todo_completed: todoState.todo_completed
+        }
+
+        axios.post('http://localhost:4000/todos/add', newTodo)
+            .then(res => console.log(res.data))
+
+        setTodoState({
+            todo_description: '',
+            todo_responsible: '',
+            todo_priority: '',
+            todo_completed: false
+        })
+    }
+
+    return (
+        <div style={{ marginTop: 10 }}>
+            <h3>Create New Todo</h3>
+            <form onSubmit={onSubmit}>
+                <div className="form-group">
+                    <label>Description: </label>
+                    <input type="text"
+                        className="form-control"
+                        value={todoState.todo_description}
+                        onChange={onChangeTodoDescription}
+                    />
+                </div>
+                <div className="form-group">
+                    <label>Responsible: </label>
+                    <input
+                        type="text"
+                        className="form-control"
+                        value={todoState.todo_responsible}
+                        onChange={onChangeTodoResponsible}
+                    />
+                </div>
+                <div className="form-group">
+                    <div className="form-check form-check-inline">
+                        <input className="form-check-input"
+                            type="radio"
+                            name="priorityOptions"
+                            id="priorityLow"
+                            value="Low"
+                            checked={todoState.todo_priority === 'Low'}
+                            onChange={onChangeTodoPriority}
+                        />
+                        <label className="form-check-label">Low</label>
+                    </div>
+                    <div className="form-check form-check-inline">
+                        <input className="form-check-input"
+                            type="radio"
+                            name="priorityOptions"
+                            id="priorityMedium"
+                            value="Medium"
+                            checked={todoState.todo_priority === 'Medium'}
+                            onChange={onChangeTodoPriority}
+                        />
+                        <label className="form-check-label">Medium</label>
+                    </div>
+                    <div className="form-check form-check-inline">
+                        <input className="form-check-input"
+                            type="radio"
+                            name="priorityOptions"
+                            id="priorityHigh"
+                            value="High"
+                            checked={todoState.todo_priority === 'High'}
+                            onChange={onChangeTodoPriority}
+                        />
+                        <label className="form-check-label">High</label>
+                    </div>
+                </div>
+
+                <div className="form-group">
+                    <input type="submit" value="Create Todo" className="btn btn-primary" />
+                </div>
+            </form>
+        </div>
+    )
+}
+
+export default CreateTodo

src/components/edit-todo.hooks.component.js

@@ -0,0 +1,56 @@
+import React, {useState, useEffect} from 'react'
+import axios from 'axios'
+
+const EditTodo = props => {
+    const [todoState, setTodoState] = useState({
+        todo_description: '',
+        todo_responsible: '',
+        todo_priority: '',
+        todo_completed: false
+    })
+
+    useEffect = () =>{
+        axios.get(`http://localhost:4000/todos/${props.match.params.id}`)
+            .then ( response => {
+                setTodoState({
+                    todo_description: response.data.todo_description,
+                    todo_responsible: response.data.todo_responsible,
+                    todo_priority: response.data.todo_priority,
+                    todo_completed: response.data.todo_completed
+                } )
+                console.log("props.match.params", props.match.params)
+            } )
+            .catch( (error) => { console.log(error) } )
+    }
+
+    const onChangeTodoDescription = event => {
+        this.setState({ ...todoState, todo_description: event.target.value });
+    }
+
+    const onChangeTodoResponsible = event => {
+        this.setState({ ...todoState, todo_responsible: event.target.value });
+    }
+
+    const onChangeTodoPriority = event => {
+        this.setState({ ...todoState, todo_priority: event.target.value });
+    }
+
+    const onChangeTodoCompleted = () => {
+        this.setState({ ...todoState, todo_completed: !todoState.todo_completed });
+    }
+
+    const onSubmit = (event) => {
+        event.preventDefault();
+        const obj = {
+            todo_description: this.state.todo_description,
+            todo_responsible: this.state.todo_responsible,
+            todo_priority: this.state.todo_priority,
+            todo_completed: this.state.todo_completed
+        };
+        console.log(obj);
+        axios.post('http://localhost:4000/todos/update/'+this.props.match.params.id, obj)
+            .then(res => console.log(res.data));
+        
+        this.props.history.push('/');
+    }
+}

src/components/todos-list.hooks.component.js

@@ -0,0 +1,52 @@
+import React, { useState, useEffect } from "react"
+import { Link } from "react-router-dom"
+import axios from "axios"
+
+const Todo = props => (
+    <tr>
+        <td className={props.todo.todo_completed ? 'completed' : ''}>{props.todo.todo_description}</td>
+        <td className={props.todo.todo_completed ? 'completed' : ''}>{props.todo.todo_responsible}</td>
+        <td className={props.todo.todo_completed ? 'completed' : ''}>{props.todo.todo_priority}</td>
+        <td>
+            <Link to={`/edit/${props.todo._id}`}>Edit</Link>
+        </td>
+    </tr>
+)
+
+const TodosList = () => {
+    const [todosState, setTodosState] = useState( [] )
+
+    // Similar to componentDidMount and componentDidUpdate:
+    useEffect = () => {
+        axios.get('http://localhost:4000/todos/')
+            .then(response => { setTodosState( response.data ) })
+            .catch(error => { console.log(error) })
+    }
+
+    const todoList = () => {
+        return todosState.map((currentTodo, index) => {
+            return <Todo todo={currentTodo} key={index} />
+        })
+    }
+
+    return (
+        <div>
+            <h3>Todos List</h3>
+            <table className="table table-striped" style={{ marginTop: 20 }} >
+                <thead>
+                    <tr>
+                        <th>Description</th>
+                        <th>Responsible</th>
+                        <th>Priority</th>
+                        <th>Action</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {todoList()}
+                </tbody>
+            </table>
+        </div>
+    )
+}
+
+export default TodosList