Add panorama previews and repair beta export rendering

components/Moderation.tsx

@@ -2,6 +2,7 @@
 import { useEffect, useState } from "react";
 import Image from "next/image";
 import { api } from "./StartGame";
+import { PanoramaPreview } from "./PanoramaPreview";
 type ReviewMap = {
   id: string;
   name: string;
@@ -20,6 +21,8 @@ export function Moderation() {
     [error, setError] = useState(""),
     [busy, setBusy] = useState(false),
     [reasons, setReasons] = useState<Record<string, string>>({});
+  const [preview, setPreview] = useState<string | null>(null),
+    [loading, setLoading] = useState(true);
   async function load() {
     try {
       const d = await api<{ maps: ReviewMap[]; reports: typeof reports }>(
@@ -27,8 +30,23 @@ export function Moderation() {
       );
       setMaps(d.maps);
       setReports(d.reports);
+      setError("");
     } catch (e) {
       setError((e as Error).message);
+    } finally {
+      setLoading(false);
+    }
+  }
+  async function resolveReport(id: string) {
+    setBusy(true);
+    setError("");
+    try {
+      await api(`reports/${id}`, { state: "resolved" }, "PATCH");
+      await load();
+    } catch (e) {
+      setError((e as Error).message);
+    } finally {
+      setBusy(false);
     }
   }
   useEffect(() => {
@@ -57,7 +75,8 @@ export function Moderation() {
           {error}
         </p>
       )}
-      {!maps.length && !error && (
+      {loading && <p role="status">Loading review queue…</p>}
+      {!loading && !maps.length && !error && (
         <p className="muted">The review queue is clear.</p>
       )}
       {maps.map((m) => (
@@ -87,6 +106,9 @@ export function Moderation() {
             />
           </label>
           <div className="inline-actions">
+            <button className="button" onClick={() => setPreview(m.id)}>
+              Inspect 360° locations
+            </button>
             {m.state === "review" ? (
               <>
                 <button
@@ -125,10 +147,23 @@ export function Moderation() {
                 <code>{r.dataset_id}</code>
                 <p>{r.reason}</p>
               </div>
+              <button
+                className="button"
+                disabled={busy}
+                onClick={() => resolveReport(r.id)}
+              >
+                Resolve report
+              </button>
             </article>
           ))}
         </section>
       )}
+      {preview && (
+        <PanoramaPreview
+          endpoint={`moderation/${preview}/panoramas`}
+          onClose={() => setPreview(null)}
+        />
+      )}
     </>
   );
 }