Fix delete task, use state for next IDs, add confirm deletion

lashwi · Dec 1, 2023 · 5b9d567 · 5b9d567
1 parent 1f751e1
commit 5b9d567
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 19 deletions.
diff --git a/client/src/components/Board/index.tsx b/client/src/components/Board/index.tsx
@@ -34,9 +34,6 @@ export enum Tool {
   Arrow
 };
 
-let lastTaskID = 5;
-let lastArrowID = 5;
-
 export default function Board() {
   const [board, setBoard] = useState<Board>({
     id: 1,
@@ -151,6 +148,8 @@ export default function Board() {
   //     users
   //   });
   // };
+  const [nextTaskID, setNextTaskID] = useState<number>(6);
+  const [nextArrowID, setNextArrowID] = useState<number>(6);
 
   // Temporary board view state
   const [board_view_state, setBoardViewState] = useState<BoardViewState>({
@@ -225,9 +224,8 @@ export default function Board() {
   const handleAddNewTask = (e: React.MouseEvent<HTMLDivElement>) => {
     // TODO: Technically, we should do more calculations to account for a panned canvas
     const { clientX, clientY } = e.nativeEvent;
-    lastTaskID++;
     const newTask: Task = {
-      id: lastTaskID,
+      id: nextTaskID,
       title: "Untitled task",
       description: "",
       width: 200,
@@ -236,6 +234,7 @@ export default function Board() {
       posY: clientY,
       color: "#faedcb"
     };
+    setNextTaskID(nextTaskID + 1);
     setTasks([...board.tasks, newTask]);
     setSelectedTool(Tool.Pointer);
     setPointerToolState({
@@ -275,13 +274,13 @@ export default function Board() {
   };
 
   const addArrow = (firstTaskId: number, secondTaskId: number) => {
-    lastArrowID++;
     const newArrow: Arrow = {
-      id: lastArrowID,
+      id: nextArrowID,
       from: firstTaskId,
       to: secondTaskId,
       color: arrowToolState.color
     };
+    setNextArrowID(nextArrowID + 1);
     setArrows([...board.arrows, newArrow]);
   };
 
@@ -291,14 +290,19 @@ export default function Board() {
   };
 
   const deleteTask = (task: Task) => {
+    if (!window.confirm(`Are you sure you want to delete task "${task.title}"?`)) {
+      return;
+    }
     console.log(`Deleting task ${task.id}`);
-    const id = task.id;
-    const newTasks = board.tasks.filter(t => t.id != id);
-    setTasks(newTasks);
-    const updatedArrows = board.arrows.filter(arrow => (arrow.from != id && arrow.to != id));
-    setArrows(updatedArrows);
+    const updatedArrows = board.arrows.filter(a => (a.from != task.id && a.to != task.id));
+    const newTasks = board.tasks.filter(t => t.id != task.id);
+    setBoard({
+      ...board,
+      arrows: updatedArrows,
+      tasks: newTasks,
+    });
     resetPointerToolState();
-  }
+  };
 
   return (
     <div className="absolute top-0 left-0 z-10 h-screen w-screen overflow-hidden bg-white">
@@ -309,7 +313,7 @@ export default function Board() {
         onClick={selectedTool == Tool.Task ? handleAddNewTask : undefined}
       >
         <Xwrapper>
-          {board.tasks.map((task, idx) => {
+          {board.tasks.map((task) => {
             let className = '';
             if (pointerToolState._selected_task?.id == task.id) {
               className += 'ring ring-offset-2 ring-primary ';
@@ -329,7 +333,7 @@ export default function Board() {
             };
             return (
               <Task
-                key={idx}
+                key={task.id}
                 task={task}
                 className={className}
                 isMoveable={selectedTool == Tool.Move}
@@ -338,9 +342,9 @@ export default function Board() {
               />
             );
           })}
-          {board.arrows.map((arrow, idx) => (
+          {board.arrows.map((arrow) => (
             <Xarrow
-              key={idx}
+              key={arrow.id}
               start={arrow.from.toString()}
               end={arrow.to.toString()}
               color={arrow.color}

diff --git a/client/src/components/TaskDetailsPane/index.tsx b/client/src/components/TaskDetailsPane/index.tsx
@@ -152,7 +152,6 @@ export default function TaskDetailsPane(props: Props) {
 
   const handleDelete = () => {
     deleteTask(task);
-    handleClose();
   };
 
   // Moveable handlers
@@ -361,7 +360,7 @@ export default function TaskDetailsPane(props: Props) {
               View dependency graph
             </button>
             <button
-              className="text-white bg-dangerous1 hover:bg-dangerous2 rounded-lg p-2 text-lg mt-3"
+              className="text-white bg-dangerous1 hover:bg-dangerous2 rounded-lg p-2 text-lg mt-2"
               onClick={handleDelete}
             >
               Delete task