Add community content reports, map bans, and appeals

components/MapAppeal.tsx

@@ -0,0 +1,111 @@
+"use client";
+import { useCallback, useEffect, useState } from "react";
+import { api } from "./StartGame";
+
+export type Appeal = {
+  id: string;
+  dataset_id: string;
+  reason: string;
+  state: string;
+  review_reason: string | null;
+  created_at: string;
+  reviewed_at: string | null;
+};
+export function MapAppeal({
+  id,
+  strikes,
+  bannedAt,
+  banReason,
+  onChange,
+}: {
+  id: string;
+  strikes: number;
+  bannedAt: string | null;
+  banReason: string | null;
+  onChange: () => void;
+}) {
+  const [appeals, setAppeals] = useState<Appeal[]>([]);
+  const [reason, setReason] = useState("");
+  const [error, setError] = useState("");
+  const [busy, setBusy] = useState(false);
+  const load = useCallback(async () => {
+    try {
+      setAppeals(
+        (await api<{ appeals: Appeal[] }>(`datasets/${id}/appeals`)).appeals,
+      );
+    } catch (e) {
+      setError((e as Error).message);
+    }
+  }, [id]);
+  useEffect(() => {
+    load();
+    const timer = setInterval(load, 10000);
+    return () => clearInterval(timer);
+  }, [load]);
+  async function submit(event: React.FormEvent) {
+    event.preventDefault();
+    setBusy(true);
+    setError("");
+    try {
+      await api(`datasets/${id}/appeals`, { reason });
+      setReason("");
+      await load();
+      onChange();
+    } catch (e) {
+      setError((e as Error).message);
+    } finally {
+      setBusy(false);
+    }
+  }
+  return (
+    <section className="tool-card">
+      <h2>
+        {bannedAt
+          ? "Map unpublished · appeal required"
+          : "Community report strikes"}
+      </h2>
+      <p>
+        {strikes}/3 confirmed reports.{" "}
+        {bannedAt
+          ? "This map cannot be published until a moderator approves your appeal."
+          : "Three confirmed reports automatically unpublish this map."}
+      </p>
+      {banReason && <p>{banReason}</p>}
+      {appeals.map((a) => (
+        <div key={a.id}>
+          <span className="badge">Appeal: {a.state}</span>
+          <p>{a.reason}</p>
+          {a.review_reason && <p>Moderator feedback: {a.review_reason}</p>}
+        </div>
+      ))}
+      {bannedAt &&
+        (appeals.some((a) => a.state === "open") ? (
+          <p role="status">Your appeal is waiting for moderator review.</p>
+        ) : (
+          <form onSubmit={submit}>
+            <label className="field">
+              Explain why the map ban should be lifted
+              <textarea
+                value={reason}
+                onChange={(e) => setReason(e.target.value)}
+                required
+                minLength={10}
+                maxLength={2000}
+              />
+            </label>
+            <button
+              className="button primary"
+              disabled={busy || reason.trim().length < 10}
+            >
+              {busy ? "Sending…" : "Appeal map ban"}
+            </button>
+          </form>
+        ))}
+      {error && (
+        <p role="alert" className="error-message">
+          {error}
+        </p>
+      )}
+    </section>
+  );
+}