initial commit, boilerplate stuff

src/pages/Index.tsx

@@ -0,0 +1,122 @@
+import { useEffect, useState } from "react";
+import { Link, useNavigate } from "react-router";
+
+import { API_URL } from "../config/api.ts";
+
+import { useAuth } from "../hooks/useAuth.ts";
+
+import { type Dump } from "../model.ts";
+
+type DumpsState =
+  | { status: "loading" }
+  | { status: "error"; error: string }
+  | { status: "loaded"; dumps: Dump[] };
+
+export function Index() {
+  const { user, logout } = useAuth();
+  const navigate = useNavigate();
+
+  const handleCreateDump = () => {
+    navigate("/dumps/new");
+  };
+
+  const handleRegister = () => {
+    navigate("/register");
+  };
+
+  const handleLogin = () => {
+    navigate("/login");
+  };
+
+  const handleLogout = () => {
+    logout();
+    navigate("/", { replace: true });
+  };
+
+  const [dumpsState, setDumpsState] = useState<DumpsState>({
+    status: "loading",
+  });
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const response = await fetch(`${API_URL}/api/dumps/`);
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}`);
+        }
+
+        const apiResponse = await response.json();
+        setDumpsState({ status: "loaded", dumps: apiResponse.data });
+      } catch (err) {
+        setDumpsState({
+          status: "error",
+          error: err instanceof Error ? err.message : "Failed to load dumps",
+        });
+      }
+    })();
+  }, []);
+
+  if (dumpsState.status === "loading") {
+    return (
+      <main id="content">
+        <div className="loading">Loading dumps...</div>
+      </main>
+    );
+  }
+
+  if (dumpsState.status === "error") {
+    return (
+      <main id="content">
+        <div className="error-container">
+          <h2>Error</h2>
+          <p>{dumpsState.error}</p>
+          <button type="button" onClick={() => globalThis.location.reload()}>
+            Retry
+          </button>
+        </div>
+      </main>
+    );
+  }
+
+  const { dumps } = dumpsState;
+
+  return (
+    <main id="content">
+      <h1>🚚 Dumps</h1>
+
+      <p>Welcome, {user?.username ?? "guest"}!</p>
+
+      {user &&
+        <button type="button" onClick={handleCreateDump}>New dump</button>}
+
+      <p>Click on a dump below to participate.</p>
+
+      {dumps.length === 0
+        ? <p className="empty-state">No dumps available yet.</p>
+        : (
+          <ul>
+            {dumps.map((dump) => (
+              <li key={dump.id}>
+                <Link to={`/dumps/${dump.id}`} className="dump">
+                  {dump.title}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        )}
+
+      {user
+        ? (
+          <form>
+            <button type="button" onClick={handleLogout}>Logout</button>
+          </form>
+        )
+        : (
+          <form>
+            <button type="button" onClick={handleRegister}>Register</button>
+            <button type="button" onClick={handleLogin}>Log in</button>
+          </form>
+        )}
+    </main>
+  );
+}