react-express-mongodb: clean frontend code

- apply prettier style on every js file
- remove mutation on immutable variables
- remove wrapper on top of axios
- fix form handling
- remove useless port definition in dockerfile

Signed-off-by: Jérémie Drouet <jeremie.drouet@gmail.com>

react-express-mongodb/frontend/src/App.js

@@ -1,56 +1,55 @@
-import React from 'react';
-import {request} from './utilities/httpRequestHandler'
-import './App.scss';
+import React from "react";
+import axios from "axios";
+import "./App.scss";
 import AddTodo from "./components/AddTodo";
 import TodoList from "./components/TodoList";
 
-export default class App extends React.Component{
-
-  constructor(props){
+export default class App extends React.Component {
+  constructor(props) {
     super(props);
 
     this.state = {
-      todos: []
-    }
+      todos: [],
+    };
   }
 
   componentDidMount() {
-      request('get','/api')
-          .then((response) => {
-              this.setState({
-                  todos: response.data.data
-              })
-          }).catch((e) => console.log('Error : ', e))
+    axios
+      .get("/api")
+      .then((response) => {
+        this.setState({
+          todos: response.data.data,
+        });
+      })
+      .catch((e) => console.log("Error : ", e));
   }
 
-    _handleAddTodo = (value) => {
-      request('post', '/api/todos', {text:value})
-          .then((response) => {
-              let todosCopy = this.state.todos;
-              todosCopy.unshift({text:value});
-              this.setState({
-                  todos : todosCopy
-              });
-              this.refs.todo.value = ""
-          }).catch((e) => console.log('Error : ', e));
-    };
-
+  handleAddTodo = (value) => {
+    axios
+      .post("/api/todos", { text: value })
+      .then(() => {
+        this.setState({
+          todos: [...this.state.todos, { text: value }],
+        });
+      })
+      .catch((e) => console.log("Error : ", e));
+  };
 
   render() {
     return (
-        <div className="App container">
-          <div className="container-fluid">
-            <div className="row">
-              <div className="col-xs-12 col-sm-8 col-md-8 offset-md-2">
-                <h1>Todos</h1>
-                  <div className="todo-app">
-                      <AddTodo handleAddTodo={(value) => {this._handleAddTodo(value)}}/>
-                      <TodoList todos={this.state.todos}/>
-                  </div>
+      <div className="App container">
+        <div className="container-fluid">
+          <div className="row">
+            <div className="col-xs-12 col-sm-8 col-md-8 offset-md-2">
+              <h1>Todos</h1>
+              <div className="todo-app">
+                <AddTodo handleAddTodo={this.handleAddTodo} />
+                <TodoList todos={this.state.todos} />
               </div>
             </div>
           </div>
         </div>
+      </div>
     );
   }
 }