@tuturuuu/ui 0.9.0 → 0.10.0

package/src/components/ui/tu-do/hooks/useTaskLabelManagement.ts

@@ -9,7 +9,17 @@ import type { TaskLabel as DbTaskLabel } from '@tuturuuu/types/db';
 import type { Task } from '@tuturuuu/types/primitives/Task';
 import { toast } from '@tuturuuu/ui/sonner';
 import { useState } from 'react';
-import { useBoardBroadcast } from '../shared/board-broadcast-context';
+import {
+  getActiveBoardRefresh,
+  useBoardBroadcast,
+} from '../shared/board-broadcast-context';
+import {
+  getTaskFromVisibleCaches,
+  patchTaskInVisibleCaches,
+  restoreTasksFromVisibleCacheSnapshot,
+  restoreVisibleTaskCaches,
+  snapshotVisibleTaskCaches,
+} from '../shared/task-cache-patches';
 import { getRandomNewLabelColor } from '../utils/taskConstants';
 
 type WorkspaceTaskLabel = Pick<
@@ -68,10 +78,14 @@ export function useTaskLabelManagement({
 
     // CRITICAL: Get current task state from cache instead of stale prop
     // This ensures we read the most up-to-date state after optimistic updates
-    const currentTask = taskId
-      ? ((queryClient.getQueryData(['task', taskId]) as Task | undefined) ??
-        task)
-      : task;
+    const canonicalTaskId = taskId ?? task.id;
+    const currentTask =
+      getTaskFromVisibleCaches({
+        queryClient,
+        boardId,
+        taskId: canonicalTaskId,
+        fallback: task,
+      }) ?? task;
 
     // Check if we're in multi-select mode with multiple tasks selected
     const shouldBulkUpdate =
@@ -86,11 +100,17 @@ export function useTaskLabelManagement({
 
     // Cancel any outgoing refetches
     await queryClient.cancelQueries({ queryKey: ['tasks', boardId] });
+    await queryClient.cancelQueries({ queryKey: ['tasks-full', boardId] });
 
     // Snapshot the previous value BEFORE optimistic update
     const previousTasks = queryClient.getQueryData(['tasks', boardId]) as
       | Task[]
       | undefined;
+    const cacheSnapshot = snapshotVisibleTaskCaches(
+      queryClient,
+      boardId,
+      tasksToUpdate
+    );
 
     // Determine action: remove if ALL selected tasks have the label, add otherwise
     // Use currentTask from cache, not stale task prop
@@ -112,6 +132,13 @@ export function useTaskLabelManagement({
       const fromBoardCache = previousTasks?.find((ct) => ct.id === taskId);
       if (fromBoardCache) return fromBoardCache;
 
+      const fromVisibleCaches = getTaskFromVisibleCaches({
+        queryClient,
+        boardId,
+        taskId,
+      });
+      if (fromVisibleCaches) return fromVisibleCaches;
+
       // Fallback to individual task cache (for tasks not in board view)
       if (taskId === currentTask.id) return currentTask;
 
@@ -135,63 +162,36 @@ export function useTaskLabelManagement({
 
     // Get label details from workspace labels for optimistic update
     const label = workspaceLabels.find((l) => l.id === labelId);
+    const fallbackLabel = label || {
+      id: labelId,
+      name: 'Unknown',
+      color: '#3b82f6',
+      created_at: new Date().toISOString(),
+    };
 
     // Optimistically update the cache - only update tasks that actually change
-    queryClient.setQueryData(['tasks', boardId], (old: Task[] | undefined) => {
-      if (!old) return old;
-      return old.map((t) => {
-        if (active && tasksToRemoveFrom.includes(t.id)) {
-          // Remove the label
-          return {
-            ...t,
-            labels: t.labels?.filter((l) => l.id !== labelId) || [],
-          };
-        } else if (!active && tasksNeedingLabel.includes(t.id)) {
-          // Add the label
-          return {
-            ...t,
-            labels: [
-              ...(t.labels || []),
-              label || {
-                id: labelId,
-                name: 'Unknown',
-                color: '#3b82f6',
-                created_at: new Date().toISOString(),
-              },
-            ],
-          };
-        }
-        return t;
-      });
-    });
-
-    // CRITICAL: Also update the individual task cache if taskId is provided
-    // This ensures the chip menu's task cache stays in sync with the board cache
-    if (taskId) {
-      queryClient.setQueryData(['task', taskId], (old: Task | undefined) => {
-        if (!old) return old;
-        if (active && tasksToRemoveFrom.includes(taskId)) {
-          // Remove the label
-          return {
-            ...old,
-            labels: old.labels?.filter((l) => l.id !== labelId) || [],
-          };
-        } else if (!active && tasksNeedingLabel.includes(taskId)) {
-          // Add the label
+    for (const tid of active ? tasksToRemoveFrom : tasksNeedingLabel) {
+      patchTaskInVisibleCaches({
+        queryClient,
+        boardId,
+        taskId: tid,
+        updater: (cachedTask) => {
+          if (active) {
+            return {
+              ...cachedTask,
+              labels: cachedTask.labels?.filter((l) => l.id !== labelId) || [],
+            };
+          }
+
+          if (cachedTask.labels?.some((l) => l.id === labelId)) {
+            return cachedTask;
+          }
+
           return {
-            ...old,
-            labels: [
-              ...(old.labels || []),
-              label || {
-                id: labelId,
-                name: 'Unknown',
-                color: '#3b82f6',
-                created_at: new Date().toISOString(),
-              },
-            ],
+            ...cachedTask,
+            labels: [...(cachedTask.labels || []), fallbackLabel],
           };
-        }
-        return old;
+        },
       });
     }
 
@@ -201,33 +201,36 @@ export function useTaskLabelManagement({
           ? { baseUrl: window.location.origin }
           : undefined;
       let successCount = 0;
+      const succeededTaskIds: string[] = [];
 
       if (active) {
-        for (const taskId of tasksToRemoveFrom) {
+        for (const tid of tasksToRemoveFrom) {
           try {
             await removeWorkspaceTaskLabel(
               workspaceId,
-              taskId,
+              tid,
               labelId,
               internalApiOptions
             );
             successCount++;
+            succeededTaskIds.push(tid);
           } catch (error) {
-            console.error(`Failed to remove label from task ${taskId}:`, error);
+            console.error(`Failed to remove label from task ${tid}:`, error);
           }
         }
       } else {
-        for (const taskId of tasksNeedingLabel) {
+        for (const tid of tasksNeedingLabel) {
           try {
             await addWorkspaceTaskLabel(
               workspaceId,
-              taskId,
+              tid,
               labelId,
               internalApiOptions
             );
             successCount++;
+            succeededTaskIds.push(tid);
           } catch (error) {
-            console.error(`Failed to add label to task ${taskId}:`, error);
+            console.error(`Failed to add label to task ${tid}:`, error);
           }
         }
       }
@@ -240,10 +243,22 @@ export function useTaskLabelManagement({
         throw new Error('Failed to update any tasks');
       }
 
+      const failedTaskIds = (
+        active ? tasksToRemoveFrom : tasksNeedingLabel
+      ).filter((tid) => !succeededTaskIds.includes(tid));
+      restoreTasksFromVisibleCacheSnapshot({
+        queryClient,
+        snapshot: cacheSnapshot,
+        taskIds: failedTaskIds,
+      });
+
       // Broadcast relation changes for all affected tasks
-      for (const tid of active ? tasksToRemoveFrom : tasksNeedingLabel) {
+      for (const tid of succeededTaskIds) {
         broadcast?.('task:relations-changed', { taskId: tid });
       }
+      if (succeededTaskIds.length > 0) {
+        getActiveBoardRefresh()?.({ invalidateTasks: false });
+      }
 
       toast.success(active ? 'Label removed' : 'Label added', {
         description:
@@ -253,9 +268,7 @@ export function useTaskLabelManagement({
       // Don't auto-clear selection - let user manually clear with "Clear" button
     } catch (e: any) {
       // Rollback on error
-      if (previousTasks) {
-        queryClient.setQueryData(['tasks', boardId], previousTasks);
-      }
+      restoreVisibleTaskCaches(queryClient, cacheSnapshot);
       console.error('Failed to toggle label:', e);
       toast.error('Error', {
         description: 'Failed to update label. Please try again.',
@@ -306,48 +319,44 @@ export function useTaskLabelManagement({
 
       // Auto-apply the newly created label to this task
       let linkSucceeded = false;
-      let previousTasks: unknown;
+      const canonicalTaskId = taskId ?? task.id;
+      let cacheSnapshot:
+        | ReturnType<typeof snapshotVisibleTaskCaches>
+        | undefined;
       try {
         // Cancel any outgoing refetches
         await queryClient.cancelQueries({ queryKey: ['tasks', boardId] });
+        await queryClient.cancelQueries({ queryKey: ['tasks-full', boardId] });
 
         // Snapshot the previous value
-        previousTasks = queryClient.getQueryData(['tasks', boardId]);
+        cacheSnapshot = snapshotVisibleTaskCaches(queryClient, boardId, [
+          canonicalTaskId,
+        ]);
 
         // Optimistically update the cache
-        queryClient.setQueryData(
-          ['tasks', boardId],
-          (old: any[] | undefined) => {
-            if (!old) return old;
-            return old.map((t) => {
-              if (t.id === task.id) {
-                return {
-                  ...t,
-                  labels: [...(t.labels || []), newLabel],
-                };
-              }
-              return t;
-            });
-          }
-        );
-
-        // CRITICAL: Also update individual task cache if taskId is provided
-        if (taskId) {
-          queryClient.setQueryData(
-            ['task', taskId],
-            (old: Task | undefined) => {
-              if (!old) return old;
-              return {
-                ...old,
-                labels: [...(old.labels || []), newLabel],
-              };
+        patchTaskInVisibleCaches({
+          queryClient,
+          boardId,
+          taskId: canonicalTaskId,
+          updater: (cachedTask) => {
+            if (cachedTask.labels?.some((label) => label.id === newLabel.id)) {
+              return cachedTask;
             }
-          );
-        }
+
+            return {
+              ...cachedTask,
+              labels: [...(cachedTask.labels || []), newLabel],
+            };
+          },
+        });
 
         const taskState =
-          (queryClient.getQueryData(['task', task.id]) as Task | undefined) ??
-          task;
+          getTaskFromVisibleCaches({
+            queryClient,
+            boardId,
+            taskId: canonicalTaskId,
+            fallback: task,
+          }) ?? task;
         const nextLabelIds = [
           ...new Set([
             ...(taskState.labels ?? []).map((entry) => entry.id),
@@ -357,7 +366,7 @@ export function useTaskLabelManagement({
 
         await updateWorkspaceTask(
           workspaceId,
-          task.id,
+          canonicalTaskId,
           {
             label_ids: nextLabelIds,
           },
@@ -368,19 +377,19 @@ export function useTaskLabelManagement({
         linkSucceeded = true;
       } catch (linkErr: any) {
         // Rollback on error
-        queryClient.setQueryData(['tasks', boardId], previousTasks);
+        if (cacheSnapshot) {
+          restoreVisibleTaskCaches(queryClient, cacheSnapshot);
+        }
         toast.error(
           'The label was created but could not be attached to the task. Refresh and try manually.'
         );
-        if (taskId) {
-          queryClient.invalidateQueries({ queryKey: ['task', taskId] });
-        }
         console.error('Failed to auto-apply new label', linkErr);
       }
 
       // Only show success toast and reset form if link succeeded
       if (linkSucceeded) {
-        broadcast?.('task:relations-changed', { taskId: task.id });
+        broadcast?.('task:relations-changed', { taskId: canonicalTaskId });
+        getActiveBoardRefresh()?.({ invalidateTasks: false });
 
         // Reset form and close dialog
         setNewLabelName('');

package/src/components/ui/tu-do/hooks/useTaskProjectManagement.ts

@@ -6,7 +6,17 @@ import {
 import type { Task } from '@tuturuuu/types/primitives/Task';
 import { toast } from '@tuturuuu/ui/sonner';
 import { useState } from 'react';
-import { useBoardBroadcast } from '../shared/board-broadcast-context';
+import {
+  getActiveBoardRefresh,
+  useBoardBroadcast,
+} from '../shared/board-broadcast-context';
+import {
+  getTaskFromVisibleCaches,
+  patchTaskInVisibleCaches,
+  restoreTasksFromVisibleCacheSnapshot,
+  restoreVisibleTaskCaches,
+  snapshotVisibleTaskCaches,
+} from '../shared/task-cache-patches';
 
 function getInternalApiOptions() {
   if (typeof window === 'undefined') {
@@ -89,10 +99,14 @@ export function useTaskProjectManagement({
 
     // CRITICAL: Get current task state from cache instead of stale prop
     // This ensures we read the most up-to-date state after optimistic updates
-    const currentTask = taskId
-      ? ((queryClient.getQueryData(['task', taskId]) as Task | undefined) ??
-        task)
-      : task;
+    const canonicalTaskId = taskId ?? task.id;
+    const currentTask =
+      getTaskFromVisibleCaches({
+        queryClient,
+        boardId,
+        taskId: canonicalTaskId,
+        fallback: task,
+      }) ?? task;
 
     // Check if we're in multi-select mode with multiple tasks selected
     const shouldBulkUpdate =
@@ -107,11 +121,17 @@ export function useTaskProjectManagement({
 
     // Cancel any outgoing refetches
     await queryClient.cancelQueries({ queryKey: ['tasks', boardId] });
+    await queryClient.cancelQueries({ queryKey: ['tasks-full', boardId] });
 
     // Snapshot the previous value BEFORE optimistic update
     const previousTasks = queryClient.getQueryData(['tasks', boardId]) as
       | Task[]
       | undefined;
+    const cacheSnapshot = snapshotVisibleTaskCaches(
+      queryClient,
+      boardId,
+      tasksToUpdate
+    );
 
     // Determine action: remove if ALL selected tasks have the project, add otherwise
     // Use currentTask from cache, not stale task prop
@@ -133,6 +153,13 @@ export function useTaskProjectManagement({
       const fromBoardCache = previousTasks?.find((ct) => ct.id === taskId);
       if (fromBoardCache) return fromBoardCache;
 
+      const fromVisibleCaches = getTaskFromVisibleCaches({
+        queryClient,
+        boardId,
+        taskId,
+      });
+      if (fromVisibleCaches) return fromVisibleCaches;
+
       // Fallback to individual task cache (for tasks not in board view)
       if (taskId === currentTask.id) return currentTask;
 
@@ -156,54 +183,44 @@ export function useTaskProjectManagement({
 
     // Get project details from workspace projects for optimistic update
     const project = workspaceProjects.find((p) => p.id === projectId);
+    const fallbackProject = project
+      ? {
+          id: project.id,
+          name: project.name,
+          status: project.status ?? 'unknown',
+        }
+      : {
+          id: projectId,
+          name: 'Unknown',
+          status: 'unknown',
+        };
 
     // Optimistically update the cache - only update tasks that actually change
-    queryClient.setQueryData(['tasks', boardId], (old: Task[] | undefined) => {
-      if (!old) return old;
-      return old.map((t) => {
-        if (active && tasksToRemoveFrom.includes(t.id)) {
-          // Remove the project
-          return {
-            ...t,
-            projects: t.projects?.filter((p: any) => p.id !== projectId) || [],
-          };
-        } else if (!active && tasksNeedingProject.includes(t.id)) {
-          // Add the project
-          return {
-            ...t,
-            projects: [
-              ...(t.projects || []),
-              project || { id: projectId, name: 'Unknown', status: 'unknown' },
-            ],
-          };
-        }
-        return t;
-      });
-    });
-
-    // CRITICAL: Also update the individual task cache if taskId is provided
-    // This ensures the chip menu's task cache stays in sync with the board cache
-    if (taskId) {
-      queryClient.setQueryData(['task', taskId], (old: Task | undefined) => {
-        if (!old) return old;
-        if (active && tasksToRemoveFrom.includes(taskId)) {
-          // Remove the project
-          return {
-            ...old,
-            projects:
-              old.projects?.filter((p: any) => p.id !== projectId) || [],
-          };
-        } else if (!active && tasksNeedingProject.includes(taskId)) {
-          // Add the project
+    for (const tid of active ? tasksToRemoveFrom : tasksNeedingProject) {
+      patchTaskInVisibleCaches({
+        queryClient,
+        boardId,
+        taskId: tid,
+        updater: (cachedTask) => {
+          if (active) {
+            return {
+              ...cachedTask,
+              projects:
+                cachedTask.projects?.filter(
+                  (entry) => entry.id !== projectId
+                ) || [],
+            };
+          }
+
+          if (cachedTask.projects?.some((entry) => entry.id === projectId)) {
+            return cachedTask;
+          }
+
           return {
-            ...old,
-            projects: [
-              ...(old.projects || []),
-              project || { id: projectId, name: 'Unknown', status: 'unknown' },
-            ],
+            ...cachedTask,
+            projects: [...(cachedTask.projects || []), fallbackProject],
           };
-        }
-        return old;
+        },
       });
     }
 
@@ -281,34 +298,19 @@ export function useTaskProjectManagement({
         (taskId) => !succeededTaskIds.includes(taskId)
       );
 
-      if (failedTaskIds.length > 0 && previousTasks) {
-        const previousTaskMap = new Map(previousTasks.map((t) => [t.id, t]));
-        queryClient.setQueryData(
-          ['tasks', boardId],
-          (current: Task[] | undefined) => {
-            if (!current) return current;
-            return current.map((task) => {
-              if (!failedTaskIds.includes(task.id)) {
-                return task;
-              }
-
-              return previousTaskMap.get(task.id) || task;
-            });
-          }
-        );
-
-        if (taskId && failedTaskIds.includes(taskId)) {
-          const previousTask = previousTaskMap.get(taskId);
-          if (previousTask) {
-            queryClient.setQueryData(['task', taskId], previousTask);
-          }
-        }
-      }
+      restoreTasksFromVisibleCacheSnapshot({
+        queryClient,
+        snapshot: cacheSnapshot,
+        taskIds: failedTaskIds,
+      });
 
       // Broadcast relation changes for all affected tasks
       for (const tid of succeededTaskIds) {
         broadcast?.('task:relations-changed', { taskId: tid });
       }
+      if (succeededTaskIds.length > 0) {
+        getActiveBoardRefresh()?.({ invalidateTasks: false });
+      }
 
       if (failedTaskIds.length > 0) {
         toast.warning(
@@ -329,17 +331,7 @@ export function useTaskProjectManagement({
       // Don't auto-clear selection - let user manually clear with "Clear" button
     } catch (e: any) {
       // Rollback on error
-      if (previousTasks) {
-        queryClient.setQueryData(['tasks', boardId], previousTasks);
-        if (taskId) {
-          const previousTask = previousTasks.find(
-            (entry) => entry.id === taskId
-          );
-          if (previousTask) {
-            queryClient.setQueryData(['task', taskId], previousTask);
-          }
-        }
-      }
+      restoreVisibleTaskCaches(queryClient, cacheSnapshot);
       console.error('Failed to toggle project:', e);
       toast.error('Error', {
         description: 'Failed to update project. Please try again.',
@@ -355,52 +347,55 @@ export function useTaskProjectManagement({
       const newProject =
         await createProjectMutation.mutateAsync(newProjectName);
       const canonicalTaskId = taskId ?? task.id;
+      const projectForCache = {
+        id: newProject.id,
+        name: newProject.name,
+        status: newProject.status ?? 'unknown',
+      };
 
       // Auto-apply the newly created project to this task
       let linkSucceeded = false;
-      let previousTasks: Task[] | undefined;
+      let cacheSnapshot:
+        | ReturnType<typeof snapshotVisibleTaskCaches>
+        | undefined;
       try {
         // Cancel any outgoing refetches
         await queryClient.cancelQueries({ queryKey: ['tasks', boardId] });
+        await queryClient.cancelQueries({ queryKey: ['tasks-full', boardId] });
 
         // Snapshot the previous value
-        previousTasks = queryClient.getQueryData(['tasks', boardId]);
+        cacheSnapshot = snapshotVisibleTaskCaches(queryClient, boardId, [
+          canonicalTaskId,
+        ]);
 
         // Optimistically update the cache
-        queryClient.setQueryData(
-          ['tasks', boardId],
-          (old: Task[] | undefined) => {
-            if (!old) return old;
-            return old.map((t) => {
-              if (t.id === canonicalTaskId) {
-                return {
-                  ...t,
-                  projects: [...(t.projects || []), newProject],
-                };
-              }
-              return t;
-            });
-          }
-        );
-
-        // CRITICAL: Also update individual task cache if taskId is provided
-        if (canonicalTaskId) {
-          queryClient.setQueryData(
-            ['task', canonicalTaskId],
-            (old: Task | undefined) => {
-              if (!old) return old;
-              return {
-                ...old,
-                projects: [...(old.projects || []), newProject],
-              };
+        patchTaskInVisibleCaches({
+          queryClient,
+          boardId,
+          taskId: canonicalTaskId,
+          updater: (cachedTask) => {
+            if (
+              cachedTask.projects?.some(
+                (project) => project.id === newProject.id
+              )
+            ) {
+              return cachedTask;
             }
-          );
-        }
+
+            return {
+              ...cachedTask,
+              projects: [...(cachedTask.projects || []), projectForCache],
+            };
+          },
+        });
 
         const taskState =
-          (queryClient.getQueryData(['task', canonicalTaskId]) as
-            | Task
-            | undefined) ?? task;
+          getTaskFromVisibleCaches({
+            queryClient,
+            boardId,
+            taskId: canonicalTaskId,
+            fallback: task,
+          }) ?? task;
         const nextProjectIds = [
           ...new Set([
             ...(taskState.projects ?? []).map((entry) => entry.id),
@@ -418,21 +413,19 @@ export function useTaskProjectManagement({
         );
         linkSucceeded = true;
       } catch (applyErr: any) {
-        queryClient.setQueryData(['tasks', boardId], previousTasks);
+        if (cacheSnapshot) {
+          restoreVisibleTaskCaches(queryClient, cacheSnapshot);
+        }
         toast.error(
           'The project was created but could not be attached to the task. Refresh and try manually.'
         );
-        if (canonicalTaskId) {
-          queryClient.invalidateQueries({
-            queryKey: ['task', canonicalTaskId],
-          });
-        }
         console.error('Failed to auto-apply new project', applyErr);
       }
 
       // Only show success toast and reset form if link succeeded
       if (linkSucceeded) {
         broadcast?.('task:relations-changed', { taskId: canonicalTaskId });
+        getActiveBoardRefresh()?.({ invalidateTasks: false });
 
         // Reset form and close dialog
         setNewProjectName('');