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/components/AddTodo.js

@@ -1,22 +1,33 @@
-import React from 'react';
+import React from "react";
 
 export default class AddTodo extends React.Component {
-
-    _onAddTodo = () => {
-        if(this.refs.todo.value.length > 0) {
-            this.props.handleAddTodo(this.refs.todo.value);
-            this.refs.todo.value = '';
-        }
-    };
-
-    render() {
-        return (
-            <div className="new-todo form-group">
-                <input type="text" className="form-control" ref="todo"/>
-                <button className="btn btn-primary" onClick={this._onAddTodo}>
-                    Add Todo
-                </button>
-            </div>
-        )
+  handleSubmit = (e) => {
+    e.preventDefault();
+    const { value } = e.target.elements.value;
+    if (value.length > 0) {
+      this.props.handleAddTodo(value);
+      e.target.reset();
     }
-}
+  };
+
+  render() {
+    return (
+      <form
+        noValidate
+        onSubmit={this.handleSubmit}
+        className="new-todo form-group"
+      >
+        <input
+          type="text"
+          name="value"
+          required
+          minLength={1}
+          className="form-control"
+        />
+        <button className="btn btn-primary" type="submit">
+          Add Todo
+        </button>
+      </form>
+    );
+  }
+}

react-express-mongodb/frontend/src/components/TodoList.js

@@ -1,48 +1,49 @@
-import React from 'react';
+import React from "react";
 
 export default class TodoList extends React.Component {
+  constructor(props) {
+    super(props);
 
-    constructor(props){
-        super(props);
+    this.state = {
+      activeIndex: 0,
+    };
+  }
 
-        this.state = {
-            activeIndex:0,
-        }
-    }
+  handleActive(index) {
+    this.setState({
+      activeIndex: index,
+    });
+  }
 
-    _handleActive(index) {
-        this.setState({
-            activeIndex: index
-        })
-    }
+  renderTodos(todos) {
+    return (
+      <ul className="list-group">
+        {todos.map((todo, i) => (
+          <li
+            className={
+              "list-group-item cursor-pointer " +
+              (i === this.state.activeIndex ? "active" : "")
+            }
+            key={i}
+            onClick={() => {
+              this.handleActive(i);
+            }}
+          >
+            {todo.text}
+          </li>
+        ))}
+      </ul>
+    );
+  }
 
-    _renderTodos(todos) {
-        return (
-            <ul className="list-group">
-                {
-                    todos.map((todo, i) => {
-                        return (<li className={'list-group-item cursor-pointer ' + (i===this.state.activeIndex ? 'active' : '')}
-                                    key={i}
-                                    onClick={() => {this._handleActive(i)}}
-                        >
-                            {todo.text}
-                        </li>)
-                    })
-                }
-            </ul>
-        )
-    }
-
-
-    render() {
-        let { todos } = this.props;
-        return (
-            todos.length > 0 ?
-                this._renderTodos(todos)
-                :
-                <div className="alert alert-primary" role="alert">
-                    No Todos to display
-                </div>
-        )
-    }
-}
+  render() {
+    let { todos } = this.props;
+    return todos.length > 0 ? (
+      this.renderTodos(todos)
+    ) : (
+      <div className="alert alert-primary" role="alert">
+        No Todos to display
+      </div>
+    );
+  }
+}