From 910ab1fa55d00506c5bd7b3e81e287dbda38e8b2 Mon Sep 17 00:00:00 2001
From: Piyush Kumar <piyushkumar07999@gmail.com>
Date: Sat, 16 Mar 2024 23:38:10 +0530
Subject: [PATCH] #8 :Feature/task update

---
 frontend/src/components/EditForm.js    | 76 ++++++++++++++++++++++++++
 frontend/src/components/TaskDetails.js | 15 ++++-
 frontend/src/context/TaskContext.js    |  4 ++
 frontend/src/index.css                 |  4 ++
 4 files changed, 96 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/EditForm.js

diff --git a/frontend/src/components/EditForm.js b/frontend/src/components/EditForm.js
new file mode 100644
index 0000000..f993a13
--- /dev/null
+++ b/frontend/src/components/EditForm.js
@@ -0,0 +1,76 @@
+import { useState } from "react";
+import { useAuthContext } from "../hooks/useAuthContext";
+import { useTasksContext } from "../hooks/usetasksContext";
+
+const EditForm = ({ task, setEdit }) => {
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [progress, setProgress] = useState("");
+  const { dispatch } = useTasksContext();
+  const { user } = useAuthContext();
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const newtask = {
+      title: title || "Please Enter a title",
+      description: description || "Please Enter a description",
+      progress: progress || 0,
+    };
+
+    const response = await fetch("/api/tasks/" + task._id, {
+      method: "PATCH",
+      body: JSON.stringify(newtask),
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${user.token}`,
+      },
+    });
+    const json = await response.json();
+    console.log(json);
+
+    if (response.ok) {
+      dispatch({ type: "CHANGE_TASK", payload: { _id: task._id, ...newtask } });
+    }
+    setEdit(false);
+    setProgress('')
+    setDescription('')
+    setTitle('');
+  };
+
+  return (
+    <div>
+      <input
+        type="text"
+        placeholder="TaskName"
+        onChange={(e) => setTitle(e.target.value)}
+        value={title}
+        required
+      ></input>
+      <input
+        required
+        type="text"
+        placeholder="Description"
+        onChange={(e) => setDescription(e.target.value)}
+        value={description}
+      ></input>
+      <input
+        type="number"
+        placeholder="Progress"
+        value={progress}
+        required
+        onChange={(e) => setProgress(e.target.value)}
+      ></input>
+      <button
+        type="submit"
+        className="button"
+        onClick={handleSubmit}
+        value={progress}
+        disabled={!title || !description || !progress}
+      >
+        Change
+      </button>
+    </div>
+  );
+};
+
+export { EditForm };
\ No newline at end of file
diff --git a/frontend/src/components/TaskDetails.js b/frontend/src/components/TaskDetails.js
index d7e208f..2471f67 100644
--- a/frontend/src/components/TaskDetails.js
+++ b/frontend/src/components/TaskDetails.js
@@ -1,10 +1,11 @@
 import { useTasksContext } from "../hooks/usetasksContext";
 import { useAuthContext } from "../hooks/useAuthContext";
-
+import { useState } from "react";
+import { EditForm } from "./EditForm";
 const TaskDetails = ({ task }) => {
   const { dispatch } = useTasksContext();
   const { user } = useAuthContext();
-
+  const [edit, setEdit] = useState(false);
   const handleClick = async () => {
     if (!user) {
       return;
@@ -25,6 +26,7 @@ const TaskDetails = ({ task }) => {
 
   return (
     <div className="task-details">
+ 
       <h3>{task.title}</h3>
 
       <p>
@@ -35,9 +37,16 @@ const TaskDetails = ({ task }) => {
         <strong>Progress: </strong>
         {task.progress}
       </p>
-      <span className="material-symbols-outlined" onClick={handleClick}>
+      <span className="material-symbols-outlined delete" onClick={handleClick}>
         delete
       </span>
+      <span
+        className="material-symbols-outlined"
+        onClick={() => setEdit(!edit)}
+      >
+        edit
+      </span>
+      {edit && <EditForm task={task} setEdit={setEdit} />}
     </div>
   );
 };
diff --git a/frontend/src/context/TaskContext.js b/frontend/src/context/TaskContext.js
index 8b760ad..2173354 100644
--- a/frontend/src/context/TaskContext.js
+++ b/frontend/src/context/TaskContext.js
@@ -16,6 +16,10 @@ export const tasksReducer = (state, action) => {
       return {
         tasks: state.tasks.filter((w) => w._id !== action.payload._id),
       };
+      case "CHANGE_TASK":
+        return{
+          tasks: [...state.tasks.filter((w) => w._id !== action.payload._id), action.payload]
+        }
     default:
       return state;
   }
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 913a231..9fb84f4 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -119,4 +119,8 @@ form.signup, form.login {
   padding: 20px;
   background: #fff;
   border-radius: 4px;
+}
+
+.delete{
+  margin-right: 50px;
 }
\ No newline at end of file