Merge 06051db7b9 into 18f59bdb09

react-express-mongodb/.gitignore

@@ -3,3 +3,4 @@ backend/node_modules/
 .idea/
 data
 *.log
+.vscode

react-express-mongodb/backend/controllers/todos/todoController.js

@@ -0,0 +1,27 @@
+const serverResponses = require("../../utils/helpers/responses");
+const messages = require("../../config/messages");
+const { Todo } = require("../../models/todos/todo");
+
+const createTodo = async (req, res) => {
+  const todo = new Todo({
+    text: req.body.text,
+  });
+
+  try {
+    const result = await todo.save();
+    serverResponses.sendSuccess(res, messages.SUCCESSFUL, result);
+  } catch (error) {
+    serverResponses.sendError(res, messages.BAD_REQUEST, error);
+  }
+};
+
+const getAllTodos = async (req, res) => {
+  try {
+    const todos = await Todo.find({}, { __v: 0 });
+    serverResponses.sendSuccess(res, messages.SUCCESSFUL, todos);
+  } catch (error) {
+    serverResponses.sendError(res, messages.BAD_REQUEST, error);
+  }
+};
+
+module.exports = { createTodo, getAllTodos };

react-express-mongodb/backend/package.json

@@ -12,19 +12,17 @@
   "author": "Syed Afzal",
   "license": "ISC",
   "dependencies": {
-    "bcryptjs": "^2.4.3",
-    "body-parser": "^1.18.2",
-    "cookie-parser": "^1.4.4",
-    "cors": "^2.8.4",
-    "express": "^4.17.1",
-    "lodash": "^4.17.13",
-    "mongodb": "^3.0.7",
-    "mongoose": "^6.0.9",
-    "simple-node-logger": "^18.12.23",
-    "validator": "^13.7.0"
+    "body-parser": "^1.20.2",
+    "cookie-parser": "^1.4.6",
+    "cors": "^2.8.5",
+    "express": "^4.18.2",
+    "mongodb": "^3.7.4",
+    "mongoose": "^6.12.6",
+    "simple-node-logger": "^18.12.24",
+    "validator": "^13.11.0"
   },
   "devDependencies": {
-    "nodemon": "^2.0.3",
-    "prettier": "^2.0.5"
+    "nodemon": "^3.0.3",
+    "prettier": "^2.8.8"
   }
 }

react-express-mongodb/backend/routes/index.js

@@ -1,35 +1,12 @@
 const express = require("express");
-const serverResponses = require("../utils/helpers/responses");
-const messages = require("../config/messages");
-const { Todo } = require("../models/todos/todo");
+const todoController = require("../controllers/todos/todoController");
 
 const routes = (app) => {
   const router = express.Router();
 
-  router.post("/todos", (req, res) => {
-    const todo = new Todo({
-      text: req.body.text,
-    });
+  router.post("/todos", todoController.createTodo);
 
-    todo
-      .save()
-      .then((result) => {
-        serverResponses.sendSuccess(res, messages.SUCCESSFUL, result);
-      })
-      .catch((e) => {
-        serverResponses.sendError(res, messages.BAD_REQUEST, e);
-      });
-  });
-
-  router.get("/", (req, res) => {
-    Todo.find({}, { __v: 0 })
-      .then((todos) => {
-        serverResponses.sendSuccess(res, messages.SUCCESSFUL, todos);
-      })
-      .catch((e) => {
-        serverResponses.sendError(res, messages.BAD_REQUEST, e);
-      });
-  });
+  router.get("/", todoController.getAllTodos);
 
   //it's a prefix before api it is useful when you have many modules and you want to
   //differentiate b/w each module you can use this technique

react-express-mongodb/frontend/package.json

@@ -3,11 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "axios": "^0.24.0",
     "bootstrap": "^5.1.3",
-    "sass": "^1.43.4",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "sass": "^1.43.4"
   },
   "optionalDependencies": {
     "fsevents": "^2.1.2"
@@ -16,7 +15,7 @@
     "@testing-library/jest-dom": "^5.15.0",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^7.2.1",
-    "react-scripts": "^5.0.0"
+    "react-scripts": "^5.0.1"
   },
   "scripts": {
     "start": "react-scripts start",

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",
+      });
+
+      if (!todoListResponse.ok) {
+        console.log("Fetch failed");
+      } else {
+        const updatedTodos = await todoListResponse.json();
+        setTodos([...updatedTodos.data]);
+      }
+    } catch (error) {
+      console.log("Error :", error);
+    }
   }
 
-  componentDidMount() {
-    axios
-      .get("/api")
-      .then((response) => {
-        this.setState({
-          todos: response.data.data,
-        });
-      })
-      .catch((e) => console.log("Error : ", e));
-  }
+  useEffect(() => {
+    getTodos();
+  }, []);
 
-  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={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;
 }