@noverachat/sdk-react 0.3.0

package/src/use-room-settings.ts

@@ -0,0 +1,47 @@
+import { useEffect, useMemo, useSyncExternalStore } from "react";
+
+import { useNoveraChat } from "./context.js";
+import {
+  RoomSettingsStore,
+  type RoomSettingsSnapshot,
+} from "./room-settings-store.js";
+
+export interface UseRoomSettingsResult extends RoomSettingsSnapshot {
+  /** The backing store — `setMuted`, `setPushTrigger`, invite CRUD,
+   *  join-request inbox, `leave` / `clearHistory` / `deleteMyMessages`,
+   *  and operator moderation (`freeze`, `setPublic`, `muteMember`, …). */
+  store: RoomSettingsStore;
+}
+
+/**
+ * State + actions behind a room-settings screen (대화방 설정). Lists are
+ * lazy — call `store.loadInvites()` / `store.loadJoinRequests()` when the
+ * relevant section opens (both are operator-only server-side).
+ *
+ * ```tsx
+ * const { invites, joinRequests, store } = useRoomSettings("room_123");
+ * // ...
+ * <Switch onChange={(on) => store.setMuted(on)} />
+ * <button onClick={() => store.leave({ deleteMessages: "mine" })}>나가기</button>
+ * ```
+ */
+export function useRoomSettings(roomId: string): UseRoomSettingsResult {
+  const chat = useNoveraChat();
+  const store = useMemo(
+    () => new RoomSettingsStore(chat, roomId),
+    [chat, roomId],
+  );
+
+  useEffect(() => {
+    store.attach();
+    return () => store.dispose();
+  }, [store]);
+
+  const snapshot = useSyncExternalStore(
+    store.subscribe,
+    store.getSnapshot,
+    store.getSnapshot,
+  );
+
+  return { ...snapshot, store };
+}

package/src/use-room.ts

@@ -0,0 +1,21 @@
+import type { Room } from "@noverachat/sdk-web";
+
+import { useNoveraChat } from "./context.js";
+
+/**
+ * The `Room` facade for `roomId`, from the nearest `NoveraChatProvider`'s
+ * client. Use it for direct SDK calls the hooks don't cover (members,
+ * announcements, invites, moderation, …).
+ *
+ * Deliberately NOT memoized: `chat.room()` is a get-or-create map lookup,
+ * and re-resolving each render guarantees the facade is never an orphan
+ * after the provider reconnects.
+ *
+ * ```tsx
+ * const room = useRoom("room_123");
+ * const members = await room.listMembers();
+ * ```
+ */
+export function useRoom(roomId: string): Room {
+  return useNoveraChat().room(roomId);
+}

package/src/use-typing.ts

@@ -0,0 +1,85 @@
+import { useEffect, useRef, useState } from "react";
+
+import { useNoveraChat } from "./context.js";
+
+export interface UseTypingOptions {
+  /** How long (ms) a user stays "typing" without a fresh event before
+   *  auto-removal. Default 5000. */
+  timeoutMs?: number;
+}
+
+export interface UseTypingResult {
+  /** User ids currently typing. */
+  typingUserIds: readonly string[];
+  isAnyoneTyping: boolean;
+  /** Broadcast the local user's typing state to the room (throttle it
+   *  yourself — one `true` per keystroke burst, `false` on blur/send). */
+  setTyping: (isTyping: boolean) => void;
+}
+
+/**
+ * Who is currently typing in a room, for a "… is typing" indicator.
+ *
+ * The server sends a `typing: true` event when someone starts, but a
+ * "stopped" event isn't guaranteed to arrive. To avoid a stuck indicator,
+ * each user is auto-removed after `timeoutMs` unless a fresh typing event
+ * resets their timer.
+ *
+ * ```tsx
+ * const { isAnyoneTyping, setTyping } = useTyping("room_123");
+ * // ...
+ * <span>{isAnyoneTyping ? "typing…" : ""}</span>
+ * <input onChange={() => setTyping(true)} onBlur={() => setTyping(false)} />
+ * ```
+ */
+export function useTyping(
+  roomId: string,
+  opts?: UseTypingOptions,
+): UseTypingResult {
+  const chat = useNoveraChat();
+  const timeoutMs = opts?.timeoutMs ?? 5000;
+  const [typingUserIds, setTypingUserIds] = useState<readonly string[]>([]);
+  const timers = useRef(new Map<string, ReturnType<typeof setTimeout>>());
+
+  useEffect(() => {
+    const room = chat.room(roomId);
+    const timerMap = timers.current;
+
+    const stop = (userId: string): void => {
+      const t = timerMap.get(userId);
+      if (t) clearTimeout(t);
+      timerMap.delete(userId);
+      setTypingUserIds((cur) =>
+        cur.includes(userId) ? cur.filter((u) => u !== userId) : cur,
+      );
+    };
+
+    const start = (userId: string): void => {
+      // (Re)start the auto-remove timer on every typing event.
+      const t = timerMap.get(userId);
+      if (t) clearTimeout(t);
+      timerMap.set(userId, setTimeout(() => stop(userId), timeoutMs));
+      setTypingUserIds((cur) =>
+        cur.includes(userId) ? cur : [...cur, userId],
+      );
+    };
+
+    const unsub = room.on("typing", (f) => {
+      if (f.is_typing) start(f.user_id);
+      else stop(f.user_id);
+    });
+
+    return () => {
+      unsub();
+      for (const t of timerMap.values()) clearTimeout(t);
+      timerMap.clear();
+      setTypingUserIds([]);
+    };
+  }, [chat, roomId, timeoutMs]);
+
+  return {
+    typingUserIds,
+    isAnyoneTyping: typingUserIds.length > 0,
+    setTyping: (isTyping: boolean) => chat.room(roomId).setTyping(isTyping),
+  };
+}

package/src/use-unread.ts

@@ -0,0 +1,65 @@
+import { useCallback, useEffect, useState } from "react";
+import type { UnreadSummary } from "@noverachat/sdk-web";
+
+import { useNoveraChat } from "./context.js";
+
+export interface UseUnreadOptions {
+  /** Poll `chat.unreadSummary()` every N ms. Off by default (pull model —
+   *  call `refresh()` on focus / after reading a room). The endpoint is a
+   *  single cheap REST call, so a few seconds is a fine badge cadence. */
+  refreshIntervalMs?: number;
+}
+
+export interface UseUnreadResult {
+  /** Total unread across all rooms. 0 until the first fetch resolves. */
+  total: number;
+  /** The full last-fetched summary (per-room breakdown in `rooms`),
+   *  or null before the first fetch. */
+  summary: UnreadSummary | null;
+  /** Fetch the latest unread summary now. */
+  refresh: () => Promise<void>;
+}
+
+/**
+ * The account-wide unread summary, for a badge. Fetches once on mount;
+ * refresh manually via `refresh()` or periodically via
+ * `refreshIntervalMs`.
+ *
+ * ```tsx
+ * const { total, refresh } = useUnread({ refreshIntervalMs: 15_000 });
+ * // ...
+ * <Badge count={total} />
+ * ```
+ */
+export function useUnread(opts?: UseUnreadOptions): UseUnreadResult {
+  const chat = useNoveraChat();
+  const refreshIntervalMs = opts?.refreshIntervalMs;
+  const [summary, setSummary] = useState<UnreadSummary | null>(null);
+
+  const refresh = useCallback(async (): Promise<void> => {
+    setSummary(await chat.unreadSummary());
+  }, [chat]);
+
+  useEffect(() => {
+    let alive = true;
+    const tick = async (): Promise<void> => {
+      try {
+        const s = await chat.unreadSummary();
+        if (alive) setSummary(s);
+      } catch {
+        // Badge data — swallow transient fetch errors, next tick retries.
+      }
+    };
+    void tick();
+    const timer =
+      refreshIntervalMs != null && refreshIntervalMs > 0
+        ? setInterval(() => void tick(), refreshIntervalMs)
+        : null;
+    return () => {
+      alive = false;
+      if (timer) clearInterval(timer);
+    };
+  }, [chat, refreshIntervalMs]);
+
+  return { total: summary?.total ?? 0, summary, refresh };
+}