use-notifications.ts

use-notifications.tsapps/web/src/hooks/use-notifications.tsraw ← hooks4,854 B← Back to the app
1"use client";
2 
3/**
4 * useNotifications — the in-app bell's state (TASK-0094 R5/R7).
5 *
6 *   - the unread count (the authoritative source is the API —
7 *     `GET /notifications/unread-count`, indexed on (userId, readAt)),
8 *   - the realtime fast path: the `notification.push` frame over the
9 *     `user:{userId}` control room (the server fans it to all of this user's
10 *     sockets — no in-band subscribe needed) → the count bumps + a toast for
11 *     the toast-policy types (MENTION / ASSIGNMENT — the shared
12 *     `NOTIFICATION_POLICY`, the single source of truth),
13 *   - the 30 s poll fallback (a missed push = the row is still there; the
14 *     poll catches up, the row is the truth).
15 *
16 * The hook is a SINGLETON across the app (the topbar bell + the inbox page
17 * share one socket subscription + one query key). It also exposes
18 * `invalidate` (mark-read / mark-all read → refetch the count) and
19 * `toastOnPush` (the optional toast per the policy table).
20 */
21import { useEffect, useMemo, useRef, useState } from "react";
22import { useQuery, useQueryClient } from "@tanstack/react-query";
23import { NOTIFICATION_POLICY } from "@factory/shared/realtime/notification-policy";
24import { notificationApi } from "@/lib/api";
25import { realtime } from "@/lib/realtime";
26import { useAuthStore } from "@/lib/auth-store";
27import { toast } from "@/stores/ui-store";
28import type { Notification } from "@/lib/types";
29 
30/** The `notification.push` frame's `kind` is the policy kind (lower-case,
31 *  e.g. "mention"). The toast decision is derived from the shared policy
32 *  table (single source of truth) — only the toast-policy kinds fire a toast.
33 *  (An unknown kind → no toast, the count still bumps — R7.) */
34const TOAST_KINDS = new Set(
35  Object.values(NOTIFICATION_POLICY)
36    .filter((p) => p.toast)
37    .map((p) => p.kind)
38);
39 
40export interface NotificationsState {
41  /** The unread count (0 until the first fetch). */
42  unreadCount: number;
43  isLoading: boolean;
44  /** Refetch the count (call after mark-read / mark-all read). */
45  invalidate: () => void;
46  /** Whether a `notification.push` frame's `kind` toasts (the policy table). */
47  frameToasts: (kind: string) => boolean;
48}
49 
50const POLL_MS = 30_000;
51 
52export function useNotifications(): NotificationsState {
53  const qc = useQueryClient();
54  const userId = useAuthStore((s) => s.user?.id ?? null);
55  const [count, setCount] = useState(0);
56  const [ready, setReady] = useState(false);
57 
58  // The count query (the bell + the inbox share the key).
59  const query = useQuery({
60    queryKey: ["notifications", "unread-count"],
61    queryFn: async () => {
62      const res = await notificationApi.unreadCount();
63      return res.count;
64    },
65    enabled: userId !== null,
66    refetchInterval: POLL_MS
67  });
68 
69  // Keep the local count in sync with the query (both the poll and the
70  // realtime push path update it).
71  useEffect(() => {
72    if (query.data !== undefined) {
73      setCount(query.data);
74      setReady(true);
75    }
76  }, [query.data]);
77 
78  // The realtime fast path: a `notification.push` for this user → bump the
79  // count + (per policy) a toast. The frame's `notificationId` is not in the
80  // cached list yet, so the bump is optimistic; the next poll reconciles
81  // (mark-read decrements, a missed push is caught by the poll).
82  const lastPushed = useRef<Set<string>>(new Set());
83  useEffect(() => {
84    if (userId === null) return;
85    const off = realtime.on("notification.push", (frame) => {
86      if (frame.type !== "notification.push") return;
87      // De-dup a re-delivery of the same notification (reconnect re-fan).
88      if (lastPushed.current.has(frame.notificationId)) return;
89      lastPushed.current.add(frame.notificationId);
90      setCount((c) => c + 1);
91      setReady(true);
92      // Live-update the inbox list too (a new row appears while the inbox is
93      // open) — the count query is reconciled by the next poll.
94      void qc.invalidateQueries({ queryKey: ["notifications", "list"] });
95      if (TOAST_KINDS.has(frame.kind)) {
96        toast("info", frame.actorName ?? "New notification", frame.title);
97      }
98    });
99    return () => {
100      off();
101      lastPushed.current.clear();
102    };
103  }, [userId]);
104 
105  const invalidate = useMemo(
106    () => () => void qc.invalidateQueries({ queryKey: ["notifications", "unread-count"] }),
107    [qc]
108  );
109 
110  return useMemo(
111    () => ({
112      unreadCount: count,
113      isLoading: !ready,
114      invalidate,
115      frameToasts: (kind: string) => TOAST_KINDS.has(kind)
116    }),
117    [count, ready, invalidate]
118  );
119}
120 
121/** The inbox's list query (Unread + Read sections — TASK-0094 R5). */
122export function useNotificationList() {
123  return useQuery({
124    queryKey: ["notifications", "list", "all"],
125    queryFn: async () => (await notificationApi.list({ limit: 50 })).data
126  });
127}
128 
129export type { Notification };
130