feat: Implement client-side routing for person list and details, including adding opinions.

frontend/src/App.tsx

@@ -1,6 +1,9 @@
 import { useState, useEffect } from "react";
-import { Person, PersonList } from "../items";
+import { Person, PersonList as PersonListProto } from "../items";
 import { Login } from "./Login";
+import { PersonList } from "./PersonList";
+import { PersonDetails } from "./PersonDetails";
+import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
 import "./App.css";
 
 function App() {
@@ -17,7 +20,7 @@ function App() {
     })
       .then((res) => res.arrayBuffer())
       .then((buffer) => {
-        const list = PersonList.decode(new Uint8Array(buffer));
+        const list = PersonListProto.decode(new Uint8Array(buffer));
         setPeople(list.person);
       })
       .catch((err) => console.error("Failed to fetch people:", err));
@@ -33,7 +36,7 @@ function App() {
   }
 
   return (
-    <>
+    <BrowserRouter>
       <div className="card">
         <div
           style={{
@@ -43,31 +46,22 @@ function App() {
             marginBottom: "1rem",
           }}
         >
-          <h2>People List</h2>
+          <h2>
+            <Link to="/" style={{ textDecoration: "none", color: "inherit" }}>
+              People List
+            </Link>
+          </h2>
           <button onClick={handleLogout}>Logout</button>
         </div>
-        {people.map((person, index) => (
-          <div
-            key={index}
-            style={{
-              marginBottom: "1rem",
-              padding: "1rem",
-              border: "1px solid #ccc",
-              borderRadius: "8px",
-            }}
-          >
-            <h3>{person.name}</h3>
-            <ul>
-              {person.opinion.map((op, i) => (
-                <li key={i}>
-                  {op.title} - {op.wouldPlay ? "Would Play" : "Would Not Play"}
-                </li>
-              ))}
-            </ul>
-          </div>
-        ))}
+        <Routes>
+          <Route path="/" element={<PersonList people={people} />} />
+          <Route
+            path="/person/:name"
+            element={<PersonDetails token={token} />}
+          />
+        </Routes>
       </div>
-    </>
+    </BrowserRouter>
   );
 }
 

frontend/src/PersonDetails.tsx

@@ -0,0 +1,104 @@
+import { useState, useEffect } from "react";
+import { useParams } from "react-router-dom";
+import { Person, AddOpinionRequest } from "../items";
+
+interface Props {
+  token: string;
+}
+
+export const PersonDetails = ({ token }: Props) => {
+  const { name } = useParams<{ name: string }>();
+  const [person, setPerson] = useState<Person | null>(null);
+  const [gameTitle, setGameTitle] = useState("");
+  const [wouldPlay, setWouldPlay] = useState(false);
+
+  useEffect(() => {
+    if (name) {
+      fetch(`/api/${name}`, {
+        headers: { Authorization: `Bearer ${token}` },
+      })
+        .then((res) => res.arrayBuffer())
+        .then((buffer) => {
+          try {
+            setPerson(Person.decode(new Uint8Array(buffer)));
+          } catch (e) {
+            console.error("Failed to decode person:", e);
+          }
+        })
+        .catch(console.error);
+    }
+  }, [name, token]);
+
+  const handleAddOpinion = async () => {
+    if (!person) return;
+
+    const req = AddOpinionRequest.create({
+      gameTitle,
+      wouldPlay,
+    });
+
+    const buffer = AddOpinionRequest.encode(req).finish();
+
+    try {
+      const res = await fetch("/api/opinion", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/octet-stream",
+          Authorization: `Bearer ${token}`,
+        },
+        body: buffer,
+      });
+
+      if (res.ok) {
+        const resBuffer = await res.arrayBuffer();
+        setPerson(Person.decode(new Uint8Array(resBuffer)));
+        setGameTitle("");
+        setWouldPlay(false);
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  if (!person) return <div>Loading...</div>;
+
+  return (
+    <div className="card">
+      <h2>{person.name}</h2>
+      <ul>
+        {person.opinion.map((op, i) => (
+          <li key={i}>
+            {op.title} - {op.wouldPlay ? "Would Play" : "Would Not Play"}
+          </li>
+        ))}
+      </ul>
+
+      <div
+        style={{
+          marginTop: "2rem",
+          borderTop: "1px solid #ccc",
+          paddingTop: "1rem",
+        }}
+      >
+        <h3>Add Opinion</h3>
+        <div style={{ display: "flex", gap: "1rem", alignItems: "center" }}>
+          <input
+            type="text"
+            placeholder="Game Title"
+            value={gameTitle}
+            onChange={(e) => setGameTitle(e.target.value)}
+          />
+          <label>
+            <input
+              type="checkbox"
+              checked={wouldPlay}
+              onChange={(e) => setWouldPlay(e.target.checked)}
+            />
+            Would Play
+          </label>
+          <button onClick={handleAddOpinion}>Add</button>
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/src/PersonList.tsx

@@ -0,0 +1,35 @@
+import { Person } from "../items";
+import { Link } from "react-router-dom";
+
+interface Props {
+  people: Person[];
+}
+
+export const PersonList = ({ people }: Props) => {
+  return (
+    <div>
+      {people.map((person, index) => (
+        <div
+          key={index}
+          style={{
+            marginBottom: "1rem",
+            padding: "1rem",
+            border: "1px solid #ccc",
+            borderRadius: "8px",
+          }}
+        >
+          <h3>
+            <Link to={`/person/${person.name}`}>{person.name}</Link>
+          </h3>
+          <ul>
+            {person.opinion.map((op, i) => (
+              <li key={i}>
+                {op.title} - {op.wouldPlay ? "Would Play" : "Would Not Play"}
+              </li>
+            ))}
+          </ul>
+        </div>
+      ))}
+    </div>
+  );
+};