MineGeo/components/CommunityModeration.tsx

"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>
  );
}