`apps/admin/src/app/review/ReviewActions.tsx`

49 lines
"use client";

import { useRouter } from "next/navigation";
import { useState } from "react";

export default function ReviewActions({
  reviewItemId,
  stagedRecordId,
}: {
  reviewItemId: string;
  stagedRecordId: string;
}) {
  const router = useRouter();
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const act = async (action: "approve" | "reject") => {
    setBusy(true);
    setError(null);
    const res = await fetch("/api/review", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ reviewItemId, stagedRecordId, action }),
    });
    setBusy(false);
    if (!res.ok) {
      setError((await res.json().catch(() => null))?.error ?? "action failed");
      return;
    }
    router.refresh();
  };

  return (
    <div className="mt-3 flex items-center gap-3">
      <button onClick={() => act("approve")} disabled={busy}
        className="rounded bg-emerald-700 px-4 py-1.5 text-sm font-medium text-white hover:bg-emerald-800 disabled:opacity-50"
        data-testid="review-approve">
        Approve & publish
      </button>
      <button onClick={() => act("reject")} disabled={busy}
        className="rounded bg-red-700 px-4 py-1.5 text-sm font-medium text-white hover:bg-red-800 disabled:opacity-50"
        data-testid="review-reject">
        Reject
      </button>
      {error && <span className="text-sm text-red-600">{error}</span>}
    </div>
  );
}