[WDFT - BCN - 012021] Clément Vallat

package.json

@@ -3,8 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.21.1",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "^3.4.3"
   },
   "scripts": {

src/App.js

@@ -1,25 +1,19 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
 import './App.css';
+import { Switch, Route} from 'react-router-dom'; 
+
+import InputField from './components/InputField';
+import TaskList from './components/TaskList'
 
 class App extends Component {
   render() {
     return (
       <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-          </p>
-          <a
-            className="App-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
-        </header>
+      <h1>Welcome to your todo list</h1>
+      <Switch>
+        <Route exact path="/" component={InputField} />
+        <Route exact path="/:id" component={TaskList} />
+      </Switch>
       </div>
     );
   }

src/components/InputField.js

@@ -0,0 +1,85 @@
+import React, { Component } from "react";
+import todoService from "./../todo-service/todo-service";
+import {Link} from 'react-router-dom';
+
+class InputField extends Component {
+  state = {
+    title: "",
+    body: "",
+    todos: [],
+  };
+
+  handleChange = (event) => {
+    const { name, value } = event.target;
+    this.setState({ [name]: value });
+  };
+
+  handleSubmitForm = (event) => {
+    event.preventDefault();
+    const { title, body } = this.state;
+    todoService.createTodo(title, body).then((data) => {
+      this.updateTodos();
+    });
+  };
+
+  updateTodos = () => {
+    todoService
+      .seeAllTodos()
+      .then((data) => this.setState({ todos: data, title: "", body: "" }));
+  };
+
+  componentDidMount = () => {
+    this.updateTodos();
+  };
+
+  handleDelete = (id) => {
+      console.log(id);
+
+    todoService.deleteOneTodo(id).then((data) => {
+      console.log("successfuly deleted");
+      this.updateTodos();
+    });
+  };
+
+  render() {
+    return (
+      <div>
+        <form onSubmit={this.handleSubmitForm}>
+          <h2>Create new task</h2>
+          <label>Title</label>
+          <input
+            type="text"
+            name="title"
+            onChange={(event) => this.handleChange(event)}
+          ></input>
+
+          <label>body</label>
+          <input
+            type="text"
+            name="body"
+            onChange={(event) => this.handleChange(event)}
+          ></input>
+
+          <button>Add to the list</button>
+        </form>
+
+        <h2>Todos</h2>
+        <section>
+          {this.state.todos.map((el) => {
+            return (
+                    <section key={el._id}>
+                <Link to={`/${el._id}`}>
+                        <h1>Title: {el.title}</h1>
+                </Link>
+                        <p>{el.body}</p>
+                        <button onClick={() => this.handleDelete(`${el._id}`)}>Delete</button>
+                    </section>
+            );
+          })}
+        </section>
+      </div>
+    );
+  }
+}
+
+export default InputField;

src/components/TaskList.js

@@ -0,0 +1,92 @@
+import React, { Component } from "react";
+import todoService from "./../todo-service/todo-service";
+
+export class TaskList extends Component {
+  state = {
+    todo: [],
+    updateMode: false,
+    title: "",
+    body: "",
+  };
+
+  handleDelete = (id) => {
+    console.log(id);
+    todoService.deleteOneTodo(id).then((data) => {
+      console.log("successfuly deleted");
+    });
+    this.props.history.push("/");
+  };
+
+  componentDidMount = () => {
+    const { id } = this.props.match.params;
+    todoService.seeOneTodo(id).then((data) => {
+      console.log(data);
+      this.setState({ todo: data });
+    });
+  };
+
+  showUpdateMode = () => {
+    this.setState({ updateMode: !this.state.updateMode });
+  };
+
+  handleChange = (event) => {
+    const { name, value } = event.target;
+    this.setState({ [name]: value });
+  };
+
+  updateMode = (event) => {
+    event.preventDefault();
+    const { id } = this.props.match.params;
+    const { title, body } = this.state;
+    todoService
+      .updateTodo(id, { title, body })
+      .then((data) => this.setState({ todo: data }));
+  };
+
+  render() {
+    return (
+      <div>
+        <h2>TO DO</h2>
+        <section key={this.state.todo._id}>
+          <h1>Title: {this.state.todo.title}</h1>
+          <p>Description: {this.state.todo.body}</p>
+          <button onClick={() => this.handleDelete(`${this.state.todo._id}`)}>
+            Delete
+          </button>
+          <hr />
+          <button onClick={this.props.history.goBack}>Go Back</button>
+          <hr />
+
+          <button onClick={this.showUpdateMode}>update</button>
+
+          {this.state.updateMode && (
+            <section>
+              <h4>Update your task</h4>
+
+              <form onSubmit={this.updateMode}>
+                <h2>Create new task</h2>
+                <label>Title</label>
+                <input
+                  type="text"
+                  name="title"
+                  onChange={(event) => this.handleChange(event)}
+                ></input>
+
+                <label>body</label>
+                <input
+                  type="text"
+                  name="body"
+                  onChange={(event) => this.handleChange(event)}
+                ></input>
+
+                <button>Update Task</button>
+              </form>
+            </section>
+          )}
+        </section>
+      </div>
+    );
+  }
+}
+
+export default TaskList;

src/index.js

@@ -3,8 +3,14 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
+import { BrowserRouter as Router } from 'react-router-dom';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+
+ReactDOM.render(
+    <Router>
+        <App />
+    </Router>, 
+    document.getElementById('root'));
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.

src/todo-service/todo-service.js

@@ -0,0 +1,53 @@
+import axios from "axios";
+
+class TodoService {
+  constructor() {
+    this.api = axios.create({
+      baseURL: "http://localhost:4000/api/v1",
+      withCredentials: true,
+    });
+  }
+
+  // Create Todo
+  createTodo = (title, body) => {
+      console.log("reaching here");
+      console.log(title, 'title |', body, "body");
+
+
+    const pr = this.api
+      .post("/todos", { title, body })
+      .then((response) => console.log(response)
+      );
+    return pr;
+  };
+
+  // See All Todo
+  seeAllTodos = () => {
+    const pr = this.api.get("/todos").then((response) => response.data);
+    return pr;
+  };
+
+  // See One Todo
+  seeOneTodo = (id) => {
+    const pr = this.api.get(`/todos/${id}`).then((response) => response.data);
+    return pr;
+  };
+
+  // Update Todo
+  updateTodo = (id, changes) => {
+    const { title, body } = changes;
+    const pr = this.api
+      .put(`todos/${id}`, { title, body })
+      .then((response) => response.data);
+    return pr;
+  };
+
+  // Delete Todo
+  deleteOneTodo = (id) => {
+    const pr = this.api.delete(`todos/${id}`).then((response) => response.data);
+    return pr;
+  };
+}
+
+const todoService = new TodoService(); 
+export default todoService;