From b6a31e5eec008e018735821b23dbf23d0cf740fd Mon Sep 17 00:00:00 2001
From: code002lover <code002lover@ipost.rocks>
Date: Fri, 5 Dec 2025 11:32:26 +0100
Subject: [PATCH] feat: Implement game metadata caching to reduce redundant API
 calls for game details.

---
 frontend/src/GameFilter.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/frontend/src/GameFilter.tsx b/frontend/src/GameFilter.tsx
index 0e24355..3cc2fd2 100644
--- a/frontend/src/GameFilter.tsx
+++ b/frontend/src/GameFilter.tsx
@@ -12,6 +12,8 @@ export function GameFilter() {
   const [people, setPeople] = useState<Person[]>([]);
   const [selectedPeople, setSelectedPeople] = useState<Set<string>>(new Set());
   const [filteredGames, setFilteredGames] = useState<string[]>([]);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [metaData, _setMetaData] = useState<{ [key: string]: GameProto }>({});
 
   useEffect(() => {
     apiFetch("/api")
@@ -56,11 +58,16 @@ export function GameFilter() {
       .filter(([, players]) => players.size === 0)
       .map(([game]) => game);
 
-    const games = game_titles.map((title) => {
-      return apiFetch(`/api/game/${encodeURIComponent(title)}`)
+    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));
+          const game = GameProto.decode(new Uint8Array(buffer)) as GameProto;
+          metaData[title] = game;
           return game;
         })
         .catch((err) => console.error("Failed to fetch game:", err));
@@ -76,7 +83,7 @@ export function GameFilter() {
       });
       setFilteredGames(filteredGames.map((g) => (g as GameProto).title));
     });
-  }, [selectedPeople, people]);
+  }, [selectedPeople, people, metaData]);
 
   const togglePerson = (name: string) => {
     const newSelected = new Set(selectedPeople);