add batch game info request

frontend/src/GameFilter.tsx

@@ -3,6 +3,8 @@ import {
   Person,
   PersonList as PersonListProto,
   Game as GameProto,
+  GetGameInfoRequest,
+  GameInfoResponse,
 } from "../items";
 import { apiFetch } from "./api";
 import { Link } from "react-router-dom";
@@ -72,31 +74,38 @@ export function GameFilter() {
       .filter(([, players]) => players.size === 0)
       .map(([game]) => game);
 
-    const games = game_titles.map(async (title) => {
-      if (metaData[title]) {
-        console.log("returned cached metadata");
-        return metaData[title];
-      }
-      return await apiFetch(`/api/game/${encodeURIComponent(title)}`)
-        .then((res) => res.arrayBuffer())
-        .then((buffer) => {
-          const game = GameProto.decode(new Uint8Array(buffer)) as GameProto;
-          metaData[title] = game;
-          return game;
-        })
-        .catch((err) => console.error("Failed to fetch game:", err));
-    });
+    let games = game_titles.filter((title) => metaData[title]).map((title) => metaData[title]);
+    const gamesToFetch = GetGameInfoRequest.encode(
+      GetGameInfoRequest.create({
+        games: game_titles.filter((title) => !metaData[title]),
+      })
+    ).finish();
 
-    Promise.all(games).then((games) => {
-      const filteredGames = games.filter((g) => {
-        const game = g as GameProto;
-        return (
-          game.maxPlayers >= selectedPeople.size &&
-          game.minPlayers <= selectedPeople.size
-        );
+    apiFetch("/api/games/batch", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/octet-stream",
+      },
+      body: gamesToFetch,
+    })
+      .then((res) => res.arrayBuffer())
+      .then((buffer) => {
+        const list = GameInfoResponse.decode(new Uint8Array(buffer));
+        games = games.concat(list.games);
+
+        games.forEach((game) => {
+          metaData[game.title] = game;
+        });
+
+        const filteredGames = games.filter((g) => {
+          const game = g as GameProto;
+          return (
+            game.maxPlayers >= selectedPeople.size &&
+            game.minPlayers <= selectedPeople.size
+          );
+        });
+        setFilteredGames(filteredGames.map((g) => (g as GameProto).title));
       });
-      setFilteredGames(filteredGames.map((g) => (g as GameProto).title));
-    });
   }, [selectedPeople, people, metaData]);
 
   const togglePerson = (name: string) => {

frontend/src/GameList.tsx

@@ -459,7 +459,7 @@ export function GameList({ onShowToast }: Props) {
                     "Content-Type": "application/octet-stream",
                   },
                   body: RemoveOpinionRequest.encode(
-                    AddOpinionRequest.create({
+                    RemoveOpinionRequest.create({
                       gameTitle: title,
                     })
                   ).finish(),