refactored frontend to functional components

Signed-off-by: Joseph Angelo Ferrer Barrozo <jabarrozo@gmail.com>

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

@@ -1,55 +1,47 @@
-import React from "react";
-import axios from "axios";
+import React, { useState, useEffect } from "react";
 import "./App.scss";
 import AddTodo from "./components/AddTodo";
 import TodoList from "./components/TodoList";
 
-export default class App extends React.Component {
-  constructor(props) {
-    super(props);
+const MainApp = () => {
+  const [todos, setTodos] = useState([]);
 
-    this.state = {
-      todos: [],
-    };
-  }
+  async function getTodos() {
+    try {
+      const todoListResponse = await fetch("/api", {
+        method: "GET",
+      });
 
-  componentDidMount() {
-    axios
-      .get("/api")
-      .then((response) => {
-        this.setState({
-          todos: response.data.data,
-        });
-      })
-      .catch((e) => console.log("Error : ", e));
+      if (!todoListResponse.ok) {
+        console.log("Fetch failed");
+      } else {
+        const updatedTodos = await todoListResponse.json();
+        setTodos([...updatedTodos.data]);
+      }
+    } catch (error) {
+      console.log("Error :", error);
+    }
   }
 
-  handleAddTodo = (value) => {
-    axios
-      .post("/api/todos", { text: value })
-      .then(() => {
-        this.setState({
-          todos: [...this.state.todos, { text: value }],
-        });
-      })
-      .catch((e) => console.log("Error : ", e));
-  };
+  useEffect(() => {
+    getTodos();
+  }, []);
 
-  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={this.handleAddTodo} />
-                <TodoList todos={this.state.todos} />
-              </div>
+  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 todos={todos} setTodos={setTodos} />
+              <TodoList todos={todos} />
             </div>
           </div>
         </div>
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
+
+export default MainApp;

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

@@ -1,33 +1,52 @@
 import React from "react";
 
-export default class AddTodo extends React.Component {
-  handleSubmit = (e) => {
+const AddTodo = (props) => {
+  const { todos, setTodos } = props;
+
+  async function handleSubmit(e) {
     e.preventDefault();
     const { value } = e.target.elements.value;
     if (value.length > 0) {
-      this.props.handleAddTodo(value);
-      e.target.reset();
-    }
-  };
+      try {
+        const newTodoResponse = await fetch("/api/todos", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ text: value }),
+        });
 
-  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>
-    );
+        if (!newTodoResponse.ok) {
+          console.log("Fetch failed");
+        } else {
+          const newTodo = await newTodoResponse.json();
+          setTodos([...todos, newTodo.data]);
+          e.target.reset();
+        }
+      } catch (error) {
+        console.log("Error :", error);
+      }
+    }
   }
-}
+
+  return (
+    <form
+      noValidate
+      onSubmit={(e) => handleSubmit(e)}
+      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>
+  );
+};
+
+export default AddTodo;

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

@@ -1,49 +1,31 @@
-import React from "react";
+import React, { useState } from "react";
 
-export default class TodoList extends React.Component {
-  constructor(props) {
-    super(props);
+const TodoList = (props) => {
+  const { todos } = props;
+  const [activeIndex, setActiveIndex] = useState(0);
 
-    this.state = {
-      activeIndex: 0,
-    };
-  }
+  return todos.length > 0 ? (
+    <ul className="list-group">
+      {todos.map((todo, index) => (
+        <li
+          className={
+            "list-group-item cursor-pointer " +
+            (index === activeIndex ? "active" : "")
+          }
+          key={todo._id} // todos queried from the database have an _id value that is better used here than index
+          onClick={() => {
+            setActiveIndex(index);
+          }}
+        >
+          {todo.text}
+        </li>
+      ))}
+    </ul>
+  ) : (
+    <div className="alert alert-primary" role="alert">
+      No Todos to display
+    </div>
+  );
+};
 
-  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>
-    );
-  }
-
-  render() {
-    let { todos } = this.props;
-    return todos.length > 0 ? (
-      this.renderTodos(todos)
-    ) : (
-      <div className="alert alert-primary" role="alert">
-        No Todos to display
-      </div>
-    );
-  }
-}
+export default TodoList;

react-express-mongodb/frontend/src/custom.scss

@@ -5,4 +5,8 @@ $body-bg: #fff;
 
 .cursor-pointer {
   cursor: pointer;
+}
+
+.list-group {
+  margin-top: 1.2em;
 }