update

src/App.css

@@ -1,3 +0,0 @@
-Body {
-  /* background-color: gray!important; */
-}

src/App.js

@@ -1,5 +1,4 @@
 import React from "react";
-import "./App.css";
 import { BrowserRouter as Router, Route, Link } from "react-router-dom";
 
 import "bootstrap/dist/css/bootstrap.min.css";
@@ -14,19 +13,9 @@ function App() {
   return (
     <Router>
       <div className="container">
-        <nav className="navbar navbar-expand-lg navbar-light bg-light">
+        <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
-          <a
+          <a className="navbar-brand" href="https://codingthesmartway.com" target="_blank" rel="noopener noreferrer" >
-            className="navbar-brand"
+            <img src={logo} width="30" height="30" alt="CodingTheSmartWay.com" />
-            href="https://codingthesmartway.com"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <img
-              src={logo}
-              width="30"
-              height="30"
-              alt="CodingTheSmartWay.com"
-            />
           </a>
           <Link to="/" className="navbar-brand">
             MERN-Stack Todo App

src/components/edit-todo.component.js

@@ -1,10 +1,148 @@
 import React from 'react'
+import axios from 'axios'
 
 export default class EditTodo extends React.Component {
+
+    constructor(props) {
+        super(props)
+
+        this.onChangeTodoDescription = this.onChangeTodoDescription.bind(this);
+        this.onChangeTodoResponsible = this.onChangeTodoResponsible.bind(this);
+        this.onChangeTodoPriority = this.onChangeTodoPriority.bind(this);
+        this.onChangeTodoCompleted = this.onChangeTodoCompleted.bind(this);
+        this.onSubmit = this.onSubmit.bind(this);
+
+        this.state = {
+            todo_description: '',
+            todo_responsible: '',
+            todo_priority: '',
+            todo_completed: false
+        }
+    }
+
+    componentDidMount() {
+        axios.get(`http://localhost:4000/todos/${this.props.match.params.id}`)
+            .then ( response => {
+                this.setState({
+                    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("this.props.match.params", this.props.match.params)
+            } )
+            .catch( (error) => { console.log(error) } )
+    }
+
+    onChangeTodoDescription(e) {
+        this.setState({ todo_description: e.target.value });
+    }
+
+    onChangeTodoResponsible(e) {
+        this.setState({ todo_responsible: e.target.value });
+    }
+
+    onChangeTodoPriority(e) {
+        this.setState({ todo_priority: e.target.value });
+    }
+
+    onChangeTodoCompleted(e) {
+        this.setState({ todo_completed: !this.state.todo_completed });
+    }
+
+    onSubmit(e) {
+        e.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('/');
+    }
+
     render() {
         return (
             <div>
-                <p>Welcome to Edit Todo Component!!</p>
+                <h3 align="center" >Update Todo</h3>
+                <form onSubmit={this.onSubmit} >
+                    <div className="form-group" >
+                        <label>Description: </label>
+                        <input 
+                            type="text"
+                            className="form-control"
+                            value={this.state.todo_description}
+                            onChange={this.onChangeTodoDescription}
+                        />
+                    </div>
+                    <div className="form-group" >
+                        <label>Responsible: </label>
+                        <input 
+                            type="text"
+                            className="form-control"
+                            value={this.state.todo_responsible}
+                            onChange={this.onChangeTodoResponsible}
+                            />
+                    </div>
+                    <div className="form-group">
+                        <div className="form-check form-check-inline">
+                            <input 
+                                className="form-check-input"
+                                type="radio"
+                                name="priorityOptions"
+                                value="Low"
+                                checked={this.state.todo_priority==='Low'} 
+                                onChange={this.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={this.state.todo_priority==='Medium'} 
+                                    onChange={this.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={this.state.todo_priority==='High'} 
+                                    onChange={this.onChangeTodoPriority}
+                                    />
+                            <label className="form-check-label">High</label>
+                        </div>
+                    </div>
+                    <div className="form-check">
+                        <input  className="form-check-input"
+                                id="completedCheckbox"
+                                type="checkbox"
+                                name="completedCheckbox"
+                                onChange={this.onChangeTodoCompleted}
+                                checked={this.state.todo_completed}
+                                value={this.state.todo_completed}
+                                />
+                        <label className="form-check-label" htmlFor="completedCheckbox">
+                            Completed
+                        </label>
+                    </div>
+
+                    <br />
+
+                    <div className="form-group">
+                        <input type="submit" value="Update Todo" className="btn btn-primary" />
+                    </div>
+                </form>
             </div>
         )
     }

src/components/todos-list.component.js

@@ -4,9 +4,9 @@ import axios from "axios"
 
 const Todo = props => (
     <tr>
-        <td> {props.todo.todo_description} </td>
+        <td className={props.todo.todo_completed ? 'completed' : ''}>{props.todo.todo_description}</td>
-        <td> {props.todo.todo_responsible} </td>
+        <td className={props.todo.todo_completed ? 'completed' : ''}>{props.todo.todo_responsible}</td>
-        <td> {props.todo.todo_priority} </td>
+        <td className={props.todo.todo_completed ? 'completed' : ''}>{props.todo.todo_priority}</td>
         <td>
             <Link to={`/edit/${props.todo._id}`}>Edit</Link>
         </td>
@@ -27,8 +27,8 @@ export default class TodosList extends React.Component {
     }
 
     todoList() {
-        return this.state.todos.map((currentTodo, item) => {
+        return this.state.todos.map((currentTodo, index) => {
-            return <Todo todo={currentTodo} key={item} />
+            return <Todo todo={currentTodo} key={index} />
         })
     }
 

src/index.css

@@ -11,3 +11,7 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+.completed {
+  text-decoration: line-through;
+}