@noverachat/sdk-react 0.3.0 → 0.5.0

package/src/room-store.ts

@@ -1,26 +1,12 @@
 import type {
   DeleteScope,
+  MessageCollection,
   NoveraChat,
-  ReactionEntry,
   Room,
   SendFileOptions,
-  WsChatReceive,
-  WsMessageDeleted,
-  WsMessagesCleared,
-  WsMessageUpdated,
-  WsReactionAdded,
-  WsReactionRemoved,
-  WsSyncTick,
 } from "@noverachat/sdk-web";
 
-import {
-  chatMessageFromHistory,
-  chatMessageFromLive,
-  pendingChatMessage,
-  pendingFileChatMessage,
-  type ChatMessage,
-} from "./chat-message.js";
-import { idGreater } from "./internal/compare-id.js";
+import { type ChatMessage, chatMessageFromHistory } from "./chat-message.js";
 
 /** Immutable snapshot handed to React via `useSyncExternalStore`. A new
  *  object (new array/record identities) is produced on every change. */
@@ -34,22 +20,21 @@ export interface RoomSnapshot {
   readWatermarks: Readonly<Record<string, string>>;
 }
 
-let uploadSeq = 0;
-
 /**
- * Turns a `Room`'s events into an externally-subscribable message list and
- * drives optimistic sends. Framework-agnostic on purpose so it can also be
- * used outside hooks (tests, non-React glue).
+ * React-side glue over the core `MessageCollection` — the message state
+ * (event folding, optimistic sends, cache hydrate→replace) is owned by the
+ * core; this store bridges the collection's change events into
+ * `useSyncExternalStore`-shaped immutable snapshots. Framework-agnostic on
+ * purpose so it can also be used outside hooks (tests, non-React glue).
  *
- * Lifecycle: construct → `attach()` (subscribe WS events; idempotent) →
- * `dispose()` (flush read watermark + unsubscribe). `useMessages` does all
- * three for you.
+ * Lifecycle: construct → `attach()` (idempotent) → `dispose()` (flush read
+ * watermark + detach page listeners). `useMessages` does all three for you.
  *
  * Holds `(chat, roomId)` rather than a `Room` instance and re-resolves the
  * live facade on every use — `chat.disconnect()` drops its Room facades, so
  * a remounted provider (React StrictMode simulates this) would otherwise
- * leave the store subscribed to an orphaned Room that no longer receives
- * dispatches.
+ * leave the store bound to an orphaned Room that no longer receives
+ * dispatches. The backing collection is recreated when the facade changes.
  *
  * ```ts
  * const store = new RoomStore(chat, "room_123");
@@ -63,13 +48,9 @@ export class RoomStore {
   private readonly chat: NoveraChat;
   readonly roomId: string;
   private readonly listeners = new Set<() => void>();
-  private readonly unsubs: Array<() => void> = [];
 
-  private messages: ChatMessage[] = [];
-  private readWatermarks: Record<string, string> = {};
-  private hasMore = false;
-  private oldestCursor: string | null = null;
-  private loadingMore = false;
+  private col: MessageCollection | null = null;
+  private colUnsub: (() => void) | null = null;
   private historyRequested = false;
   private snapshot: RoomSnapshot;
   private attached = false;
@@ -91,22 +72,26 @@ export class RoomStore {
     return this.chat.room(this.roomId);
   }
 
-  /** Subscribe to WS events + page lifecycle. Safe to call repeatedly
-   *  (no-op while attached) — matches React 18/19 StrictMode's
+  /** The backing collection, bound to the CURRENT facade. Recreated when
+   *  the facade was dropped (post-`chat.disconnect()`) — the old one would
+   *  never receive dispatches again. */
+  private collection(): MessageCollection {
+    const facade = this.room;
+    if (this.col && this.col.room === facade) return this.col;
+    this.colUnsub?.();
+    this.col = facade.collection();
+    this.colUnsub = this.col.on("change", () => this.rebuild());
+    this.rebuild();
+    return this.col;
+  }
+
+  /** Subscribe page lifecycle + ensure the collection is live. Safe to call
+   *  repeatedly (no-op while attached) — matches React 18/19 StrictMode's
    *  mount → cleanup → mount effect cycle. */
   attach(): void {
     if (this.attached) return;
     this.attached = true;
-    const room = this.room; // resolve once — all subs must share one facade
-    this.unsubs.push(
-      room.on("message", (f) => this.onIncoming(f)),
-      room.on("messageUpdated", (f) => this.onUpdated(f)),
-      room.on("messageDeleted", (f) => this.onDeleted(f)),
-      room.on("messagesCleared", (f) => this.onCleared(f)),
-      room.on("reactionAdded", (f) => this.onReactionAdded(f)),
-      room.on("reactionRemoved", (f) => this.onReactionRemoved(f)),
-      room.on("syncTick", (f) => this.onSyncTick(f)),
-    );
+    this.collection();
     // Flush the pending read watermark when the tab goes to the background,
     // so the last-read position isn't lost to the debounce window.
     if (typeof document !== "undefined") {
@@ -117,13 +102,13 @@ export class RoomStore {
     }
   }
 
-  /** Unsubscribe everything and flush the pending read watermark. The store
-   *  keeps its message state, so a later `attach()` resumes cleanly. */
+  /** Detach page listeners and flush the pending read watermark. The
+   *  collection (and its state) survives, so a later `attach()` resumes
+   *  cleanly — StrictMode's mount → cleanup → mount cycle keeps messages. */
   dispose(): void {
     if (!this.attached) return;
     this.attached = false;
     this.room.flushMarkRead();
-    for (const u of this.unsubs.splice(0)) u();
     if (typeof document !== "undefined") {
       document.removeEventListener("visibilitychange", this.onVisibilityChange);
     }
@@ -142,11 +127,13 @@ export class RoomStore {
 
   readonly getSnapshot = (): RoomSnapshot => this.snapshot;
 
-  private emit(): void {
+  private rebuild(): void {
+    const col = this.col;
+    if (!col) return;
     this.snapshot = {
-      messages: [...this.messages],
-      hasMore: this.hasMore,
-      readWatermarks: { ...this.readWatermarks },
+      messages: [...col.messages],
+      hasMore: col.hasMore,
+      readWatermarks: { ...col.readWatermarks },
     };
     for (const fn of this.listeners) fn();
   }
@@ -155,52 +142,33 @@ export class RoomStore {
 
   /** Whether `userId` has read `messageId` according to the latest watermark. */
   isReadBy(userId: string, messageId: string): boolean {
-    const w = this.readWatermarks[userId];
-    if (!w) return false;
-    return !idGreater(messageId, w);
+    return this.collection().isReadBy(userId, messageId);
   }
 
   /** How many of the given users have read `messageId`. Pass the room's
    *  member ids (minus the sender) to get a KakaoTalk-style unread count:
    *  `members.length - readCount(...)`. */
   readCount(messageId: string, userIds: Iterable<string>): number {
-    let n = 0;
-    for (const u of userIds) if (this.isReadBy(u, messageId)) n++;
-    return n;
+    return this.collection().readCount(messageId, userIds);
   }
 
   // ── history ─────────────────────────────────────────────────────
 
-  /** Load the most recent page of history and prepend it. No-op after the
-   *  first call (StrictMode double-mount safe) — use `loadMore` for
-   *  scrollback. */
+  /** Load the most recent page of history. No-op after the first call
+   *  (StrictMode double-mount safe) — use `loadMore` for scrollback.
+   *  캐시(`ClientOptions.cacheStore`)가 켜져 있으면 스냅샷 즉시 렌더 →
+   *  API 도착 시 통째 교체가 컬렉션 안에서 일어난다. */
   async loadHistory(limit = 50): Promise<void> {
     if (this.historyRequested) return;
     this.historyRequested = true;
-    const page = await this.room.listRecent(limit);
-    this.messages.unshift(...page.items.map(chatMessageFromHistory));
-    this.oldestCursor = page.nextCursor;
-    this.hasMore = page.hasMore;
-    this.emit();
+    await this.collection().load(limit);
   }
 
   /** Scrollback: load the page of messages older than what's on screen and
    *  prepend it. No-op while a previous call is in flight or when `hasMore`
    *  is false. Returns the number of messages added. */
-  async loadMore(limit = 50): Promise<number> {
-    const cursor = this.oldestCursor;
-    if (this.loadingMore || !this.hasMore || cursor == null) return 0;
-    this.loadingMore = true;
-    try {
-      const page = await this.room.listBefore(cursor, limit);
-      this.messages.unshift(...page.items.map(chatMessageFromHistory));
-      this.oldestCursor = page.nextCursor;
-      this.hasMore = page.hasMore;
-      this.emit();
-      return page.items.length;
-    } finally {
-      this.loadingMore = false;
-    }
+  loadMore(limit = 50): Promise<number> {
+    return this.collection().loadMore(limit);
   }
 
   // ── outgoing ────────────────────────────────────────────────────
@@ -218,123 +186,37 @@ export class RoomStore {
       customMeta?: Record<string, unknown>;
     },
   ): void {
-    void (async () => {
-      let tempId: string;
-      let ackPromise: Promise<string>;
-      try {
-        const sent = await this.room.send({
-          content: text,
-          ...(opts?.replyToId ? { replyToId: opts.replyToId } : {}),
-          ...(opts?.customType ? { customType: opts.customType } : {}),
-          ...(opts?.customMeta ? { customMeta: opts.customMeta } : {}),
-        });
-        tempId = sent.tempId;
-        ackPromise = sent.messageId;
-      } catch {
-        // WS not open — surface a failed bubble rather than throwing into
-        // the void (send() is fire-and-forget).
-        const localId = `failed_${Date.now()}_${uploadSeq++}`;
-        this.messages.push({
-          ...pendingChatMessage({ tempId: localId, content: text, ...opts }),
-          status: "failed",
-        });
-        this.emit();
-        return;
-      }
-      this.messages.push(
-        pendingChatMessage({ tempId, content: text, ...opts }),
-      );
-      this.emit();
-      this.bindAck(tempId, ackPromise);
-    })();
+    this.collection().send(text, opts);
   }
 
   /** Send a file optimistically. A FILE bubble with `uploadProgress`
    *  appears immediately; progress advances during the S3 upload, then the
    *  bubble flips to `sent` on ack (or `failed`). */
-  async sendFile(file: File, opts?: SendFileOptions): Promise<void> {
-    // Local temp id for the optimistic bubble — the real WS temp id only
-    // exists after the upload commits (sendFile resolves then).
-    const localId = `upload_${Date.now()}_${uploadSeq++}`;
-    this.messages.push(
-      pendingFileChatMessage({
-        tempId: localId,
-        name: opts?.name ?? file.name,
-        mime: file.type,
-        size: file.size,
-      }),
-    );
-    this.emit();
-
-    try {
-      const sent = await this.room.sendFile(file, {
-        ...(opts ?? {}),
-        onProgress: (p) => {
-          this.mutateByTempId(localId, (m) => ({
-            ...m,
-            uploadProgress: p.ratio,
-          }));
-          opts?.onProgress?.(p);
-        },
-      });
-      // Upload committed — bind the bubble to the real file id and ack.
-      this.mutateByTempId(localId, (m) => ({
-        ...m,
-        fileId: sent.fileId,
-        file: m.file ? { ...m.file, id: sent.fileId } : m.file,
-        uploadProgress: null,
-      }));
-      const realId = await sent.messageId;
-      this.mutateByTempId(localId, (m) => ({
-        ...m,
-        id: realId,
-        status: "sent",
-      }));
-    } catch {
-      this.mutateByTempId(localId, (m) => ({
-        ...m,
-        status: "failed",
-        uploadProgress: null,
-      }));
-    }
+  sendFile(file: File, opts?: SendFileOptions): Promise<void> {
+    return this.collection().sendFile(file, opts);
   }
 
   /** Edit a message's content (server-side; peers get `message_updated`).
    *  The local copy updates optimistically. */
-  async edit(messageId: string, content: string): Promise<void> {
-    await this.room.edit(messageId, { content });
-    this.mutateById(messageId, (m) => ({
-      ...m,
-      content,
-      editedCount: m.editedCount + 1,
-    }));
+  edit(messageId: string, content: string): Promise<void> {
+    return this.collection().edit(messageId, content);
   }
 
   /** Delete a message. `scope: "ALL"` (default) removes it for everyone;
    *  `"MY"` hides it only for the caller. Local copy flips to deleted. */
-  async delete(messageId: string, scope: DeleteScope = "ALL"): Promise<void> {
-    await this.room.delete(messageId, scope);
-    this.mutateById(messageId, (m) => ({ ...m, isDeleted: true }));
+  delete(messageId: string, scope: DeleteScope = "ALL"): Promise<void> {
+    return this.collection().delete(messageId, scope);
   }
 
   /** Add/remove the caller's reaction. Pass `myUserId` so the toggle can
    *  tell whether the caller already reacted with `key`. The authoritative
    *  state arrives back via the reaction WS events. */
-  async toggleReaction(
+  toggleReaction(
     messageId: string,
     key: string,
     myUserId: string,
   ): Promise<void> {
-    const m = this.messages.find((x) => x.id === messageId);
-    const mine =
-      m?.reactions.some(
-        (r) => r.key === key && r.userIds.includes(myUserId),
-      ) ?? false;
-    if (mine) {
-      await this.room.unreact(messageId, key);
-    } else {
-      await this.room.react(messageId, key);
-    }
+    return this.collection().toggleReaction(messageId, key, myUserId);
   }
 
   /** Search this room's messages (server-side, content substring match).
@@ -346,92 +228,7 @@ export class RoomStore {
 
   /** Mark `messageId` read (debounced inside the SDK). */
   markRead(messageId: string): void {
-    this.room.markRead(messageId);
-  }
-
-  // ── event handlers ──────────────────────────────────────────────
-
-  private onIncoming(f: WsChatReceive): void {
-    this.messages.push(chatMessageFromLive(f));
-    this.emit();
-  }
-
-  private onUpdated(f: WsMessageUpdated): void {
-    this.mutateById(f.message_id, (m) => ({
-      ...m,
-      content: f.content ?? m.content,
-      editedCount: m.editedCount + 1,
-    }));
-  }
-
-  private onDeleted(f: WsMessageDeleted): void {
-    this.mutateById(f.message_id, (m) => ({ ...m, isDeleted: true }));
-  }
-
-  private onCleared(f: WsMessagesCleared): void {
-    // Operator wipe up to (and including) up_to_message_id — flip local
-    // copies. A null cutoff means the whole room was wiped.
-    const upTo = f.up_to_message_id;
-    let changed = false;
-    this.messages = this.messages.map((m) => {
-      if (!m.isDeleted && (upTo == null || !idGreater(m.id, upTo))) {
-        changed = true;
-        return { ...m, isDeleted: true };
-      }
-      return m;
-    });
-    if (changed) this.emit();
-  }
-
-  private onReactionAdded(f: WsReactionAdded): void {
-    this.mutateById(f.message_id, (m) => {
-      const next: ReactionEntry[] = m.reactions.map((r) =>
-        r.key === f.reaction_key
-          ? {
-              key: r.key,
-              userIds: [...new Set([...r.userIds, f.user_id])],
-              updatedAt: f.updated_at,
-            }
-          : r,
-      );
-      if (!next.some((r) => r.key === f.reaction_key)) {
-        next.push({
-          key: f.reaction_key,
-          userIds: [f.user_id],
-          updatedAt: f.updated_at,
-        });
-      }
-      return { ...m, reactions: next };
-    });
-  }
-
-  private onReactionRemoved(f: WsReactionRemoved): void {
-    this.mutateById(f.message_id, (m) => {
-      const next: ReactionEntry[] = [];
-      for (const r of m.reactions) {
-        if (r.key !== f.reaction_key) {
-          next.push(r);
-          continue;
-        }
-        const users = r.userIds.filter((u) => u !== f.user_id);
-        if (users.length > 0) {
-          next.push({ key: r.key, userIds: users, updatedAt: f.updated_at });
-        }
-      }
-      return { ...m, reactions: next };
-    });
-  }
-
-  private onSyncTick(f: WsSyncTick): void {
-    let changed = false;
-    for (const [userId, mid] of Object.entries(f.read_states)) {
-      const cur = this.readWatermarks[userId];
-      if (!cur || idGreater(mid, cur)) {
-        this.readWatermarks[userId] = mid;
-        changed = true;
-      }
-    }
-    if (changed) this.emit();
+    this.collection().markRead(messageId);
   }
 
   private onVisibilityChange = (): void => {
@@ -439,37 +236,4 @@ export class RoomStore {
       this.room.flushMarkRead();
     }
   };
-
-  // ── helpers ─────────────────────────────────────────────────────
-
-  private bindAck(tempId: string, messageId: Promise<string>): void {
-    messageId
-      .then((realId) => {
-        this.mutateByTempId(tempId, (m) => ({
-          ...m,
-          id: realId,
-          status: "sent",
-        }));
-      })
-      .catch(() => {
-        this.mutateByTempId(tempId, (m) => ({ ...m, status: "failed" }));
-      });
-  }
-
-  private mutateById(id: string, f: (m: ChatMessage) => ChatMessage): void {
-    const i = this.messages.findIndex((m) => m.id === id);
-    if (i === -1) return;
-    this.messages[i] = f(this.messages[i]!);
-    this.emit();
-  }
-
-  private mutateByTempId(
-    tempId: string,
-    f: (m: ChatMessage) => ChatMessage,
-  ): void {
-    const i = this.messages.findIndex((m) => m.tempId === tempId);
-    if (i === -1) return;
-    this.messages[i] = f(this.messages[i]!);
-    this.emit();
-  }
 }