Actions

"use client";

import { useCallback, useState, useSyncExternalStore } from "react";

import {
  createLocalRowModel,
  type PretableMutationResult,
} from "@pretable/core";
import { useDisposeOnUnmount } from "@pretable/react";

import { columns } from "./columns";
import { tasks } from "./data";

// This id never exists in `tasks`, so every batch below reports exactly one
// "unknown-remove-id" issue — the non-fatal-issue half of the contract, next
// to the atomic-revision half.
const GHOST_ID = "task-ghost";

export function TransactionDemo() {
  const [rowModel] = useState(() =>
    createLocalRowModel({ columns, rows: tasks }),
  );
  useDisposeOnUnmount(rowModel);

  const readSnapshot = useCallback(
    () => rowModel.getState().snapshot,
    [rowModel],
  );
  const snapshot = useSyncExternalStore(
    rowModel.subscribe,
    readSnapshot,
    readSnapshot,
  );

  const [result, setResult] = useState<PretableMutationResult<string> | null>(
    null,
  );
  const [nextId, setNextId] = useState(5);

  const runBatch = () => {
    const openTask = snapshot
      .range(0, snapshot.visibleRowCount)
      .filter((entry) => entry.kind === "data")
      .map((entry) => entry.row)
      .find((task) => task.status === "open");

    // One call: add a row, update a row, and attempt to remove one that was
    // never there. All three land in the SAME revision, and the unknown
    // removal comes back as an issue rather than throwing.
    const outcome = rowModel.applyTransaction({
      add: [
        { id: `task-${nextId}`, title: `Follow-up ${nextId}`, status: "open" },
      ],
      update: openTask
        ? [{ id: openTask.id, changes: { status: "done" } }]
        : [],
      remove: [GHOST_ID],
    });

    setResult(outcome);
    setNextId((id) => id + 1);
  };

  const firstIssue = result?.issues[0];
  const issueText = firstIssue
    ? ` · ${result!.issues.length} issue: ${firstIssue.code} (${
        "rowId" in firstIssue ? firstIssue.rowId : firstIssue.groupId
      })`
    : "";

  return (
    <div>
      <button type="button" onClick={runBatch}>
        Apply batch: add one, complete one, remove one unknown
      </button>
      <p role="status" style={{ fontSize: 13, minHeight: 18 }}>
        {result
          ? `revision ${result.previousRevision} → ${result.revision} · ` +
            `${result.added} added, ${result.updated} updated, ${result.removed} removed` +
            issueText
          : "No batch applied yet."}
      </p>
      <table>
        <thead>
          <tr>
            {columns.map((c) => (
              <th key={c.id} scope="col">
                {c.header ?? c.id}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {snapshot
            .range(0, snapshot.visibleRowCount)
            .filter((entry) => entry.kind === "data")
            .map(({ rowId, row }) => (
              <tr key={rowId}>
                {columns.map((c) => (
                  <td key={c.id}>{String(c.accessor(row))}</td>
                ))}
              </tr>
            ))}
        </tbody>
      </table>
    </div>
  );
}

"use client";

import { useCallback, useEffect, useRef, useState } from "react";

import {
  createLocalRowModel,
  type PretableDistinctValueQuery,
} from "@pretable/core";
import { useDisposeOnUnmount } from "@pretable/react";

import { columns } from "./columns";
import { contacts } from "./data";

interface TeamOption {
  readonly value: string;
  readonly count: number;
}

export function DistinctValuesDemo() {
  const [rowModel] = useState(() =>
    createLocalRowModel({ columns, rows: contacts }),
  );
  useDisposeOnUnmount(rowModel);

  const [search, setSearch] = useState("");
  const [options, setOptions] = useState<readonly TeamOption[]>([]);
  const [totalDistinct, setTotalDistinct] = useState(0);
  // Starts true: the mount effect below fires the first request without
  // itself calling setState synchronously, so "pending" has to already be
  // true rather than being set by that effect.
  const [pending, setPending] = useState(true);

  // Cancelling the in-flight request when a new one starts — rather than
  // letting a slow earlier keystroke resolve after a faster later one — is
  // what "asynchronous and cancellable" buys you here.
  const activeRequest = useRef<PretableDistinctValueQuery<string> | null>(null);

  const startSearch = useCallback(
    (value: string) => {
      activeRequest.current?.cancel();
      const request = rowModel.distinctValues("team", {
        search: value,
        limit: 8,
      });
      activeRequest.current = request;
      request.finished
        .then((result) => {
          if (activeRequest.current !== request) return; // superseded
          setOptions(
            result.values.map((v) => ({ value: v.value, count: v.count })),
          );
          setTotalDistinct(result.totalDistinct);
          setPending(false);
        })
        .catch(() => {
          // A cancelled request rejects `finished`. That's expected every
          // time a keystroke supersedes the previous request, so there is
          // nothing to surface here.
        });
    },
    [rowModel],
  );

  useEffect(() => {
    startSearch("");
    // eslint-disable-next-line react-hooks/exhaustive-deps -- mount-once; later searches come from onChange
  }, []);

  return (
    <div>
      <label style={{ display: "block", marginBottom: 8, fontSize: 13 }}>
        Search teams{" "}
        <input
          aria-label="Search teams"
          value={search}
          onChange={(e) => {
            setSearch(e.target.value);
            setPending(true);
            startSearch(e.target.value);
          }}
        />
      </label>
      <p role="status" style={{ fontSize: 13 }}>
        {pending
          ? "Searching…"
          : `${totalDistinct} matching team${totalDistinct === 1 ? "" : "s"}`}
      </p>
      <ul>
        {options.map((opt) => (
          <li key={opt.value}>
            {opt.value} ({opt.count})
          </li>
        ))}
      </ul>
    </div>
  );
}