Add map community reactions, comments, and moderation

components/CommunityModeration.tsx

@@ -0,0 +1,193 @@
+"use client";
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { api } from "@/lib/client-api";
+import {
+  communityCategories,
+  type CommunityReportView,
+} from "@/shared/community";
+import { useI18n } from "./I18nProvider";
+
+type Queue = { reports: CommunityReportView[]; nextCursor: string | null };
+export function CommunityModeration() {
+  const { t } = useI18n();
+  const [queue, setQueue] = useState<Queue | null>(null);
+  const [reasons, setReasons] = useState<Record<string, string>>({});
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+  async function load() {
+    setQueue(await api<Queue>("moderation/community-reports"));
+  }
+  useEffect(() => {
+    let active = true;
+    api<Queue>("moderation/community-reports")
+      .then((result) => {
+        if (active) setQueue(result);
+      })
+      .catch((e) => {
+        if (active) setError(e.message);
+      });
+    return () => {
+      active = false;
+    };
+  }, []);
+  async function act(action: () => Promise<unknown>) {
+    setBusy(true);
+    setError("");
+    try {
+      await action();
+      await load();
+    } catch (e) {
+      setError((e as Error).message);
+    } finally {
+      setBusy(false);
+    }
+  }
+  async function more() {
+    if (queue?.nextCursor == null) return;
+    setBusy(true);
+    setError("");
+    try {
+      const next = await api<Queue>(
+        `moderation/community-reports?cursor=${encodeURIComponent(queue.nextCursor)}`,
+      );
+      setQueue((current) => ({
+        ...next,
+        reports: [
+          ...(current?.reports ?? []),
+          ...next.reports.filter(
+            (r) => !current?.reports.some((old) => old.id === r.id),
+          ),
+        ],
+      }));
+    } catch (e) {
+      setError((e as Error).message);
+    } finally {
+      setBusy(false);
+    }
+  }
+  return (
+    <section className="token-box">
+      <h2>{t("Comment and account reports")}</h2>
+      <p className="muted">
+        {t(
+          "Review the evidence before taking action. Resolving a report does not automatically ban an account or remove a comment.",
+        )}
+      </p>
+      {error && (
+        <p role="alert" className="error-message">
+          {t(error)}{" "}
+          <button
+            className="button"
+            disabled={busy}
+            onClick={() => act(async () => {})}
+          >
+            {t("Try again")}
+          </button>
+        </p>
+      )}
+      {!queue && !error && <p role="status">{t("Loading review queue…")}</p>}
+      {queue?.reports.length === 0 && (
+        <p>{t("No open comment or account reports.")}</p>
+      )}
+      {queue?.reports.map((report) => (
+        <article className="tool-card" key={report.id}>
+          <h3>
+            {t(
+              report.target === "comment"
+                ? "Reported comment"
+                : "Reported account",
+            )}{" "}
+            · {t(communityCategories[report.category])}
+          </h3>
+          {report.target === "account" && (
+            <p>
+              {report.accountName ?? t("Deleted player")} ·{" "}
+              <code>{report.account_id}</code>
+            </p>
+          )}
+          {report.comment && (
+            <>
+              <blockquote className="community-body">
+                {report.comment.body}
+              </blockquote>
+              <p>
+                <Link
+                  className="button"
+                  href={`/servers/${report.comment.dataset_id}`}
+                >
+                  {t("Open map")}
+                </Link>{" "}
+                {report.comment.removed_at ? (
+                  t("Comment removed.")
+                ) : (
+                  <button
+                    className="button"
+                    disabled={busy}
+                    onClick={() =>
+                      act(() =>
+                        api(
+                          `community/comments/${report.comment_id}`,
+                          undefined,
+                          "DELETE",
+                        ),
+                      )
+                    }
+                  >
+                    {t("Remove comment")}
+                  </button>
+                )}
+              </p>
+              <p className="muted">
+                {t("Account ID:")}{" "}
+                <code>{report.comment.author_id ?? t("Deleted player")}</code>
+              </p>
+            </>
+          )}
+          <p className="community-body">{report.reason}</p>
+          <label className="field">
+            {t("Decision reason")}
+            <textarea
+              minLength={10}
+              maxLength={2000}
+              value={reasons[report.id] ?? ""}
+              onChange={(e) =>
+                setReasons((current) => ({
+                  ...current,
+                  [report.id]: e.target.value,
+                }))
+              }
+            />
+          </label>
+          <div className="inline-actions">
+            {(["resolved", "dismissed"] as const).map((decision) => (
+              <button
+                key={decision}
+                className="button"
+                disabled={busy || (reasons[report.id]?.trim().length ?? 0) < 10}
+                onClick={() =>
+                  act(() =>
+                    api(
+                      `moderation/community-reports/${report.id}`,
+                      { decision, reason: reasons[report.id] },
+                      "PATCH",
+                    ),
+                  )
+                }
+              >
+                {t(
+                  decision === "resolved" ? "Resolve report" : "Dismiss report",
+                )}
+              </button>
+            ))}
+          </div>
+        </article>
+      ))}
+      {queue?.nextCursor != null && (
+        <button className="button" disabled={busy} onClick={more}>
+          {t("Load more reports")}
+        </button>
+      )}
+    </section>
+  );
+}