initial commit, boilerplate stuff

src/pages/Dump.tsx

@@ -0,0 +1,92 @@
+import { useEffect, useState } from "react";
+import { Link, useParams } from "react-router";
+
+import { API_URL } from "../config/api.ts";
+
+import type { Dump } from "../model.ts";
+
+import { useAuth } from "../hooks/useAuth.ts";
+
+type DumpState =
+  | { status: "loading" }
+  | { status: "error"; error: string }
+  | { status: "loaded"; dump: Dump };
+
+export function Dump() {
+  const { selectedDump } = useParams();
+
+  const [dumpState, setDumpState] = useState<DumpState>({ status: "loading" });
+
+  const { user } = useAuth();
+
+  // Fetch dump data
+  useEffect(() => {
+    if (!selectedDump) return;
+
+    setDumpState({ status: "loading" });
+
+    (async () => {
+      try {
+        const res = await fetch(`${API_URL}/api/dumps/${selectedDump}`);
+        if (!res.ok) {
+          throw new Error(`HTTP ${res.status}`);
+        }
+
+        const apiResponse = await res.json();
+        setDumpState({ status: "loaded", dump: apiResponse.data });
+      } catch (err) {
+        setDumpState({
+          status: "error",
+          error: err instanceof Error ? err.message : "Failed to load dump",
+        });
+      }
+    })();
+  }, [selectedDump]);
+
+  if (dumpState.status === "loading") {
+    return <div className="loading">Loading dump...</div>;
+  }
+
+  if (dumpState.status === "error") {
+    return (
+      <div className="error-container">
+        <h2>Error</h2>
+        <p>{dumpState.error}</p>
+        <button type="button" onClick={() => globalThis.location.reload()}>
+          Retry
+        </button>
+        <p>
+          <Link to="/">← Back to all dumps</Link>
+        </p>
+      </div>
+    );
+  }
+
+  const { dump } = dumpState;
+  const canEdit = !!user &&
+    (dump.userId === user.id || user.isAdmin === true);
+
+  return (
+    <div className="dump-container">
+      <div className="dump-meta">
+        <h1>{dump.title}</h1>
+        {dump.description && (
+          <p className="dump-description">{dump.description}</p>
+        )}
+      </div>
+
+      <div className="dump-grid">
+        ~
+      </div>
+
+      <div className="dump-actions">
+        {canEdit && (
+          <Link to={`/dumps/${dump.id}/edit`}>
+            Edit dump
+          </Link>
+        )}
+        <Link to="/">← Back to all dumps</Link>
+      </div>
+    </div>
+  );
+}