iiitl#8 :Feature/task update

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 };

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>
   );
 };

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;
   }

frontend/src/index.css

@@ -119,4 +119,8 @@ form.signup, form.login {
   padding: 20px;
   background: #fff;
   border-radius: 4px;
+}
+
+.delete{
+  margin-right: 50px;
 }