From 5b4a11b37432168cf54a6dddf88c95d4fffe8309 Mon Sep 17 00:00:00 2001
From: sosokker <sirin_29@hotmail.co.th>
Date: Tue, 21 Nov 2023 06:12:56 +0700
Subject: [PATCH] Seperate Modal State

---
 frontend/src/components/kanbanBoard/taskCard.jsx        | 5 +++--
 frontend/src/components/kanbanBoard/taskDetailModal.jsx | 4 ++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/kanbanBoard/taskCard.jsx b/frontend/src/components/kanbanBoard/taskCard.jsx
index 3f7d9ac..2c5053f 100644
--- a/frontend/src/components/kanbanBoard/taskCard.jsx
+++ b/frontend/src/components/kanbanBoard/taskCard.jsx
@@ -4,7 +4,7 @@ import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import TaskDetailModal from "./taskDetailModal";
 
-function TaskCard({ task, deleteTask, updateTask, description, tags, difficulty, challenge, importance}) {
+function TaskCard({ task, deleteTask, updateTask}) {
   const [mouseIsOver, setMouseIsOver] = useState(false);
 
   const { setNodeRef, attributes, listeners, transform, transition, isDragging } = useSortable({
@@ -40,6 +40,7 @@ function TaskCard({ task, deleteTask, updateTask, description, tags, difficulty,
   return (
     <div>
       <TaskDetailModal
+        taskId={task.id}
         title={task.content}
         description={task.description}
         tags={task.tags}
@@ -61,7 +62,7 @@ function TaskCard({ task, deleteTask, updateTask, description, tags, difficulty,
         }}>
         <p
           className="p-2.5 my-auto w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap rounded-xl shadow bg-white"
-          onClick={() => document.getElementById("task_detail_modal").showModal()}>
+          onClick={() => document.getElementById(`task_detail_modal_${task.id}`).showModal()}>
           {task.content}
         </p>
 
diff --git a/frontend/src/components/kanbanBoard/taskDetailModal.jsx b/frontend/src/components/kanbanBoard/taskDetailModal.jsx
index 8d00ba5..ddf954b 100644
--- a/frontend/src/components/kanbanBoard/taskDetailModal.jsx
+++ b/frontend/src/components/kanbanBoard/taskDetailModal.jsx
@@ -3,7 +3,7 @@ import { FaTasks, FaRegListAlt } from "react-icons/fa";
 import { FaPlus } from "react-icons/fa6";
 import { TbChecklist } from "react-icons/tb";
 
-function TaskDetailModal({ title, description, tags, difficulty, challenge, importance }) {
+function TaskDetailModal({ title, description, tags, difficulty, challenge, importance, taskId }) {
   const [isChallengeChecked, setChallengeChecked] = useState(challenge);
   const [isImportantChecked, setImportantChecked] = useState(importance);
   const [currentDifficulty, setCurrentDifficulty] = useState(difficulty);
@@ -21,7 +21,7 @@ function TaskDetailModal({ title, description, tags, difficulty, challenge, impo
   };
 
   return (
-    <dialog id="task_detail_modal" className="modal">
+    <dialog id={`task_detail_modal_${taskId}`} className="modal">
       <div className="modal-box w-4/5 max-w-3xl">
         {/* Title */}
         <div className="flex flex-col py-2">