@emberai-engg/task-board 0.3.2 → 0.3.4

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/components/TaskBoard.tsx
-import { useState as useState9, useEffect as useEffect8, useCallback as useCallback7 } from "react";
+import { useState as useState9, useEffect as useEffect8, useCallback as useCallback7, useRef as useRef8 } from "react";
 import { DragDropContext } from "@hello-pangea/dnd";
 
 // src/context/TaskBoardProvider.tsx
@@ -185,7 +185,7 @@ function TaskBoardProvider({
 
 // src/hooks/useTaskBoard.ts
 import { useState, useEffect, useCallback, useRef } from "react";
-function useTaskBoard() {
+function useTaskBoard(isDragging) {
   const { service, user, projects: configProjects, columns, config } = useTaskBoardContext();
   const [fetchedProjects, setFetchedProjects] = useState([]);
   useEffect(() => {
@@ -253,8 +253,9 @@ function useTaskBoard() {
     }
   }, [selectedProject, service, columns]);
   useEffect(() => {
+    if (isDragging?.current) return;
     fetchTasks();
-  }, [fetchTasks]);
+  }, [fetchTasks, isDragging]);
   const loadMoreTasks = useCallback(async (statusKey) => {
     if (!selectedProject || loadingMore[statusKey]) return;
     const current = tasks[statusKey]?.length || 0;
@@ -311,10 +312,10 @@ function useTaskBoard() {
 
 // src/hooks/useTaskActions.ts
 import { useCallback as useCallback2, useRef as useRef2 } from "react";
-function useTaskActions(tasks, setTasks, fetchTasks) {
+function useTaskActions(tasks, setTasks, fetchTasks, isDragging) {
   const { service, config } = useTaskBoardContext();
-  const tasksRef = useRef2(tasks);
-  tasksRef.current = tasks;
+  const internalDragging = useRef2(false);
+  const draggingRef = isDragging ?? internalDragging;
   const createTask = useCallback2(async (data) => {
     const task = await service.createTask(data);
     config.onTaskCreate?.(task);
@@ -337,36 +338,40 @@ function useTaskActions(tasks, setTasks, fetchTasks) {
     });
   }, [service]);
   const moveTask = useCallback2(async (taskId, sourceStatus, destStatus, sourceIndex, destIndex) => {
-    const currentTasks = tasksRef.current;
-    const sourceCol = [...currentTasks[sourceStatus] || []];
-    const destCol = sourceStatus === destStatus ? sourceCol : [...currentTasks[destStatus] || []];
-    const [movedTask] = sourceCol.splice(sourceIndex, 1);
-    if (!movedTask) return;
-    const updatedTask = { ...movedTask, status: destStatus };
-    destCol.splice(destIndex, 0, updatedTask);
-    let newPosition;
-    if (destCol.length === 1) {
-      newPosition = POSITION_GAP;
-    } else if (destIndex === 0) {
-      newPosition = (destCol[1]?.position ?? POSITION_GAP) - POSITION_GAP;
-    } else if (destIndex === destCol.length - 1) {
-      newPosition = (destCol[destCol.length - 2]?.position ?? 0) + POSITION_GAP;
-    } else {
-      const above = destCol[destIndex - 1]?.position ?? 0;
-      const below = destCol[destIndex + 1]?.position ?? above + POSITION_GAP * 2;
-      newPosition = (above + below) / 2;
-    }
-    updatedTask.position = newPosition;
-    const newTasks = { ...currentTasks };
-    newTasks[sourceStatus] = sourceCol;
-    if (sourceStatus !== destStatus) {
-      newTasks[destStatus] = destCol;
-    }
-    setTasks(newTasks);
+    draggingRef.current = true;
+    let newPosition = POSITION_GAP;
+    setTasks((prev) => {
+      const sourceCol = [...prev[sourceStatus] || []];
+      const destCol = sourceStatus === destStatus ? sourceCol : [...prev[destStatus] || []];
+      const [movedTask] = sourceCol.splice(sourceIndex, 1);
+      if (!movedTask) return prev;
+      const updatedTask = { ...movedTask, status: destStatus };
+      destCol.splice(destIndex, 0, updatedTask);
+      if (destCol.length === 1) {
+        newPosition = POSITION_GAP;
+      } else if (destIndex === 0) {
+        newPosition = (destCol[1]?.position ?? POSITION_GAP) - POSITION_GAP;
+      } else if (destIndex === destCol.length - 1) {
+        newPosition = (destCol[destCol.length - 2]?.position ?? 0) + POSITION_GAP;
+      } else {
+        const above = destCol[destIndex - 1]?.position ?? 0;
+        const below = destCol[destIndex + 1]?.position ?? above + POSITION_GAP * 2;
+        newPosition = (above + below) / 2;
+      }
+      updatedTask.position = newPosition;
+      const newTasks = { ...prev };
+      newTasks[sourceStatus] = sourceCol;
+      if (sourceStatus !== destStatus) {
+        newTasks[destStatus] = destCol;
+      }
+      return newTasks;
+    });
     try {
       await service.updateTask(taskId, { status: destStatus, position: newPosition });
     } catch {
       fetchTasks();
+    } finally {
+      draggingRef.current = false;
     }
   }, [setTasks, service, fetchTasks]);
   return { createTask, updateTask, deleteTask, markTaskRead, moveTask };
@@ -2014,8 +2019,9 @@ function TaskBoard({
   renderCreateTask
 }) {
   const { columns, features, service } = useTaskBoardContext();
-  const board = useTaskBoard();
-  const actions = useTaskActions(board.tasks, board.setTasks, board.fetchTasks);
+  const isDraggingRef = useRef8(false);
+  const board = useTaskBoard(isDraggingRef);
+  const actions = useTaskActions(board.tasks, board.setTasks, board.fetchTasks, isDraggingRef);
   const { copiedTaskId, copyShareLink } = useShareLink();
   const [selectedTask, setSelectedTask] = useState9(null);
   const [createForStatus, setCreateForStatus] = useState9("");
@@ -2161,7 +2167,7 @@ function TaskBoard({
           onSetFilterTags: setFilterTags
         }
       ),
-      board.boardLoading ? /* @__PURE__ */ jsx15(BoardSkeleton, {}) : /* @__PURE__ */ jsx15("div", { className: "flex-1 min-h-0 eb-tb-board-scroll overflow-x-auto overflow-y-hidden pb-4", children: /* @__PURE__ */ jsx15(DragDropContext, { onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsx15("div", { className: "flex gap-4 min-w-max h-full", children: columns.map((col) => {
+      board.boardLoading ? /* @__PURE__ */ jsx15(BoardSkeleton, {}) : /* @__PURE__ */ jsx15("div", { className: "flex-1 min-h-0 eb-tb-board-scroll overflow-y-hidden pb-4", children: /* @__PURE__ */ jsx15(DragDropContext, { onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsx15("div", { className: "flex gap-4 min-w-max h-full", children: columns.map((col) => {
         const allColumnTasks = board.tasks[col.key] || [];
         const columnTasks = filterTags.length > 0 ? allColumnTasks.filter((t) => {
           const taskTags = t.tags || [];