refactor: remove opinion adding functionality and UI from PersonDetails component

frontend/src/PersonDetails.tsx

@@ -1,44 +1,12 @@
 import { useState, useEffect } from "react";
 import { Link, useParams } from "react-router-dom";
-import { Person, AddOpinionRequest, Game, GameList } from "../items";
+import { Person } from "../items";
-import { apiFetch, get_auth_status } from "./api";
+import { apiFetch } from "./api";
 import { GameImage } from "./GameImage";
 
 export const PersonDetails = () => {
   const { name } = useParams<{ name: string }>();
   const [person, setPerson] = useState<Person | null>(null);
-  const [games, setGames] = useState<Game[]>([]);
-  const [gameTitle, setGameTitle] = useState("");
-  const [wouldPlay, setWouldPlay] = useState(false);
-  const [currentUser, setCurrentUser] = useState<string>("");
-
-  useEffect(() => {
-    async function fetchUser() {
-      const token = localStorage.getItem("token");
-      if (token) {
-        const authStatus = await get_auth_status();
-        setCurrentUser(authStatus?.username || "");
-      }
-    }
-    fetchUser();
-  }, []);
-
-  useEffect(() => {
-    apiFetch("/api/games")
-      .then((res) => res.arrayBuffer())
-      .then((buffer) => {
-        try {
-          const list = GameList.decode(new Uint8Array(buffer));
-          setGames(list.games);
-          if (list.games.length > 0) {
-            setGameTitle(list.games[0].title);
-          }
-        } catch (e) {
-          console.error("Failed to decode games:", e);
-        }
-      })
-      .catch(console.error);
-  }, []);
 
   useEffect(() => {
     if (name) {
@@ -55,36 +23,6 @@ export const PersonDetails = () => {
     }
   }, [name]);
 
-  const handleAddOpinion = async () => {
-    if (!person) return;
-
-    const req = AddOpinionRequest.create({
-      gameTitle,
-      wouldPlay,
-    });
-
-    const buffer = AddOpinionRequest.encode(req).finish();
-
-    try {
-      const res = await apiFetch("/api/opinion", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/octet-stream",
-        },
-        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 (
@@ -113,89 +51,6 @@ export const PersonDetails = () => {
           ))}
         </ul>
       </div>
-
-      {currentUser === name && (
-        <div
-          style={{
-            marginTop: "2rem",
-            borderTop: "1px solid var(--border-color)",
-            paddingTop: "2rem",
-          }}
-        >
-          <h3>Add Opinion</h3>
-          <div
-            style={{
-              display: "flex",
-              gap: "1rem",
-              alignItems: "flex-end",
-              flexWrap: "wrap",
-            }}
-          >
-            <div className="form-group" style={{ marginBottom: 0, flex: 1 }}>
-              <label>Game</label>
-              <select
-                value={gameTitle}
-                onChange={(e) => setGameTitle(e.target.value)}
-                style={{ width: "100%" }}
-              >
-                {games.map((g) => (
-                  <option key={g.title} value={g.title}>
-                    {g.title}
-                  </option>
-                ))}
-              </select>
-            </div>
-            <div
-              className="form-group"
-              style={{
-                marginBottom: 0,
-                flexDirection: "row",
-                alignItems: "center",
-                paddingBottom: "0.5rem",
-              }}
-            >
-              <input
-                type="checkbox"
-                checked={wouldPlay}
-                onChange={(e) => setWouldPlay(e.target.checked)}
-                id="wouldPlay"
-              />
-              <label
-                htmlFor="wouldPlay"
-                style={{ marginBottom: 0, cursor: "pointer" }}
-              >
-                Would Play
-              </label>
-            </div>
-            <button
-              onClick={handleAddOpinion}
-              style={{
-                marginBottom: "2px",
-                backgroundColor: "var(--accent-color)",
-              }}
-            >
-              Add
-            </button>
-          </div>
-          <div style={{ marginTop: "1rem" }}>
-            <Link
-              to={`/game/${encodeURIComponent(gameTitle)}`}
-              key={gameTitle}
-              className="list-item"
-              style={{
-                textDecoration: "none",
-                color: "inherit",
-                display: "flex",
-                justifyContent: "space-between",
-                alignItems: "center",
-              }}
-            >
-              <strong>{gameTitle}</strong>
-              <GameImage game={gameTitle} />
-            </Link>
-          </div>
-        </div>
-      )}
     </div>
   );
 };