Implemented "Edit Task" functionality

package.json

@@ -11,7 +11,7 @@
     "react-dom": "^17.0.1",
     "react-icons": "^4.1.0",
     "react-router-dom": "^6.0.2",
-    "react-scripts": "4.0.1",
+    "react-scripts": "^4.0.1",
     "web-vitals": "^0.2.4"
   },
   "scripts": {

src/App.js

@@ -1,123 +1,164 @@
-import { useState, useEffect } from 'react'
-import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
-import Header from './components/Header'
-import Footer from './components/Footer'
-import Tasks from './components/Tasks'
-import AddTask from './components/AddTask'
-import About from './components/About'
+import { useState, useEffect } from "react";
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+import Header from "./components/Header";
+import Footer from "./components/Footer";
+import Tasks from "./components/Tasks";
+import AddTask from "./components/AddTask";
+import About from "./components/About";
 
 const App = () => {
-  const [showAddTask, setShowAddTask] = useState(false)
-  const [tasks, setTasks] = useState([])
+  const [showAddTask, setShowAddTask] = useState(false);
+  const [tasks, setTasks] = useState([]);
+  const [taskToEdit, setTaskToEdit] = useState([]); //this task(text, day, reminder) will be sent to AddTask.js form for updation
+  const [taskToEditId, setTaskToEditId] = useState(""); //this id will be used by editTask function which saves the updated task to db.json
 
   useEffect(() => {
     const getTasks = async () => {
-      const tasksFromServer = await fetchTasks()
-      setTasks(tasksFromServer)
-    }
+      const tasksFromServer = await fetchTasks();
+      setTasks(tasksFromServer);
+    };
 
-    getTasks()
-  }, [])
+    getTasks();
+  }, []);
 
   // Fetch Tasks
   const fetchTasks = async () => {
-    const res = await fetch('http://localhost:5000/tasks')
-    const data = await res.json()
+    const res = await fetch("http://localhost:5000/tasks");
+    const data = await res.json();
 
-    return data
-  }
+    return data;
+  };
 
   // Fetch Task
   const fetchTask = async (id) => {
-    const res = await fetch(`http://localhost:5000/tasks/${id}`)
-    const data = await res.json()
+    const res = await fetch(`http://localhost:5000/tasks/${id}`);
+    const data = await res.json();
 
-    return data
-  }
+    return data;
+  };
 
   // Add Task
   const addTask = async (task) => {
-    const res = await fetch('http://localhost:5000/tasks', {
-      method: 'POST',
+    const res = await fetch("http://localhost:5000/tasks", {
+      method: "POST",
       headers: {
-        'Content-type': 'application/json',
+        "Content-type": "application/json",
       },
       body: JSON.stringify(task),
-    })
+    });
 
-    const data = await res.json()
+    const data = await res.json();
 
-    setTasks([...tasks, data])
+    setTasks([...tasks, data]);
 
     // const id = Math.floor(Math.random() * 10000) + 1
     // const newTask = { id, ...task }
     // setTasks([...tasks, newTask])
-  }
+  };
+
+  //Get the task to edit...
+  const getTasktoEdit = async (id) => {
+    setShowAddTask(true);
+
+    let arr = [...tasks];
+    arr = arr.filter((task) => task.id === id);    
+    setTaskToEdit([...arr]); //this task(text, day, reminder) will be sent to AddTask.js form for updation
+    setTaskToEditId(id); //this id will be used by editTask function which saves the updated task to db.json
+  };
+
+  //Edit Task
+  const editTask = async (task) => {
+    const res = await fetch(`http://localhost:5000/tasks/${taskToEditId}`, {
+      method: "PUT",
+      headers: {
+        "Content-type": "application/json",
+      },
+      body: JSON.stringify(task),
+    });
+
+    const data = await res.json();
+
+    setTasks(
+      tasks.map((task) =>
+        task.id === taskToEditId ? { ...task, ...data } : task
+      )
+    );
+
+    setTaskToEdit([]); //empty the array after editing
+  };
 
   // Delete Task
   const deleteTask = async (id) => {
     const res = await fetch(`http://localhost:5000/tasks/${id}`, {
-      method: 'DELETE',
-    })
+      method: "DELETE",
+    });
+
     //We should control the response status to decide if we will change the state or not.
     res.status === 200
       ? setTasks(tasks.filter((task) => task.id !== id))
-      : alert('Error Deleting This Task')
-  }
+      : alert("Error Deleting This Task");
+  };
 
   // Toggle Reminder
   const toggleReminder = async (id) => {
-    const taskToToggle = await fetchTask(id)
-    const updTask = { ...taskToToggle, reminder: !taskToToggle.reminder }
+    const taskToToggle = await fetchTask(id);
+    const updTask = { ...taskToToggle, reminder: !taskToToggle.reminder };
 
     const res = await fetch(`http://localhost:5000/tasks/${id}`, {
-      method: 'PUT',
+      method: "PUT",
       headers: {
-        'Content-type': 'application/json',
+        "Content-type": "application/json",
       },
       body: JSON.stringify(updTask),
-    })
+    });
 
-    const data = await res.json()
+    const data = await res.json();
 
     setTasks(
       tasks.map((task) =>
         task.id === id ? { ...task, reminder: data.reminder } : task
       )
-    )
-  }
+    );
+  };
 
   return (
     <Router>
-      <div className='container'>
+      <div className="container">
         <Header
           onAdd={() => setShowAddTask(!showAddTask)}
           showAdd={showAddTask}
         />
         <Routes>
           <Route
-            path='/'
+            path="/"
             element={
               <>
-                {showAddTask && <AddTask onAdd={addTask} />}
+                {showAddTask && (
+                  <AddTask
+                    onAdd={addTask}
+                    taskToEdit={taskToEdit}
+                    onEdit={editTask}
+                  />
+                )}
                 {tasks.length > 0 ? (
                   <Tasks
                     tasks={tasks}
                     onDelete={deleteTask}
                     onToggle={toggleReminder}
+                    onEditId={getTasktoEdit} //this will bring up the task id
                   />
                 ) : (
-                  'No Tasks To Show'
+                  "No Tasks To Show"
                 )}
               </>
             }
           />
-          <Route path='/about' element={<About />} />
+          <Route path="/about" element={<About />} />
         </Routes>
         <Footer />
       </div>
     </Router>
-  )
-}
+  );
+};
 
-export default App
+export default App;

src/components/AddTask.js

@@ -1,58 +1,74 @@
-import { useState } from 'react'
+import { useEffect, useState } from "react";
 
-const AddTask = ({ onAdd }) => {
-  const [text, setText] = useState('')
-  const [day, setDay] = useState('')
-  const [reminder, setReminder] = useState(false)
+const AddTask = ({ onAdd, onEdit, taskToEdit }) => {
+  const [taskId, setTaskId] = useState("");
+  const [text, setText] = useState("");
+  const [day, setDay] = useState("");
+  const [reminder, setReminder] = useState(false);
+
+  useEffect(() => {
+    console.log("use effect");
+    taskToEdit.map(
+      (task) => (
+        setTaskId(task.id),
+        setText(task.text),
+        setDay(task.day),
+        setReminder(task.reminder)
+      )
+    );
+  }, [taskToEdit]);
 
   const onSubmit = (e) => {
-    e.preventDefault()
+    e.preventDefault();
 
     if (!text) {
-      alert('Please add a task')
-      return
+      alert("Please add a task");
+      return;
     }
 
-    onAdd({ text, day, reminder })
+    if (taskToEdit.length !== 0) {
+      onEdit({ taskId, text, day, reminder });
+    } else {
+      onAdd({ text, day, reminder });
+    }
 
-    setText('')
-    setDay('')
-    setReminder(false)
-  }
+    setText("");
+    setDay("");
+    setReminder(false);
+  };
 
   return (
-    <form className='add-form' onSubmit={onSubmit}>
-      <div className='form-control'>
+    <form className="add-form" onSubmit={onSubmit}>
+      <div className="form-control">
         <label>Task</label>
         <input
-          type='text'
-          placeholder='Add Task'
+          type="text"
+          placeholder="Add Task"
           value={text}
           onChange={(e) => setText(e.target.value)}
         />
       </div>
-      <div className='form-control'>
+      <div className="form-control">
         <label>Day & Time</label>
         <input
-          type='text'
-          placeholder='Add Day & Time'
+          type="text"
+          placeholder="Add Day & Time"
           value={day}
           onChange={(e) => setDay(e.target.value)}
         />
       </div>
-      <div className='form-control form-control-check'>
+      <div className="form-control form-control-check">
         <label>Set Reminder</label>
         <input
-          type='checkbox'
+          type="checkbox"
           checked={reminder}
           value={reminder}
           onChange={(e) => setReminder(e.currentTarget.checked)}
         />
       </div>
-
-      <input type='submit' value='Save Task' className='btn btn-block' />
+      <input type="submit" value="Save Task" className="btn btn-block" />
     </form>
-  )
-}
+  );
+};
 
-export default AddTask
+export default AddTask;

src/components/Task.js

@@ -1,21 +1,27 @@
-import { FaTimes } from 'react-icons/fa'
+import { FaEdit, FaTimes } from "react-icons/fa";
 
-const Task = ({ task, onDelete, onToggle }) => {
+const Task = ({ task, onDelete, onToggle, onEditId }) => {
   return (
     <div
-      className={`task ${task.reminder && 'reminder'}`}
+      className={`task ${task.reminder && "reminder"}`}
       onDoubleClick={() => onToggle(task.id)}
     >
       <h3>
-        {task.text}{' '}
-        <FaTimes
-          style={{ color: 'red', cursor: 'pointer' }}
-          onClick={() => onDelete(task.id)}
-        />
+        {task.text}{" "}
+        <div style={{ alignItems: "right" }}>
+          <FaTimes
+            onClick={() => onDelete(task.id)}
+            style={{ color: "red", cursor: "pointer", marginRight: 30 }}
+          />
+          <FaEdit
+            onClick={() => onEditId(task.id)}
+            style={{ color: "green", cursor: "pointer" }}
+          />
+        </div>
       </h3>
       <p>{task.day}</p>
     </div>
-  )
-}
+  );
+};
 
-export default Task
+export default Task;

src/components/Tasks.js

@@ -1,13 +1,19 @@
-import Task from './Task'
+import Task from "./Task";
 
-const Tasks = ({ tasks, onDelete, onToggle }) => {
+const Tasks = ({ tasks, onDelete, onToggle, onEditId }) => {
   return (
     <>
       {tasks.map((task, index) => (
-        <Task key={index} task={task} onDelete={onDelete} onToggle={onToggle} />
+        <Task
+          key={index}
+          task={task}
+          onDelete={onDelete}
+          onToggle={onToggle}
+          onEditId={onEditId}
+        />
       ))}
     </>
-  )
-}
+  );
+};
 
-export default Tasks
+export default Tasks;