331 lines
10 KiB
TypeScript
331 lines
10 KiB
TypeScript
"use client";
|
|
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;
|
|
description: string;
|
|
state: string;
|
|
update_state: string | null;
|
|
source: string;
|
|
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;
|
|
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;
|
|
appeals: Appeal[];
|
|
}>("moderation");
|
|
setMaps(d.maps);
|
|
setReports(d.reports);
|
|
setAppeals(d.appeals);
|
|
setError("");
|
|
} catch (e) {
|
|
setError((e as Error).message);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
async function resolveReport(id: string, decision: "confirm" | "dismiss") {
|
|
setBusy(true);
|
|
setError("");
|
|
try {
|
|
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);
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
}
|
|
useEffect(() => {
|
|
load();
|
|
}, []);
|
|
async function decide(datasetId: string, decision: string) {
|
|
setBusy(true);
|
|
setError("");
|
|
try {
|
|
await api("moderation", {
|
|
datasetId,
|
|
decision,
|
|
reason: reasons[datasetId] || undefined,
|
|
});
|
|
await load();
|
|
} catch (e) {
|
|
setError((e as Error).message);
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
}
|
|
return (
|
|
<>
|
|
{error && (
|
|
<p role="alert" className="error-message">
|
|
{error}
|
|
</p>
|
|
)}
|
|
{loading && <p role="status">Loading review queue…</p>}
|
|
{!loading && !maps.length && !error && (
|
|
<p className="muted">The review queue is clear.</p>
|
|
)}
|
|
{maps.map((m) => (
|
|
<article className="tool-card" key={m.id}>
|
|
<span className="badge">{m.state}</span>
|
|
{m.update_state === "review" && (
|
|
<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>
|
|
{m.map && (
|
|
<Image
|
|
src={m.map}
|
|
width={512}
|
|
height={512}
|
|
alt="Map for moderator review"
|
|
unoptimized
|
|
style={{ maxWidth: "100%", height: "auto" }}
|
|
/>
|
|
)}
|
|
<label className="field">
|
|
Review reason
|
|
<textarea
|
|
value={reasons[m.id] || ""}
|
|
onChange={(e) =>
|
|
setReasons((s) => ({ ...s, [m.id]: e.target.value }))
|
|
}
|
|
/>
|
|
</label>
|
|
<div className="inline-actions">
|
|
<button className="button" onClick={() => setPreview(m.id)}>
|
|
Inspect 360° locations
|
|
</button>
|
|
{m.state === "review" || m.update_state === "review" ? (
|
|
<>
|
|
<button
|
|
className="button primary"
|
|
disabled={busy}
|
|
onClick={() => decide(m.id, "approve")}
|
|
>
|
|
{m.update_state === "review"
|
|
? "Approve update"
|
|
: "Approve map"}
|
|
</button>
|
|
<button
|
|
className="button"
|
|
disabled={busy || !reasons[m.id]?.trim()}
|
|
onClick={() => decide(m.id, "reject")}
|
|
>
|
|
Return with feedback
|
|
</button>
|
|
</>
|
|
) : null}
|
|
{m.state === "published" && (
|
|
<button
|
|
className="button"
|
|
disabled={busy}
|
|
onClick={() => decide(m.id, "unpublish")}
|
|
>
|
|
Unpublish
|
|
</button>
|
|
)}
|
|
</div>
|
|
</article>
|
|
))}
|
|
{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>
|
|
</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`}
|
|
onClose={() => setPreview(null)}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
}
|