@tuturuuu/ui 0.5.0 → 0.6.0

package/src/hooks/useBoardRealtime.ts

@@ -223,6 +223,18 @@ export function useBoardRealtime(
           payload as BoardRealtimePayload
         );
       })
+      .on('broadcast', { event: 'task:upsert:batch' }, ({ payload }) => {
+        handleBoardRealtimeEvent(
+          'task:upsert:batch',
+          payload as BoardRealtimePayload
+        );
+      })
+      .on('broadcast', { event: 'task:delete:batch' }, ({ payload }) => {
+        handleBoardRealtimeEvent(
+          'task:delete:batch',
+          payload as BoardRealtimePayload
+        );
+      })
       .on('broadcast', { event: 'list:upsert' }, ({ payload }) => {
         handleBoardRealtimeEvent(
           'list:upsert',
@@ -235,6 +247,18 @@ export function useBoardRealtime(
           payload as BoardRealtimePayload
         );
       })
+      .on('broadcast', { event: 'list:upsert:batch' }, ({ payload }) => {
+        handleBoardRealtimeEvent(
+          'list:upsert:batch',
+          payload as BoardRealtimePayload
+        );
+      })
+      .on('broadcast', { event: 'list:delete:batch' }, ({ payload }) => {
+        handleBoardRealtimeEvent(
+          'list:delete:batch',
+          payload as BoardRealtimePayload
+        );
+      })
       .on('broadcast', { event: 'task:relations-changed' }, ({ payload }) => {
         handleBoardRealtimeEvent(
           'task:relations-changed',
@@ -246,6 +270,22 @@ export function useBoardRealtime(
           'task:deps-changed',
           payload as BoardRealtimePayload
         );
+      })
+      .on(
+        'broadcast',
+        { event: 'task:relations-changed:batch' },
+        ({ payload }) => {
+          handleBoardRealtimeEvent(
+            'task:relations-changed:batch',
+            payload as BoardRealtimePayload
+          );
+        }
+      )
+      .on('broadcast', { event: 'task:deps-changed:batch' }, ({ payload }) => {
+        handleBoardRealtimeEvent(
+          'task:deps-changed:batch',
+          payload as BoardRealtimePayload
+        );
       });
 
     channel.subscribe((status, err) => {
@@ -328,11 +368,24 @@ export function useBoardRealtime(
           const existing = merged.get(task.id);
           merged.set(task.id, existing ? { ...existing, ...task } : task);
         }
-        for (const task of merged.values()) {
+        const tasks = [...merged.values()];
+        if (tasks.length > 1) {
+          sendBoardRealtimeEvent(channel, 'task:upsert:batch', {
+            payloads: tasks.map((task) => ({ task })),
+          });
+          continue;
+        }
+        for (const task of tasks) {
           sendBoardRealtimeEvent(channel, event, { task });
         }
       } else {
         // Other events (task:delete, list:upsert, list:delete) — send each
+        if (payloads.length > 1) {
+          sendBoardRealtimeEvent(channel, `${event}:batch`, {
+            payloads,
+          });
+          continue;
+        }
         for (const p of payloads) {
           sendBoardRealtimeEvent(channel, event, p);
         }

package/src/hooks/useBoardRealtimeEventHandler.ts

@@ -76,11 +76,120 @@ function updateBoardTaskCaches(
   boardId: string,
   updater: (old: Task[] | undefined) => Task[] | undefined
 ) {
-  queryClient.setQueryData(['tasks', boardId], updater);
+  queryClient.setQueryData<Task[]>(['tasks', boardId], updater);
+  queryClient.setQueryData<Task[]>(['tasks-full', boardId], updater);
+  queryClient.setQueriesData<Task[]>({ queryKey: ['tasks', boardId] }, updater);
+  queryClient.setQueriesData<Task[]>(
+    { queryKey: ['tasks-full', boardId] },
+    updater
+  );
+}
 
-  if (queryClient.getQueryData<Task[]>(['tasks-full', boardId])) {
-    queryClient.setQueryData(['tasks-full', boardId], updater);
-  }
+function patchWorkspaceTaskCaches(
+  queryClient: QueryClient,
+  taskData: Partial<Task> & { id: string }
+) {
+  queryClient.setQueriesData<{ task?: Task | null }>(
+    {
+      predicate: (query) =>
+        Array.isArray(query.queryKey) &&
+        query.queryKey[0] === 'workspaceTask' &&
+        query.queryKey[2] === taskData.id,
+    },
+    (old) =>
+      old?.task
+        ? {
+            ...old,
+            task: { ...old.task, ...taskData },
+          }
+        : old
+  );
+}
+
+function patchMyTasksCaches(
+  queryClient: QueryClient,
+  taskData: Partial<Task> & { id: string }
+) {
+  const patchTask = <T extends { id?: string }>(task: T): T =>
+    task.id === taskData.id ? ({ ...task, ...taskData } as T) : task;
+
+  queryClient.setQueriesData<{
+    overdue?: Array<{ id?: string }>;
+    today?: Array<{ id?: string }>;
+    upcoming?: Array<{ id?: string }>;
+    completed?: Array<{ id?: string }>;
+  }>({ queryKey: ['my-tasks'] }, (old) =>
+    old
+      ? {
+          ...old,
+          overdue: old.overdue?.map(patchTask) ?? old.overdue,
+          today: old.today?.map(patchTask) ?? old.today,
+          upcoming: old.upcoming?.map(patchTask) ?? old.upcoming,
+          completed: old.completed?.map(patchTask) ?? old.completed,
+        }
+      : old
+  );
+
+  queryClient.setQueriesData<{
+    pages?: Array<{ completed?: Array<{ id?: string }> }>;
+  }>({ queryKey: ['my-completed-tasks'] }, (old) =>
+    old?.pages
+      ? {
+          ...old,
+          pages: old.pages.map((page) => ({
+            ...page,
+            completed: page.completed?.map(patchTask) ?? page.completed,
+          })),
+        }
+      : old
+  );
+}
+
+function deleteFromMyTasksCaches(queryClient: QueryClient, taskId: string) {
+  const removeTask = <T extends { id?: string }>(tasks: T[] | undefined) =>
+    tasks?.filter((task) => task.id !== taskId);
+
+  queryClient.setQueriesData<{
+    overdue?: Array<{ id?: string }>;
+    today?: Array<{ id?: string }>;
+    upcoming?: Array<{ id?: string }>;
+    completed?: Array<{ id?: string }>;
+  }>({ queryKey: ['my-tasks'] }, (old) =>
+    old
+      ? {
+          ...old,
+          overdue: removeTask(old.overdue) ?? old.overdue,
+          today: removeTask(old.today) ?? old.today,
+          upcoming: removeTask(old.upcoming) ?? old.upcoming,
+          completed: removeTask(old.completed) ?? old.completed,
+        }
+      : old
+  );
+
+  queryClient.setQueriesData<{
+    pages?: Array<{ completed?: Array<{ id?: string }> }>;
+  }>({ queryKey: ['my-completed-tasks'] }, (old) =>
+    old?.pages
+      ? {
+          ...old,
+          pages: old.pages.map((page) => ({
+            ...page,
+            completed: removeTask(page.completed) ?? page.completed,
+          })),
+        }
+      : old
+  );
+}
+
+function invalidateTaskMembershipQueries(
+  queryClient: QueryClient,
+  boardId: string
+) {
+  void queryClient.invalidateQueries({
+    queryKey: ['task-list-counts', boardId],
+  });
+  void queryClient.invalidateQueries({ queryKey: ['my-tasks'] });
+  void queryClient.invalidateQueries({ queryKey: ['my-completed-tasks'] });
 }
 
 export function useBoardRealtimeEventHandler({
@@ -164,6 +273,10 @@ export function useBoardRealtimeEventHandler({
           return relations ? { ...task, ...relations } : task;
         });
       });
+      for (const [taskId, relations] of relationsMap.entries()) {
+        patchWorkspaceTaskCaches(queryClient, { id: taskId, ...relations });
+        patchMyTasksCaches(queryClient, { id: taskId, ...relations });
+      }
     } catch (err) {
       if (DEV_MODE) {
         console.error(
@@ -178,8 +291,40 @@ export function useBoardRealtimeEventHandler({
     (event: string, payload: BoardRealtimePayload) => {
       if (rememberEventId(payload)) return;
 
+      if (event.endsWith(':batch')) {
+        const baseEvent = event.slice(0, -':batch'.length);
+        const payloads = Array.isArray(payload.payloads)
+          ? payload.payloads
+          : Array.isArray(payload.events)
+            ? payload.events
+                .filter((entry) => {
+                  return (
+                    typeof entry === 'object' &&
+                    entry !== null &&
+                    'payload' in entry
+                  );
+                })
+                .map((entry) => (entry as { payload: unknown }).payload)
+            : [];
+
+        for (const childPayload of payloads) {
+          if (
+            typeof childPayload === 'object' &&
+            childPayload !== null &&
+            !Array.isArray(childPayload)
+          ) {
+            handleBoardRealtimeEvent(
+              baseEvent,
+              childPayload as BoardRealtimePayload
+            );
+          }
+        }
+        return;
+      }
+
       if (event === 'task:upsert') {
         const taskData = payload.task as Partial<Task> & { id: string };
+        if (!taskData?.id) return;
         if (DEV_MODE) {
           console.log('[useBoardRealtime] task:upsert received', taskData.id);
         }
@@ -193,6 +338,17 @@ export function useBoardRealtimeEventHandler({
         updateBoardTaskCaches(queryClient, boardId, (old) =>
           mergeRealtimeTask(old, taskData)
         );
+        patchWorkspaceTaskCaches(queryClient, taskData);
+        patchMyTasksCaches(queryClient, taskData);
+        if (
+          'list_id' in taskData ||
+          'completed' in taskData ||
+          'completed_at' in taskData ||
+          'closed_at' in taskData ||
+          'deleted_at' in taskData
+        ) {
+          invalidateTaskMembershipQueries(queryClient, boardId);
+        }
         return;
       }
 
@@ -208,6 +364,14 @@ export function useBoardRealtimeEventHandler({
         updateBoardTaskCaches(queryClient, boardId, (old) =>
           deleteRealtimeTask(old, taskId)
         );
+        deleteFromMyTasksCaches(queryClient, taskId);
+        queryClient.removeQueries({
+          predicate: (query) =>
+            Array.isArray(query.queryKey) &&
+            query.queryKey[0] === 'workspaceTask' &&
+            query.queryKey[2] === taskId,
+        });
+        invalidateTaskMembershipQueries(queryClient, boardId);
 
         if (deleted) {
           onTaskChangeRef.current?.(deleted, 'DELETE');
@@ -262,6 +426,7 @@ export function useBoardRealtimeEventHandler({
         updateBoardTaskCaches(queryClient, boardId, (old) =>
           old?.filter((task) => task.list_id !== listId)
         );
+        invalidateTaskMembershipQueries(queryClient, boardId);
 
         if (deleted) {
           onListChangeRef.current?.(deleted, 'DELETE');

package/src/hooks/useTaskUserRealtime.ts

@@ -0,0 +1,338 @@
+'use client';
+
+import type { QueryClient } from '@tanstack/react-query';
+import { useQueryClient } from '@tanstack/react-query';
+import { createClient } from '@tuturuuu/supabase/next/client';
+import { DEV_MODE } from '@tuturuuu/utils/constants';
+import { useCallback, useEffect, useRef } from 'react';
+import {
+  type BoardRealtimePayload,
+  createRealtimeClientId,
+  type RealtimeChannel,
+  SEEN_REALTIME_EVENT_LIMIT,
+} from './useBoardRealtime.types';
+
+export const TASK_USER_REALTIME_CHANNEL_PREFIX = 'task-user-realtime';
+
+export function getTaskUserRealtimeChannelName(userId: string) {
+  return `${TASK_USER_REALTIME_CHANNEL_PREFIX}-${userId}`;
+}
+
+type TaskLike = { id?: string };
+type TaskUserBroadcastFn = (
+  event: string,
+  payload: Record<string, unknown>
+) => void;
+
+let activeTaskUserBroadcast: TaskUserBroadcastFn | null = null;
+
+export function setActiveTaskUserBroadcast(fn: TaskUserBroadcastFn | null) {
+  activeTaskUserBroadcast = fn;
+}
+
+export function getActiveTaskUserBroadcast(): TaskUserBroadcastFn | null {
+  return activeTaskUserBroadcast;
+}
+
+function rememberEventId(
+  seen: Set<string>,
+  payload: BoardRealtimePayload
+): boolean {
+  const eventId = payload.__tuturuuuBoardRealtimeEventId;
+  if (typeof eventId !== 'string' || eventId.length === 0) return false;
+  if (seen.has(eventId)) return true;
+
+  seen.add(eventId);
+  while (seen.size > SEEN_REALTIME_EVENT_LIMIT) {
+    const first = seen.values().next().value;
+    if (!first) break;
+    seen.delete(first);
+  }
+
+  return false;
+}
+
+function patchTaskList<T extends TaskLike>(
+  tasks: T[] | undefined,
+  taskData: TaskLike
+) {
+  if (!tasks || !taskData.id) return tasks;
+  return tasks.map((task) =>
+    task.id === taskData.id ? ({ ...task, ...taskData } as T) : task
+  );
+}
+
+function removeTaskFromList<T extends TaskLike>(
+  tasks: T[] | undefined,
+  taskId: string
+) {
+  return tasks?.filter((task) => task.id !== taskId);
+}
+
+function patchMyTasksCaches(queryClient: QueryClient, taskData: TaskLike) {
+  queryClient.setQueriesData<{
+    overdue?: TaskLike[];
+    today?: TaskLike[];
+    upcoming?: TaskLike[];
+    completed?: TaskLike[];
+  }>({ queryKey: ['my-tasks'] }, (old) =>
+    old
+      ? {
+          ...old,
+          overdue: patchTaskList(old.overdue, taskData) ?? old.overdue,
+          today: patchTaskList(old.today, taskData) ?? old.today,
+          upcoming: patchTaskList(old.upcoming, taskData) ?? old.upcoming,
+          completed: patchTaskList(old.completed, taskData) ?? old.completed,
+        }
+      : old
+  );
+
+  queryClient.setQueriesData<{
+    pages?: Array<{ completed?: TaskLike[] }>;
+  }>({ queryKey: ['my-completed-tasks'] }, (old) =>
+    old?.pages
+      ? {
+          ...old,
+          pages: old.pages.map((page) => ({
+            ...page,
+            completed:
+              patchTaskList(page.completed, taskData) ?? page.completed,
+          })),
+        }
+      : old
+  );
+}
+
+function removeFromMyTasksCaches(queryClient: QueryClient, taskId: string) {
+  queryClient.setQueriesData<{
+    overdue?: TaskLike[];
+    today?: TaskLike[];
+    upcoming?: TaskLike[];
+    completed?: TaskLike[];
+  }>({ queryKey: ['my-tasks'] }, (old) =>
+    old
+      ? {
+          ...old,
+          overdue: removeTaskFromList(old.overdue, taskId) ?? old.overdue,
+          today: removeTaskFromList(old.today, taskId) ?? old.today,
+          upcoming: removeTaskFromList(old.upcoming, taskId) ?? old.upcoming,
+          completed: removeTaskFromList(old.completed, taskId) ?? old.completed,
+        }
+      : old
+  );
+
+  queryClient.setQueriesData<{
+    pages?: Array<{ completed?: TaskLike[] }>;
+  }>({ queryKey: ['my-completed-tasks'] }, (old) =>
+    old?.pages
+      ? {
+          ...old,
+          pages: old.pages.map((page) => ({
+            ...page,
+            completed:
+              removeTaskFromList(page.completed, taskId) ?? page.completed,
+          })),
+        }
+      : old
+  );
+}
+
+export function useTaskUserRealtime(userId: string | null | undefined) {
+  const queryClient = useQueryClient();
+  const channelRef = useRef<RealtimeChannel | null>(null);
+  const seenEventIdsRef = useRef<Set<string>>(new Set());
+  const invalidateTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const clientIdRef = useRef<string>(createRealtimeClientId());
+  const eventCounterRef = useRef(0);
+
+  const withEventMetadata = useCallback(
+    (payload: Record<string, unknown>): BoardRealtimePayload => {
+      eventCounterRef.current += 1;
+      return {
+        ...payload,
+        __tuturuuuBoardRealtimeEventId: `${clientIdRef.current}:${Date.now()}:${eventCounterRef.current}`,
+        __tuturuuuBoardRealtimeOrigin: clientIdRef.current,
+      };
+    },
+    []
+  );
+
+  const broadcast = useCallback<TaskUserBroadcastFn>(
+    (event, payload) => {
+      const channel = channelRef.current;
+      if (!channel) return;
+
+      channel.send({
+        type: 'broadcast',
+        event,
+        payload: withEventMetadata(payload),
+      });
+    },
+    [withEventMetadata]
+  );
+
+  useEffect(() => {
+    if (!userId) return;
+
+    const scheduleInvalidate = () => {
+      if (invalidateTimerRef.current) {
+        clearTimeout(invalidateTimerRef.current);
+      }
+
+      invalidateTimerRef.current = setTimeout(() => {
+        invalidateTimerRef.current = null;
+        void queryClient.invalidateQueries({ queryKey: ['my-tasks'] });
+        void queryClient.invalidateQueries({
+          queryKey: ['my-completed-tasks'],
+        });
+      }, 150);
+    };
+
+    const handleEvent = (event: string, payload: BoardRealtimePayload) => {
+      if (payload.__tuturuuuBoardRealtimeOrigin === clientIdRef.current) {
+        return;
+      }
+      if (rememberEventId(seenEventIdsRef.current, payload)) return;
+
+      if (event.endsWith(':batch')) {
+        const baseEvent = event.slice(0, -':batch'.length);
+        const payloads = Array.isArray(payload.payloads)
+          ? payload.payloads
+          : Array.isArray(payload.events)
+            ? payload.events
+                .filter((entry) => {
+                  return (
+                    typeof entry === 'object' &&
+                    entry !== null &&
+                    'payload' in entry
+                  );
+                })
+                .map((entry) => (entry as { payload: unknown }).payload)
+            : [];
+
+        for (const childPayload of payloads) {
+          if (
+            typeof childPayload === 'object' &&
+            childPayload !== null &&
+            !Array.isArray(childPayload)
+          ) {
+            handleEvent(baseEvent, childPayload as BoardRealtimePayload);
+          }
+        }
+        return;
+      }
+
+      if (event === 'task:upsert') {
+        const task = payload.task as TaskLike | undefined;
+        if (task?.id) patchMyTasksCaches(queryClient, task);
+        scheduleInvalidate();
+        return;
+      }
+
+      if (event === 'task:delete') {
+        const taskId =
+          typeof payload.taskId === 'string' ? payload.taskId : undefined;
+        if (taskId) removeFromMyTasksCaches(queryClient, taskId);
+        scheduleInvalidate();
+        return;
+      }
+
+      if (
+        event === 'task:relations-changed' ||
+        event === 'task:deps-changed' ||
+        event === 'list:upsert' ||
+        event === 'list:delete'
+      ) {
+        scheduleInvalidate();
+      }
+    };
+
+    const supabase = createClient();
+    if (
+      typeof supabase.channel !== 'function' ||
+      typeof supabase.removeChannel !== 'function'
+    ) {
+      return;
+    }
+
+    const channel = supabase.channel(getTaskUserRealtimeChannelName(userId), {
+      config: { broadcast: { self: false } },
+    });
+    channelRef.current = channel;
+
+    channel
+      .on('broadcast', { event: 'task:upsert' }, ({ payload }) => {
+        handleEvent('task:upsert', payload as BoardRealtimePayload);
+      })
+      .on('broadcast', { event: 'task:delete' }, ({ payload }) => {
+        handleEvent('task:delete', payload as BoardRealtimePayload);
+      })
+      .on('broadcast', { event: 'task:upsert:batch' }, ({ payload }) => {
+        handleEvent('task:upsert:batch', payload as BoardRealtimePayload);
+      })
+      .on('broadcast', { event: 'task:delete:batch' }, ({ payload }) => {
+        handleEvent('task:delete:batch', payload as BoardRealtimePayload);
+      })
+      .on('broadcast', { event: 'task:relations-changed' }, ({ payload }) => {
+        handleEvent('task:relations-changed', payload as BoardRealtimePayload);
+      })
+      .on('broadcast', { event: 'task:deps-changed' }, ({ payload }) => {
+        handleEvent('task:deps-changed', payload as BoardRealtimePayload);
+      })
+      .on(
+        'broadcast',
+        { event: 'task:relations-changed:batch' },
+        ({ payload }) => {
+          handleEvent(
+            'task:relations-changed:batch',
+            payload as BoardRealtimePayload
+          );
+        }
+      )
+      .on('broadcast', { event: 'task:deps-changed:batch' }, ({ payload }) => {
+        handleEvent('task:deps-changed:batch', payload as BoardRealtimePayload);
+      })
+      .on('broadcast', { event: 'list:upsert' }, ({ payload }) => {
+        handleEvent('list:upsert', payload as BoardRealtimePayload);
+      })
+      .on('broadcast', { event: 'list:delete' }, ({ payload }) => {
+        handleEvent('list:delete', payload as BoardRealtimePayload);
+      })
+      .on('broadcast', { event: 'list:upsert:batch' }, ({ payload }) => {
+        handleEvent('list:upsert:batch', payload as BoardRealtimePayload);
+      })
+      .on('broadcast', { event: 'list:delete:batch' }, ({ payload }) => {
+        handleEvent('list:delete:batch', payload as BoardRealtimePayload);
+      })
+      .subscribe((status, error) => {
+        if (
+          DEV_MODE &&
+          (status === 'CHANNEL_ERROR' || status === 'TIMED_OUT')
+        ) {
+          console.warn('[useTaskUserRealtime] channel issue', {
+            error,
+            status,
+            userId,
+          });
+        }
+      });
+
+    setActiveTaskUserBroadcast(broadcast);
+
+    return () => {
+      if (channelRef.current === channel) {
+        channelRef.current = null;
+      }
+      if (activeTaskUserBroadcast === broadcast) {
+        setActiveTaskUserBroadcast(null);
+      }
+      if (invalidateTimerRef.current) {
+        clearTimeout(invalidateTimerRef.current);
+        invalidateTimerRef.current = null;
+      }
+      void supabase.removeChannel(channel);
+    };
+  }, [broadcast, queryClient, userId]);
+
+  return { broadcast };
+}