update

package-lock.json

@@ -2158,6 +2158,37 @@
       "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.9.1.tgz",
       "integrity": "sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug=="
     },
+    "axios": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
+      "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
+      "requires": {
+        "follow-redirects": "1.5.10"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "follow-redirects": {
+          "version": "1.5.10",
+          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
+          "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+          "requires": {
+            "debug": "=3.1.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
     "axobject-query": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.1.1.tgz",

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.4.0",
     "@testing-library/user-event": "^7.2.1",
+    "axios": "^0.19.2",
     "bootstrap": "^4.4.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",

src/components/create-todo.component.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import axios from 'axios'
 
 export default class CreateTodo extends React.Component {
     constructor(props) {
@@ -43,6 +44,16 @@ export default class CreateTodo extends React.Component {
         console.log(`Todo Responsible: ${this.state.todo_responsible}`)
         console.log(`Todo Priority: ${this.state.todo_priority}`)
 
+        const newTodo = {
+            todo_description: this.state.todo_description,
+            todo_responsible: this.state.todo_responsible,
+            todo_priority: this.state.todo_priority,
+            todo_completed: this.state.todo_completed
+        }
+
+        axios.post('http://localhost:4000/todos/add', newTodo)
+            .then(res => console.log(res.data))
+
         this.setState({
             todo_description: '',
             todo_responsible: '',

src/components/todos-list.component.js

@@ -1,123 +1,55 @@
-import React from "react";
+import React from "react"
+import { Link } from "react-router-dom"
+import axios from "axios"
+
+const Todo = props => (
+    <tr>
+        <td> {props.todo.todo_description} </td>
+        <td> {props.todo.todo_responsible} </td>
+        <td> {props.todo.todo_priority} </td>
+        <td>
+            <Link to={`/edit/${props.todo._id}`}>Edit</Link>
+        </td>
+    </tr>
+)
 
 export default class TodosList extends React.Component {
-  constructor(props) {
+    constructor(props) {
-    super(props);
+        super(props);
-
+
-    this.state = {
+        this.state = { todos: [] };
-      todo_description: "",
+    }
-      todo_responsible: "",
+
-      todo_priority: "",
+    componentDidMount() {
-      todo_completed: false
+        axios.get('http://localhost:4000/todos/')
-    };
+            .then(response => { this.setState({ todos: response.data }) })
-
+            .catch( error => { console.log(error) })
-    this.onChangeTodoDescription = this.onChangeTodoDescription.bind(this);
+    }
-    this.onChangeTodoResponsible = this.onChangeTodoResponsible.bind(this);
+
-    this.onChangeTodoPriority = this.onChangeTodoPriority.bind(this);
+    todoList() {
-    this.onSubmit = this.onSubmit.bind(this);
+        return this.state.todos.map((currentTodo, item) => {
-  }
+            return <Todo todo={currentTodo} key={item} />
-
+        })
-  onChangeTodoDescription(event) {
+    }
-    this.setState({ todo_description: event.target.value });
+
-  }
+    render() {
-
+        return (
-  onChangeTodoResponsible(event) {
+            <div>
-    this.setState({ todo_responsible: event.target.value });
+                <h3>Todos List</h3>
-  }
+                <table className="table table-striped" style={{ marginTop: 20 }} >
-
+                    <thead>
-  onChangeTodoPriority(event) {
+                        <tr>
-    this.setState({ todo_priority: event.target.value });
+                            <th>Description</th>
-  }
+                            <th>Responsible</th>
-
+                            <th>Priority</th>
-  onSubmit(event) {
+                            <th>Action</th>
-    event.preventDefault();
+                        </tr>
-
+                    </thead>
-    console.log(`Form submitted:`);
+                    <tbody>
-    console.log(`Todo Description: ${this.state.todo_description}`);
+                        { this.todoList() }
-    console.log(`Todo Responsible: ${this.state.todo_responsible}`);
+                    </tbody>
-    console.log(`Todo Priority: ${this.state.todo_priority}`);
+                </table>
-
-    this.setState({
-      todo_description: "",
-      todo_responsible: "",
-      todo_priority: "",
-      todo_completed: false
-    });
-  }
-
-  render() {
-    return (
-      <div>
-        <div style={{ marginTop: 10 }}>
-          <h3>Create New 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"
-                  id="priorityLow"
-                  value="Low"
-                  checked={this.state.todo_priority === "Low"}
-                  onChange={this.onChangeTodoPriority}
-                />
-                <label className="form-check-label">Low</label>
-              </div>
-            </div>
-            <div className="form-group">
-              <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>
-            <div className="form-group">
-              <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-group">
-              <input type="submit" value="Create Todo" className="btn btn-primary"/>
             </div>
-          </form>
+        )
-        </div>
+    }
-      </div>
-    );
-  }
 }