`src/app/drops/unsubscribe/[token]/page.tsx`

37 lines
"use client";

import { useEffect, useState } from "react";
import { useParams } from "next/navigation";

export default function UnsubscribePage() {
  const params = useParams<{ token: string }>();
  const [status, setStatus] = useState<"confirm" | "working" | "done" | "error">("confirm");
  const [err, setErr] = useState<string | null>(null);

  async function unsub() {
    setStatus("working");
    try {
      const r = await fetch(`/api/drops/unsubscribe/${params.token}`, { method: "POST" });
      if (!r.ok) throw new Error((await r.json()).error || `HTTP ${r.status}`);
      setStatus("done");
    } catch (e) { setErr((e as Error).message); setStatus("error"); }
  }

  useEffect(() => { /* require explicit click */ }, []);

  return (
    <div className="card p-6 max-w-xl">
      <h1 className="text-2xl font-semibold">Unsubscribe from Drops</h1>
      {status === "confirm" && (
        <>
          <p className="mt-3 text-sm text-ink/70">Are you sure? Your account will be cancelled immediately and you'll stop receiving drops.</p>
          <button onClick={unsub} className="btn mt-4">Yes, unsubscribe</button>
        </>
      )}
      {status === "working" && <p className="mt-3 text-sm">Unsubscribing…</p>}
      {status === "done"    && <p className="mt-3 text-sm text-emerald-700">Done. You've been unsubscribed.</p>}
      {status === "error"   && <p className="mt-3 text-sm text-red-700">Error: {err}</p>}
    </div>
  );
}