@tuturuuu/ui 0.4.1 → 0.6.0

package/src/components/ui/tu-do/my-tasks/use-task-context-actions.ts

@@ -10,9 +10,11 @@ import {
 } from '@tuturuuu/internal-api';
 import type { TaskWithRelations } from '@tuturuuu/types';
 import type { TaskPriority } from '@tuturuuu/types/primitives/Priority';
+import { getActiveTaskUserBroadcast } from '@tuturuuu/ui/hooks/useTaskUserRealtime';
 import { toast } from '@tuturuuu/ui/sonner';
 import { useTranslations } from 'next-intl';
 import { useCallback, useState } from 'react';
+import { dispatchTaskSoundCue } from '../shared/task-sound-effects';
 import {
   MY_COMPLETED_TASKS_QUERY_KEY,
   MY_TASKS_QUERY_KEY,
@@ -37,6 +39,7 @@ export function useTaskContextActions({
   const [isLoading, setIsLoading] = useState(false);
   const taskWorkspaceId = task.list?.board?.ws_id ?? null;
   const taskBoardId = task.list?.board?.id ?? null;
+  const taskListId = task.list_id ?? task.list?.id ?? null;
 
   const invalidateQueries = useCallback(() => {
     queryClient.invalidateQueries({ queryKey: [MY_TASKS_QUERY_KEY] });
@@ -65,6 +68,63 @@ export function useTaskContextActions({
     [queryClient, task.id]
   );
 
+  const broadcastTaskUpsert = useCallback(
+    (updates: Record<string, unknown>) => {
+      const broadcast = getActiveTaskUserBroadcast();
+      if (!broadcast) return;
+
+      const nextListId =
+        typeof updates.list_id === 'string' ? updates.list_id : taskListId;
+      broadcast('task:upsert', {
+        actor_user_id: userId,
+        actorUserId: userId,
+        boardId: taskBoardId,
+        listId: nextListId,
+        task: {
+          id: task.id,
+          name: task.name,
+          description: task.description ?? null,
+          priority: task.priority ?? null,
+          start_date: task.start_date ?? null,
+          end_date: task.end_date ?? null,
+          list_id: nextListId,
+          created_at: task.created_at ?? null,
+          list: task.list,
+          overrides: task.overrides,
+          ...updates,
+        },
+      });
+    },
+    [task, taskBoardId, taskListId, userId]
+  );
+
+  const broadcastTaskDelete = useCallback(() => {
+    const broadcast = getActiveTaskUserBroadcast();
+    if (!broadcast) return;
+
+    broadcast('task:delete', {
+      actor_user_id: userId,
+      actorUserId: userId,
+      boardId: taskBoardId,
+      listId: taskListId,
+      taskId: task.id,
+    });
+  }, [task.id, taskBoardId, taskListId, userId]);
+
+  const broadcastTaskRelationsChanged = useCallback(() => {
+    const broadcast = getActiveTaskUserBroadcast();
+    if (!broadcast) return;
+
+    broadcast('task:relations-changed', {
+      actor_user_id: userId,
+      actorUserId: userId,
+      boardId: taskBoardId,
+      listId: taskListId,
+      taskId: task.id,
+      taskIds: [task.id],
+    });
+  }, [task.id, taskBoardId, taskListId, userId]);
+
   const handlePriorityChange = useCallback(
     async (priority: TaskPriority | null) => {
       setIsLoading(true);
@@ -72,7 +132,9 @@ export function useTaskContextActions({
       try {
         if (!taskWorkspaceId) throw new Error('Task workspace not found');
         await updateWorkspaceTask(taskWorkspaceId, task.id, { priority });
+        broadcastTaskUpsert({ priority });
         invalidateQueries();
+        dispatchTaskSoundCue('update');
       } catch {
         toast.error(t('failed_to_update'));
         invalidateQueries();
@@ -80,7 +142,14 @@ export function useTaskContextActions({
         setIsLoading(false);
       }
     },
-    [task.id, taskWorkspaceId, updateTaskInCache, invalidateQueries, t]
+    [
+      task.id,
+      taskWorkspaceId,
+      updateTaskInCache,
+      invalidateQueries,
+      broadcastTaskUpsert,
+      t,
+    ]
   );
 
   const handleDueDateChange = useCallback(
@@ -96,7 +165,9 @@ export function useTaskContextActions({
         await updateWorkspaceTask(taskWorkspaceId, task.id, {
           end_date: newDate,
         });
+        broadcastTaskUpsert({ end_date: newDate });
         invalidateQueries();
+        dispatchTaskSoundCue('update');
       } catch {
         toast.error(t('failed_to_update'));
         invalidateQueries();
@@ -104,7 +175,14 @@ export function useTaskContextActions({
         setIsLoading(false);
       }
     },
-    [task.id, taskWorkspaceId, updateTaskInCache, invalidateQueries, t]
+    [
+      task.id,
+      taskWorkspaceId,
+      updateTaskInCache,
+      invalidateQueries,
+      broadcastTaskUpsert,
+      t,
+    ]
   );
 
   const handleToggleLabel = useCallback(
@@ -118,7 +196,9 @@ export function useTaskContextActions({
         } else {
           await addWorkspaceTaskLabel(taskWorkspaceId, task.id, labelId);
         }
+        broadcastTaskRelationsChanged();
         invalidateQueries();
+        dispatchTaskSoundCue('update');
       } catch {
         toast.error(t('failed_to_update'));
         invalidateQueries();
@@ -126,7 +206,14 @@ export function useTaskContextActions({
         setIsLoading(false);
       }
     },
-    [task.id, task.labels, taskWorkspaceId, invalidateQueries, t]
+    [
+      task.id,
+      task.labels,
+      taskWorkspaceId,
+      invalidateQueries,
+      broadcastTaskRelationsChanged,
+      t,
+    ]
   );
 
   const handleComplete = useCallback(async () => {
@@ -147,6 +234,9 @@ export function useTaskContextActions({
       await updateWorkspaceTask(taskWorkspaceId, task.id, {
         list_id: doneList.id,
       });
+      broadcastTaskUpsert({
+        list_id: doneList.id,
+      });
 
       // Clear redundant personal overrides when task is actually done
       if (
@@ -167,6 +257,7 @@ export function useTaskContextActions({
 
       onTaskUpdate();
       onClose();
+      dispatchTaskSoundCue('complete');
     } catch {
       toast.error(t('failed_to_update'));
     } finally {
@@ -177,6 +268,7 @@ export function useTaskContextActions({
     taskBoardId,
     taskWorkspaceId,
     task.overrides,
+    broadcastTaskUpsert,
     onTaskUpdate,
     onClose,
     t,
@@ -194,14 +286,16 @@ export function useTaskContextActions({
         }
       );
       if (!response.ok) throw new Error('Failed');
+      broadcastTaskDelete();
       onTaskUpdate();
       onClose();
+      dispatchTaskSoundCue('complete');
     } catch {
       toast.error(t('failed_to_update'));
     } finally {
       setIsLoading(false);
     }
-  }, [task.id, onTaskUpdate, onClose, t]);
+  }, [task.id, broadcastTaskDelete, onTaskUpdate, onClose, t]);
 
   const handleUndoDoneWithMyPart = useCallback(async () => {
     setIsLoading(true);
@@ -218,14 +312,22 @@ export function useTaskContextActions({
         }
       );
       if (!response.ok) throw new Error('Failed');
+      broadcastTaskUpsert({
+        overrides: {
+          ...task.overrides,
+          personally_unassigned: false,
+          completed_at: null,
+        },
+      });
       onTaskUpdate();
       onClose();
+      dispatchTaskSoundCue('update');
     } catch {
       toast.error(t('failed_to_update'));
     } finally {
       setIsLoading(false);
     }
-  }, [task.id, onTaskUpdate, onClose, t]);
+  }, [task.id, task.overrides, broadcastTaskUpsert, onTaskUpdate, onClose, t]);
 
   const handleUndoComplete = useCallback(async () => {
     if (!taskBoardId || !taskWorkspaceId) return;
@@ -247,15 +349,25 @@ export function useTaskContextActions({
       await updateWorkspaceTask(taskWorkspaceId, task.id, {
         list_id: activeList.id,
       });
+      broadcastTaskUpsert({ list_id: activeList.id });
 
       onTaskUpdate();
       onClose();
+      dispatchTaskSoundCue('move');
     } catch {
       toast.error(t('failed_to_update'));
     } finally {
       setIsLoading(false);
     }
-  }, [task.id, taskBoardId, taskWorkspaceId, onTaskUpdate, onClose, t]);
+  }, [
+    task.id,
+    taskBoardId,
+    taskWorkspaceId,
+    broadcastTaskUpsert,
+    onTaskUpdate,
+    onClose,
+    t,
+  ]);
 
   const handleUnassignMe = useCallback(async () => {
     setIsLoading(true);
@@ -283,8 +395,10 @@ export function useTaskContextActions({
             Boolean(assigneeId && assigneeId !== userId)
           ),
       });
+      broadcastTaskDelete();
       onTaskUpdate();
       onClose();
+      dispatchTaskSoundCue('update');
     } catch {
       toast.error(t('failed_to_update'));
       invalidateQueries();
@@ -301,6 +415,7 @@ export function useTaskContextActions({
     invalidateQueries,
     t,
     task.assignees,
+    broadcastTaskDelete,
   ]);
 
   const handleDelete = useCallback(async () => {
@@ -308,14 +423,16 @@ export function useTaskContextActions({
     try {
       if (!taskWorkspaceId) throw new Error('Task workspace not found');
       await deleteWorkspaceTask(taskWorkspaceId, task.id);
+      broadcastTaskDelete();
       onTaskUpdate();
       onClose();
+      dispatchTaskSoundCue('delete');
     } catch {
       toast.error(t('failed_to_update'));
     } finally {
       setIsLoading(false);
     }
-  }, [task.id, taskWorkspaceId, onTaskUpdate, onClose, t]);
+  }, [task.id, taskWorkspaceId, broadcastTaskDelete, onTaskUpdate, onClose, t]);
 
   return {
     isLoading,

package/src/components/ui/tu-do/providers/__tests__/task-dialog-provider.test.tsx

@@ -9,8 +9,8 @@ import {
   useTaskDialogContext,
 } from '../task-dialog-provider';
 
-const { mockGetCurrentUserTask } = vi.hoisted(() => ({
-  mockGetCurrentUserTask: vi.fn(),
+const { mockGetTaskDialogHydration } = vi.hoisted(() => ({
+  mockGetTaskDialogHydration: vi.fn(),
 }));
 
 vi.mock('@tuturuuu/internal-api/tasks', async () => {
@@ -20,7 +20,7 @@ vi.mock('@tuturuuu/internal-api/tasks', async () => {
 
   return {
     ...actual,
-    getCurrentUserTask: mockGetCurrentUserTask,
+    getTaskDialogHydration: mockGetTaskDialogHydration,
   };
 });
 
@@ -59,13 +59,25 @@ const wrapper = ({ children }: { children: ReactNode }) => (
   <TaskDialogProvider>{children}</TaskDialogProvider>
 );
 
+function createDeferred<T>() {
+  let resolve!: (value: T) => void;
+  let reject!: (reason?: unknown) => void;
+  const promise = new Promise<T>((promiseResolve, promiseReject) => {
+    resolve = promiseResolve;
+    reject = promiseReject;
+  });
+
+  return { promise, resolve, reject };
+}
+
 describe('TaskDialogProvider', () => {
   afterEach(() => {
+    mockGetTaskDialogHydration.mockReset();
     vi.useRealTimers();
   });
 
   it('should enable collaborationMode for paid task workspaces opened by id', async () => {
-    mockGetCurrentUserTask.mockResolvedValueOnce({
+    mockGetTaskDialogHydration.mockResolvedValueOnce({
       task: {
         ...mockTask,
         list: { board_id: 'board-1' },
@@ -87,7 +99,7 @@ describe('TaskDialogProvider', () => {
   });
 
   it('should disable collaborationMode for free task workspaces opened by id', async () => {
-    mockGetCurrentUserTask.mockResolvedValueOnce({
+    mockGetTaskDialogHydration.mockResolvedValueOnce({
       task: {
         ...mockTask,
         list: { board_id: 'board-1' },
@@ -108,6 +120,206 @@ describe('TaskDialogProvider', () => {
     expect(result.current.state.taskWorkspaceTier).toBe('FREE');
   });
 
+  it('opens by id immediately from an initial snapshot before hydrating task details', async () => {
+    const initialSharedContext = {
+      boardConfig: {
+        id: 'board-1',
+        name: 'Visible board',
+        ws_id: 'workspace-1',
+        ticket_prefix: 'VIS',
+      },
+      availableLists: [mockList],
+      workspaceLabels: [],
+      workspaceMembers: [],
+      workspaceProjects: [],
+    };
+    const deferred = createDeferred<{
+      task: Task & { list?: { board_id?: string | null } | null };
+      availableLists: TaskList[];
+      taskWsId: string;
+      taskWorkspacePersonal: boolean;
+      taskWorkspaceTier: 'PRO';
+    }>();
+    mockGetTaskDialogHydration.mockReturnValueOnce(deferred.promise);
+
+    const { result } = renderHook(() => useTaskDialogContext(), { wrapper });
+    let openPromise!: Promise<boolean>;
+
+    act(() => {
+      openPromise = result.current.openTaskById(mockTask.id, {
+        initialTask: { ...mockTask, name: 'Visible snapshot' },
+        boardId: 'board-1',
+        availableLists: [mockList],
+        taskWsId: 'workspace-1',
+        initialSharedContext,
+      });
+    });
+
+    expect(result.current.state).toMatchObject({
+      isOpen: true,
+      isHydratingTask: true,
+      taskLoadError: false,
+      boardId: 'board-1',
+      realtimeEnabled: false,
+      initialSharedContext,
+      task: {
+        id: mockTask.id,
+        name: 'Visible snapshot',
+      },
+    });
+
+    await act(async () => {
+      deferred.resolve({
+        task: {
+          ...mockTask,
+          name: 'Hydrated task',
+          list: { board_id: 'board-1' },
+        },
+        availableLists: [mockList],
+        taskWsId: 'workspace-1',
+        taskWorkspacePersonal: false,
+        taskWorkspaceTier: 'PRO',
+      });
+      await openPromise;
+    });
+
+    expect(mockGetTaskDialogHydration).toHaveBeenCalledWith(
+      mockTask.id,
+      {
+        taskWsId: 'workspace-1',
+        taskWorkspacePersonal: undefined,
+        taskWorkspaceTier: undefined,
+      },
+      expect.objectContaining({
+        fetch: expect.any(Function),
+      })
+    );
+    expect(result.current.state).toMatchObject({
+      isOpen: true,
+      isHydratingTask: false,
+      taskLoadError: false,
+      collaborationMode: true,
+      realtimeEnabled: true,
+      taskHydrationVersion: 1,
+      taskWorkspaceTier: 'PRO',
+      task: {
+        id: mockTask.id,
+        name: 'Hydrated task',
+      },
+    });
+    expect(result.current.state.initialSharedContext).toBeUndefined();
+  });
+
+  it('keeps the dialog open in a non-editable error state when hydration fails', async () => {
+    const initialSharedContext = {
+      boardConfig: {
+        id: 'board-1',
+        name: 'Visible board',
+        ws_id: 'workspace-1',
+        ticket_prefix: 'VIS',
+      },
+      availableLists: [mockList],
+      workspaceLabels: [],
+      workspaceMembers: [],
+      workspaceProjects: [],
+    };
+    const deferred = createDeferred<never>();
+    mockGetTaskDialogHydration.mockReturnValueOnce(deferred.promise);
+
+    const { result } = renderHook(() => useTaskDialogContext(), { wrapper });
+    let openPromise!: Promise<boolean>;
+
+    act(() => {
+      openPromise = result.current.openTaskById(mockTask.id, {
+        initialTask: { ...mockTask, name: 'Visible snapshot' },
+        boardId: 'board-1',
+        initialSharedContext,
+      });
+    });
+
+    expect(result.current.state.isOpen).toBe(true);
+    expect(result.current.state.isHydratingTask).toBe(true);
+
+    await act(async () => {
+      deferred.reject(new Error('network failed'));
+      await openPromise;
+    });
+
+    expect(result.current.state).toMatchObject({
+      isOpen: true,
+      isHydratingTask: false,
+      taskLoadError: true,
+      initialSharedContext,
+      task: {
+        id: mockTask.id,
+        name: 'Visible snapshot',
+      },
+    });
+  });
+
+  it('ignores stale hydration responses after another task opens', async () => {
+    const firstDeferred = createDeferred<{
+      task: Task & { list?: { board_id?: string | null } | null };
+      availableLists: TaskList[];
+      taskWsId: string;
+      taskWorkspacePersonal: boolean;
+      taskWorkspaceTier: 'PRO';
+    }>();
+    mockGetTaskDialogHydration.mockReturnValueOnce(firstDeferred.promise);
+
+    const { result } = renderHook(() => useTaskDialogContext(), { wrapper });
+    let firstOpenPromise!: Promise<boolean>;
+
+    act(() => {
+      firstOpenPromise = result.current.openTaskById('task-1', {
+        initialTask: { ...mockTask, id: 'task-1', name: 'First snapshot' },
+        boardId: 'board-1',
+      });
+    });
+    act(() => {
+      result.current.closeDialog();
+    });
+    act(() => {
+      result.current.openTask(
+        { ...mockTask, id: 'task-2', name: 'Second task' },
+        'board-1',
+        [mockList]
+      );
+    });
+
+    expect(result.current.state).toMatchObject({
+      isOpen: true,
+      task: {
+        id: 'task-2',
+        name: 'Second task',
+      },
+    });
+
+    await act(async () => {
+      firstDeferred.resolve({
+        task: {
+          ...mockTask,
+          id: 'task-1',
+          name: 'Stale hydrated task',
+          list: { board_id: 'board-1' },
+        },
+        availableLists: [mockList],
+        taskWsId: 'workspace-1',
+        taskWorkspacePersonal: false,
+        taskWorkspaceTier: 'PRO',
+      });
+      await firstOpenPromise;
+    });
+
+    expect(result.current.state).toMatchObject({
+      isOpen: true,
+      task: {
+        id: 'task-2',
+        name: 'Second task',
+      },
+    });
+  });
+
   it('should provide initial dialog state', () => {
     const { result } = renderHook(() => useTaskDialogContext(), { wrapper });