use-whiteboard.ts

use-whiteboard.tsapps/web/src/hooks/use-whiteboard.tsraw ← hooks2,515 B← Back to the app
1"use client";
2 
3/**
4 * use-whiteboard — T-168 canvas query + save for a whiteboard PAGE.
5 *
6 * The canvas document is the full `@factory/whiteboard` v1 shape; the server
7 * re-validates it on every save (400 with field-level issues otherwise). The
8 * save mutation is OPTIMISTIC: the renderer already applied the change
9 * locally (canvas ops are immutable), so the mutation only reconciles the
10 * server's `updatedAt` — on failure the canvas is re-fetched (the server's
11 * truth wins; single-user v1 means there is nobody to merge with).
12 */
13import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
14import { whiteboardApi, type WhiteboardCanvasResponse } from "@/lib/api";
15import type { Canvas } from "@factory/whiteboard";
16 
17export const whiteboardKey = (pageId: string) => ["pages", pageId, "whiteboard"] as const;
18 
19/** `GET /pages/:id/whiteboard` — 404 → the page has no canvas (non-whiteboard). */
20export function useWhiteboardCanvas(pageId: string) {
21  return useQuery({
22    queryKey: whiteboardKey(pageId),
23    queryFn: () => whiteboardApi.get(pageId),
24    enabled: pageId.length > 0
25  });
26}
27 
28/** `PUT /pages/:id/whiteboard` — optimistic full-canvas save. */
29export function useWhiteboardSave(pageId: string) {
30  const qc = useQueryClient();
31  return useMutation({
32    mutationFn: (canvas: Canvas) => whiteboardApi.save(pageId, canvas),
33    onMutate: async (canvas) => {
34      // The caller has already put `canvas` in local state; mark the query
35      // fresh so an in-flight refetch doesn't clobber it while saving.
36      await qc.cancelQueries({ queryKey: whiteboardKey(pageId) });
37      const prev = qc.getQueryData<WhiteboardCanvasResponse>(whiteboardKey(pageId));
38      if (prev) qc.setQueryData(whiteboardKey(pageId), { ...prev, canvas, updatedAt: prev.updatedAt });
39      return { prev };
40    },
41    onError: (_err, _canvas, ctx) => {
42      // Single-user v1: the server's stored document is the truth — revert.
43      if (ctx?.prev) qc.setQueryData(whiteboardKey(pageId), ctx.prev);
44      else qc.invalidateQueries({ queryKey: whiteboardKey(pageId) });
45    },
46    onSuccess: (res) => {
47      // Keep the renderer's canvas (it already matches the saved document) —
48      // only sync the server's updatedAt (drives the "Saved" indicator). A
49      // full refetch here could clobber a newer local edit.
50      qc.setQueryData<WhiteboardCanvasResponse>(whiteboardKey(pageId), (prev) =>
51        prev ? { ...prev, updatedAt: res.updatedAt } : prev
52      );
53    }
54  });
55}
56