Fix task can't move to other column

frontend/src/components/kanbanBoard/columnContainer.jsx

@@ -9,8 +9,17 @@ export function ColumnContainer({ column, createTask, tasks, deleteTask, updateT
     return tasks.map((task) => task.id);
   }, [tasks]);
 
+  const { setNodeRef, attributes, listeners, transform, transition, isDragging } = useSortable({
+    id: column.id,
+    data: {
+      type: "Column",
+      column,
+    },
+  });
+
   return (
     <div
+      ref={setNodeRef}
       className="
   bg-[#f1f2f4]
   w-[280px]
@@ -21,6 +30,8 @@ export function ColumnContainer({ column, createTask, tasks, deleteTask, updateT
   ">
       {/* Column title */}
       <div
+        {...attributes}
+        {...listeners}
         className="
       ml-3
       text-md

frontend/src/components/kanbanBoard/kanbanBoard.jsx

@@ -1,12 +1,6 @@
 import { useMemo, useState, useEffect } from "react";
 import { ColumnContainerCard } from "./columnContainerWrapper";
-import {
+import { DndContext, DragOverlay, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
-  DndContext,
-  DragOverlay,
-  PointerSensor,
-  useSensor,
-  useSensors,
-} from "@dnd-kit/core";
 import { SortableContext, arrayMove } from "@dnd-kit/sortable";
 import { createPortal } from "react-dom";
 import { TaskCard } from "./taskCard";
@@ -32,9 +26,7 @@ export function KanbanBoard() {
 
   // ---------------- Task Handlers ----------------
   const handleTaskUpdate = (tasks, updatedTask) => {
-    const updatedTasks = tasks.map((task) =>
+    const updatedTasks = tasks.map((task) => (task.id === updatedTask.id ? updatedTask : task));
-      task.id === updatedTask.id ? updatedTask : task
-    );
     setTasks(updatedTasks);
   };
 
@@ -176,14 +168,8 @@ export function KanbanBoard() {
       justify-center
       overflow-x-auto
       overflow-y-hidden
-  "
+  ">
-    >
+      <DndContext sensors={sensors} onDragStart={onDragStart} onDragEnd={onDragEnd} onDragOver={onDragOver}>
-      <DndContext
-        sensors={sensors}
-        onDragStart={onDragStart}
-        onDragEnd={onDragEnd}
-        onDragOver={onDragOver}
-      >
         <div className="flex gap-4">
           <div className="flex gap-4">
             {!isLoading ? (
@@ -195,9 +181,7 @@ export function KanbanBoard() {
                     createTask={createTask}
                     deleteTask={deleteTask}
                     updateTask={updateTask}
-                    tasks={(tasks || []).filter(
+                    tasks={(tasks || []).filter((task) => task.columnId === col.id)}
-                      (task) => task.columnId === col.id
-                    )}
                   />
                 ))}{" "}
               </SortableContext>
@@ -210,11 +194,7 @@ export function KanbanBoard() {
         {createPortal(
           <DragOverlay className="bg-white" dropAnimation={null} zIndex={20}>
             {/* Render the active task as a draggable overlay */}
-            <TaskCard
+            <TaskCard task={activeTask} deleteTask={deleteTask} updateTask={updateTask} />
-              task={activeTask}
-              deleteTask={deleteTask}
-              updateTask={updateTask}
-            />
           </DragOverlay>,
           document.body
         )}
@@ -240,8 +220,6 @@ export function KanbanBoard() {
     if (!over) return; // If not dropped over anything, exit
 
     const activeId = active.id;
-    const overId = over.id;
-
     const isActiveATask = active.data.current?.type === "Task";
     const isOverAColumn = over.data.current?.type === "Column";
 
@@ -250,8 +228,7 @@ export function KanbanBoard() {
       setTasks((tasks) => {
         const activeIndex = tasks.findIndex((t) => t.id === activeId);
 
-        // Extract the column ID from overId
+        const columnId = over.data.current.column.id;
-        const columnId = extractColumnId(overId);
 
         tasks[activeIndex].columnId = columnId;
 
@@ -259,7 +236,7 @@ export function KanbanBoard() {
         axiosInstance
           .put(`todo/change_task_list_board/`, {
             todo_id: activeId,
-            new_list_board_id: over.data.current.task.columnId,
+            new_list_board_id: columnId,
             new_index: 0,
           })
           .then((response) => {})
@@ -271,15 +248,6 @@ export function KanbanBoard() {
       });
     }
   }
-
-  // Helper function to extract the column ID from the element ID
-  function extractColumnId(elementId) {
-    // Implement logic to extract the column ID from elementId
-    // For example, if elementId is in the format "column-123", you can do:
-    const parts = elementId.split("-");
-    return parts.length === 2 ? parseInt(parts[1], 10) : null;
-  }
-
   // Handle the drag-over event
   function onDragOver(event) {
     const { active, over } = event;
@@ -306,39 +274,15 @@ export function KanbanBoard() {
           tasks[activeIndex].columnId = tasks[overIndex].columnId;
           return arrayMove(tasks, activeIndex, overIndex - 1);
         }
-        axiosInstance
-          .put(`todo/change_task_list_board/`, {
-            todo_id: activeId,
-            new_list_board_id: over.data.current.task.columnId,
-            new_index: 0,
-          })
-          .then((response) => {})
-          .catch((error) => {
-            console.error("Error updating task columnId:", error);
-          });
         return arrayMove(tasks, activeIndex, overIndex);
       });
     }
 
     const isOverAColumn = over.data.current?.type === "Column";
     // Move the Task to a different column and update columnId
-    if (
+    if (isActiveATask && isOverAColumn && tasks.some((task) => task.columnId !== overId)) {
-      isActiveATask &&
-      isOverAColumn &&
-      tasks.some((task) => task.columnId !== overId)
-    ) {
       setTasks((tasks) => {
         const activeIndex = tasks.findIndex((t) => t.id === activeId);
-        axiosInstance
-          .put(`todo/change_task_list_board/`, {
-            todo_id: activeId,
-            new_list_board_id: over.data.current.task.columnId,
-            new_index: 0,
-          })
-          .then((response) => {})
-          .catch((error) => {
-            console.error("Error updating task columnId:", error);
-          });
         tasks[activeIndex].columnId = overId;
         return arrayMove(tasks, activeIndex, activeIndex);
       });