Add map community reactions, comments, and moderation

components/ReportCommunity.tsx

@@ -0,0 +1,133 @@
+"use client";
+import { useEffect, useId, useRef, useState } from "react";
+import { Flag } from "lucide-react";
+import { api } from "@/lib/client-api";
+import { communityCategories } from "@/shared/community";
+import { useI18n } from "./I18nProvider";
+
+export function ReportCommunity({
+  target,
+  targetId,
+}: {
+  target: "comment" | "account";
+  targetId: string;
+}) {
+  const { t } = useI18n();
+  const titleId = useId();
+  const dialog = useRef<HTMLDialogElement>(null);
+  const [open, setOpen] = useState(false);
+  const [category, setCategory] = useState("spam");
+  const [reason, setReason] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+  const [message, setMessage] = useState("");
+  const label = target === "comment" ? "Report comment" : "Report account";
+  useEffect(() => {
+    if (!open) return;
+    const previous =
+      document.activeElement instanceof HTMLElement
+        ? document.activeElement
+        : null;
+    const element = dialog.current;
+    element?.showModal();
+    return () => {
+      element?.close();
+      previous?.focus();
+    };
+  }, [open]);
+  async function submit(event: React.FormEvent) {
+    event.preventDefault();
+    setBusy(true);
+    setError("");
+    try {
+      await api("community/reports", { target, targetId, category, reason });
+      setMessage("Report sent for moderator review.");
+      setOpen(false);
+      setReason("");
+    } catch (e) {
+      setError((e as Error).message);
+    } finally {
+      setBusy(false);
+    }
+  }
+  return (
+    <>
+      <button
+        className="button"
+        onClick={() => {
+          setOpen(true);
+          setError("");
+          setMessage("");
+        }}
+      >
+        <Flag size={15} aria-hidden="true" /> {t(label)}
+      </button>
+      {message && (
+        <span role="status" className="success-message">
+          {t(message)}
+        </span>
+      )}
+      {open && (
+        <dialog
+          ref={dialog}
+          className="report-dialog"
+          aria-labelledby={titleId}
+          onCancel={() => setOpen(false)}
+        >
+          <form onSubmit={submit}>
+            <h2 id={titleId}>{t(label)}</h2>
+            <p className="muted">
+              {t(
+                "A moderator will review your report. Reports do not automatically remove content or ban accounts.",
+              )}
+            </p>
+            <label className="field">
+              {t("Reason")}
+              <select
+                value={category}
+                onChange={(e) => setCategory(e.target.value)}
+              >
+                {Object.entries(communityCategories).map(([value, label]) => (
+                  <option key={value} value={value}>
+                    {t(label)}
+                  </option>
+                ))}
+              </select>
+            </label>
+            <label className="field">
+              {t("What happened?")}
+              <textarea
+                required
+                minLength={10}
+                maxLength={2000}
+                value={reason}
+                onChange={(e) => setReason(e.target.value)}
+              />
+            </label>
+            {error && (
+              <p role="alert" className="error-message">
+                {t(error)}
+              </p>
+            )}
+            <div className="inline-actions">
+              <button
+                className="button primary"
+                disabled={busy || reason.trim().length < 10}
+              >
+                {t(busy ? "Sending…" : "Send report")}
+              </button>
+              <button
+                type="button"
+                className="button"
+                disabled={busy}
+                onClick={() => setOpen(false)}
+              >
+                {t("Cancel")}
+              </button>
+            </div>
+          </form>
+        </dialog>
+      )}
+    </>
+  );
+}