Stable state

fabio-miguel · Jun 21, 2024 · b7a3d09 · b7a3d09
1 parent c1d401a
commit b7a3d09
Show file tree

Hide file tree

Showing 26 changed files with 6,842 additions and 984 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -6,8 +6,10 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.7.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.23.1",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

diff --git a/client/src/App.js b/client/src/App.js
@@ -1,20 +1,67 @@
-import React, { Fragment } from "react";
+import React, { Fragment, useEffect, useState } from "react";
+import axios from "axios";
 import "./App.css";
 
-// components
+// Components
 
 import InputTodo from "./components/InputTodo";
 import ListTodos from "./components/ListTodos";
 
+const baseUrl =
+  process.env.REACT_APP_ECS_SERVICE_URL || `http://localhost:5000`;
+
 function App() {
+  const [todos, setTodos] = useState([]);
+
+  const getTodos = async () => {
+    try {
+      const response = await axios.get(`${baseUrl}/todos`);
+
+      setTodos(response.data);
+      console.log(response.data);
+    } catch (err) {
+      console.error(err.message);
+    }
+  };
+
+  const deleteTodo = async (id) => {
+    try {
+      await axios.delete(`${baseUrl}/todos/${id}`);
+
+      getTodos();
+    } catch (err) {
+      console.error(err.message);
+    }
+  };
+
+  // Ensures getTodos is called when the component mounts.
+  useEffect(() => {
+    getTodos();
+  }, []);
+
+  // Re-fetch todos after adding a new one
+  const handleAddTodo = () => {
+    getTodos();
+  };
+
+  // Re-fetch todos after an update
+  const onUpdateTodo = async () => {
+    await getTodos();
+    console.log("Todo Updated");
+  };
+
   return (
     <Fragment>
       <div className="container">
-        <InputTodo />
-        <ListTodos />
+        <InputTodo onAddTodo={handleAddTodo} />
+        <ListTodos
+          todos={todos}
+          deleteTodo={deleteTodo}
+          onUpdateTodo={onUpdateTodo}
+        />
       </div>
     </Fragment>
   );
 }
 
-export default App;
+export default App;
diff --git a/client/src/components/EditTodo.jsx b/client/src/components/EditTodo.jsx
@@ -1,26 +1,25 @@
 import React, { Fragment, useState } from "react";
+import axios from "axios";
 
-const apiUrl = process.env.REACT_APP_API_URL;
+const baseUrl =
+  process.env.REACT_APP_ECS_SERVICE_URL || `http://localhost:5000`;
 
-const EditTodo = ({ todo }) => {
+const EditTodo = ({ todo, onUpdateTodo }) => {
   const [description, setDescription] = useState(todo.description);
 
-  //edit description function
-
-  const updateDescription = async e => {
+  // Edit description function
+  const updateDescription = async (e) => {
+    console.log("Inside updateDescription");
     e.preventDefault();
+    console.log("After preventDefault");
     try {
       const body = { description };
-      await fetch(
-        `${apiUrl}/todos/${todo.todo_id}`,
-        {
-          method: "PUT",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify(body)
-        }
-      );
-
-      window.location = "/";
+      console.log("Before axios.put");
+      await axios.put(`${baseUrl}/todos/${todo.id}`, body);
+      console.log("Before onUpdateTodo");
+      await onUpdateTodo();
+      console.log("After onUpdateTodo");
+      setDescription(description);
     } catch (err) {
       console.error(err.message);
     }
@@ -30,53 +29,55 @@ const EditTodo = ({ todo }) => {
     <Fragment>
       <button
         type="button"
-        class="btn btn-warning"
+        className="btn btn-warning"
+        id="editBtn"
         data-toggle="modal"
-        data-target={`#id${todo.todo_id}`}
+        data-target={`#id${todo.id}`}
       >
         Edit
       </button>
 
       <div
-        class="modal"
-        id={`id${todo.todo_id}`}
+        className="modal"
+        id={`id${todo.id}`}
         onClick={() => setDescription(todo.description)}
       >
-        <div class="modal-dialog">
-          <div class="modal-content">
-            <div class="modal-header">
-              <h4 class="modal-title">Edit Todo</h4>
+        <div className="modal-dialog">
+          <div className="modal-content">
+            <div className="modal-header">
+              <h4 className="modal-title">Edit Todo</h4>
               <button
                 type="button"
-                class="close"
+                className="close"
                 data-dismiss="modal"
                 onClick={() => setDescription(todo.description)}
               >
                 &times;
               </button>
             </div>
 
-            <div class="modal-body">
+            <div className="modal-body">
               <input
                 type="text"
                 className="form-control"
                 value={description}
-                onChange={e => setDescription(e.target.value)}
+                onChange={(e) => setDescription(e.target.value)}
               />
             </div>
 
-            <div class="modal-footer">
+            <div className="modal-footer">
               <button
                 type="button"
-                class="btn btn-warning"
+                className="btn btn-warning"
+                id="editDoneBtn"
                 data-dismiss="modal"
-                onClick={e => updateDescription(e)}
+                onClick={(e) => updateDescription(e)}
               >
-                Edit
+                Done
               </button>
               <button
                 type="button"
-                class="btn btn-danger"
+                className="btn btn-danger"
                 data-dismiss="modal"
                 onClick={() => setDescription(todo.description)}
               >
@@ -90,4 +91,4 @@ const EditTodo = ({ todo }) => {
   );
 };
 
-export default EditTodo;
+export default EditTodo;
diff --git a/client/src/components/InputTodo.jsx b/client/src/components/InputTodo.jsx
@@ -1,21 +1,20 @@
 import React, { Fragment, useState } from "react";
+import axios from "axios";
 
-const apiUrl = process.env.REACT_APP_API_URL;
+const baseUrl =
+  process.env.REACT_APP_ECS_SERVICE_URL || `http://localhost:5000`;
 
-const InputTodo = () => {
+const InputTodo = ({ onAddTodo }) => {
   const [description, setDescription] = useState("");
 
-  const onSubmitForm = async e => {
+  const onSubmitForm = async (e) => {
     e.preventDefault();
     try {
       const body = { description };
-      await fetch(`${apiUrl}/todos/`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(body)
-      });
+      await axios.post(`${baseUrl}/todos/`, body);
 
-      window.location = "/";
+      onAddTodo(); // Re-fetch todos after adding a new one
+      // window.location = "/";
     } catch (err) {
       console.error(err.message);
     }
@@ -28,13 +27,20 @@ const InputTodo = () => {
         <input
           type="text"
           className="form-control"
+          id="todoInput"
           value={description}
-          onChange={e => setDescription(e.target.value)}
+          onChange={(e) => setDescription(e.target.value)}
         />
-        <button className="btn btn-success">Add</button>
+        <button className="btn btn-success" id="addTodoBtn">
+          Add
+        </button>
       </form>
     </Fragment>
   );
 };
 
-export default InputTodo;
+export default InputTodo;
+
+/*
+The ecsServiceUrl is the DNS address of your server / api endpoint. The backend configuration uses a Load Balancer, so DNS URL will be found in the Load Balancer. However, if you decide to use a custom domain (e.g. using Route 53), then simply use this. 
+*/