Add community content reports, map bans, and appeals
This commit is contained in:
@@ -3,6 +3,8 @@ import { useEffect, useState } from "react";
|
||||
import Image from "next/image";
|
||||
import { api } from "./StartGame";
|
||||
import { PanoramaPreview } from "./PanoramaPreview";
|
||||
import { reportCategories } from "@/shared/moderation";
|
||||
import type { Appeal } from "./MapAppeal";
|
||||
type ReviewMap = {
|
||||
id: string;
|
||||
name: string;
|
||||
@@ -13,24 +15,44 @@ type ReviewMap = {
|
||||
panorama_count: number;
|
||||
map: string | null;
|
||||
image: string | null;
|
||||
report_strikes: number;
|
||||
banned_at: string | null;
|
||||
};
|
||||
export function Moderation() {
|
||||
const [maps, setMaps] = useState<ReviewMap[]>([]),
|
||||
[reports, setReports] = useState<
|
||||
{ id: string; dataset_id: string; reason: string }[]
|
||||
{
|
||||
id: string;
|
||||
dataset_id: string;
|
||||
reason: string;
|
||||
category: keyof typeof reportCategories;
|
||||
panorama_id: string | null;
|
||||
evidence_url: string | null;
|
||||
created_at: string;
|
||||
mapName: string;
|
||||
map: string | null;
|
||||
}[]
|
||||
>([]),
|
||||
[appeals, setAppeals] = useState<Appeal[]>([]),
|
||||
[error, setError] = useState(""),
|
||||
[busy, setBusy] = useState(false),
|
||||
[reasons, setReasons] = useState<Record<string, string>>({});
|
||||
const [preview, setPreview] = useState<string | null>(null),
|
||||
[loading, setLoading] = useState(true);
|
||||
const [reportPreview, setReportPreview] = useState<{
|
||||
id: string;
|
||||
panorama: string | null;
|
||||
} | null>(null);
|
||||
async function load() {
|
||||
try {
|
||||
const d = await api<{ maps: ReviewMap[]; reports: typeof reports }>(
|
||||
"moderation",
|
||||
);
|
||||
const d = await api<{
|
||||
maps: ReviewMap[];
|
||||
reports: typeof reports;
|
||||
appeals: Appeal[];
|
||||
}>("moderation");
|
||||
setMaps(d.maps);
|
||||
setReports(d.reports);
|
||||
setAppeals(d.appeals);
|
||||
setError("");
|
||||
} catch (e) {
|
||||
setError((e as Error).message);
|
||||
@@ -38,11 +60,23 @@ export function Moderation() {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
async function resolveReport(id: string) {
|
||||
async function resolveReport(id: string, decision: "confirm" | "dismiss") {
|
||||
setBusy(true);
|
||||
setError("");
|
||||
try {
|
||||
await api(`reports/${id}`, { state: "resolved" }, "PATCH");
|
||||
await api(`reports/${id}`, { decision, reason: reasons[id] }, "PATCH");
|
||||
await load();
|
||||
} catch (e) {
|
||||
setError((e as Error).message);
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
async function reviewAppeal(id: string, decision: "approve" | "reject") {
|
||||
setBusy(true);
|
||||
setError("");
|
||||
try {
|
||||
await api(`moderation/appeals/${id}`, { decision, reason: reasons[id] });
|
||||
await load();
|
||||
} catch (e) {
|
||||
setError((e as Error).message);
|
||||
@@ -87,6 +121,12 @@ export function Moderation() {
|
||||
<span className="badge">Map update awaiting review</span>
|
||||
)}
|
||||
<h2>{m.name}</h2>
|
||||
{m.report_strikes > 0 && (
|
||||
<p className={m.banned_at ? "error-message" : "muted"}>
|
||||
{m.report_strikes}/3 confirmed reports
|
||||
{m.banned_at ? " · Banned; owner appeal required" : ""}
|
||||
</p>
|
||||
)}
|
||||
<p className="muted">
|
||||
{m.source} · {m.panorama_count} locations · {m.description}
|
||||
</p>
|
||||
@@ -148,23 +188,137 @@ export function Moderation() {
|
||||
{reports.length > 0 && (
|
||||
<section className="token-box">
|
||||
<h2>Community reports</h2>
|
||||
<p className="muted">
|
||||
Confirming a valid report adds one strike to the map. Three strikes
|
||||
automatically unpublish it. Dismissed reports add no strikes.
|
||||
</p>
|
||||
{reports.map((r) => (
|
||||
<article className="draft-row" key={r.id}>
|
||||
<div>
|
||||
<h3>{r.mapName}</h3>
|
||||
<code>{r.dataset_id}</code>
|
||||
<p>
|
||||
{r.panorama_id ? `Panorama: ${r.panorama_id}` : "Entire map"}{" "}
|
||||
· {reportCategories[r.category]} ·{" "}
|
||||
{new Date(r.created_at).toLocaleString()}
|
||||
</p>
|
||||
<p>{r.reason}</p>
|
||||
{r.evidence_url && (
|
||||
<p>
|
||||
<a
|
||||
href={r.evidence_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Open evidence
|
||||
</a>
|
||||
</p>
|
||||
)}
|
||||
{r.map && (
|
||||
<Image
|
||||
src={r.map}
|
||||
width={320}
|
||||
height={320}
|
||||
alt="Reported map version"
|
||||
unoptimized
|
||||
style={{ maxWidth: "100%", height: "auto" }}
|
||||
/>
|
||||
)}
|
||||
<button
|
||||
className="button"
|
||||
onClick={() =>
|
||||
setReportPreview({ id: r.id, panorama: r.panorama_id })
|
||||
}
|
||||
>
|
||||
Inspect reported content
|
||||
</button>
|
||||
<label className="field">
|
||||
Decision reason
|
||||
<textarea
|
||||
maxLength={2000}
|
||||
value={reasons[r.id] ?? ""}
|
||||
onChange={(e) =>
|
||||
setReasons((s) => ({ ...s, [r.id]: e.target.value }))
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
<div className="inline-actions">
|
||||
<button
|
||||
className="button primary"
|
||||
disabled={
|
||||
busy ||
|
||||
(reasons[r.id]?.trim().length ?? 0) < 10 ||
|
||||
!!maps.find((m) => m.id === r.dataset_id)?.banned_at
|
||||
}
|
||||
onClick={() => resolveReport(r.id, "confirm")}
|
||||
>
|
||||
Confirm report · add strike
|
||||
</button>
|
||||
<button
|
||||
className="button"
|
||||
disabled={busy || (reasons[r.id]?.trim().length ?? 0) < 10}
|
||||
onClick={() => resolveReport(r.id, "dismiss")}
|
||||
>
|
||||
Dismiss report
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
className="button"
|
||||
disabled={busy}
|
||||
onClick={() => resolveReport(r.id)}
|
||||
>
|
||||
Resolve report
|
||||
</button>
|
||||
</article>
|
||||
))}
|
||||
</section>
|
||||
)}
|
||||
{appeals.length > 0 && (
|
||||
<section className="token-box">
|
||||
<h2>Map ban appeals</h2>
|
||||
{appeals.map((a) => (
|
||||
<article className="tool-card" key={a.id}>
|
||||
<h3>
|
||||
{maps.find((m) => m.id === a.dataset_id)?.name ?? a.dataset_id}
|
||||
</h3>
|
||||
<p>{a.reason}</p>
|
||||
<button
|
||||
className="button"
|
||||
onClick={() => setPreview(a.dataset_id)}
|
||||
>
|
||||
Inspect map panoramas
|
||||
</button>
|
||||
<label className="field">
|
||||
Appeal decision reason
|
||||
<textarea
|
||||
maxLength={2000}
|
||||
value={reasons[a.id] ?? ""}
|
||||
onChange={(e) =>
|
||||
setReasons((s) => ({ ...s, [a.id]: e.target.value }))
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
<div className="inline-actions">
|
||||
<button
|
||||
className="button primary"
|
||||
disabled={busy || (reasons[a.id]?.trim().length ?? 0) < 10}
|
||||
onClick={() => reviewAppeal(a.id, "approve")}
|
||||
>
|
||||
Approve appeal · restore map
|
||||
</button>
|
||||
<button
|
||||
className="button"
|
||||
disabled={busy || (reasons[a.id]?.trim().length ?? 0) < 10}
|
||||
onClick={() => reviewAppeal(a.id, "reject")}
|
||||
>
|
||||
Reject appeal · keep ban
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</section>
|
||||
)}
|
||||
{reportPreview && (
|
||||
<PanoramaPreview
|
||||
endpoint={`moderation/reports/${reportPreview.id}/panoramas`}
|
||||
initialId={reportPreview.panorama ?? undefined}
|
||||
onClose={() => setReportPreview(null)}
|
||||
/>
|
||||
)}
|
||||
{preview && (
|
||||
<PanoramaPreview
|
||||
endpoint={`moderation/${preview}/panoramas`}
|
||||
|
||||
Reference in New Issue
Block a user