From 985a4e22b863b6dda3a77478043495f2a8f4905b Mon Sep 17 00:00:00 2001
From: Eric Zhang <ekzhang1@gmail.com>
Date: Mon, 23 Dec 2024 16:13:29 -0600
Subject: [PATCH] Bump profile to last 100 games and fetch stale games

---
 src/components/ProfileGamesTable.js |  2 +-
 src/pages/ProfilePage.js            | 25 +++++++++++++++++++++----
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/components/ProfileGamesTable.js b/src/components/ProfileGamesTable.js
index 1b03f60..55060b1 100644
--- a/src/components/ProfileGamesTable.js
+++ b/src/components/ProfileGamesTable.js
@@ -61,7 +61,7 @@ function ProfileGamesTable({ userId, gamesWithScores, handleClickGame }) {
   if (Object.keys(gamesWithScores).length === 0) {
     return (
       <Typography style={{ color: grey[400] }}>
-        No recent games to display…
+        No recent games in this category.
       </Typography>
     );
   }
diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js
index 0eb6ab2..809a69a 100644
--- a/src/pages/ProfilePage.js
+++ b/src/pages/ProfilePage.js
@@ -7,7 +7,7 @@ import Paper from "@mui/material/Paper";
 import Select from "@mui/material/Select";
 import Typography from "@mui/material/Typography";
 import makeStyles from "@mui/styles/makeStyles";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { Navigate, useParams } from "react-router-dom";
 
 import Loading from "../components/Loading";
@@ -15,7 +15,7 @@ import ProfileGamesTable from "../components/ProfileGamesTable";
 import ProfileName from "../components/ProfileName";
 import Subheading from "../components/Subheading";
 import UserStatistics from "../components/UserStatistics";
-import firebase from "../firebase";
+import firebase, { fetchStaleGame } from "../firebase";
 import useFirebaseRefs from "../hooks/useFirebaseRefs";
 import useStats from "../hooks/useStats";
 import { computeState, hasHint, modes } from "../util";
@@ -73,7 +73,7 @@ function ProfilePage() {
       .database()
       .ref(`/userGames/${userId}`)
       .orderByValue()
-      .limitToLast(50);
+      .limitToLast(100);
     const update = (snapshot) => {
       query.off("value", update);
       setGames(snapshot.val() ?? {});
@@ -100,9 +100,26 @@ function ProfilePage() {
   );
   const [gameDataVals, loadingGameDataVals] = useFirebaseRefs(
     useMemo(() => gameIds.map((gameId) => `gameData/${gameId}`), [gameIds]),
-    true,
   );
 
+  /** @type {import("react").MutableRefObject<Set<string>>} */
+  const staleGamesFetched = useRef(new Set());
+
+  useEffect(() => {
+    if (!gameVals || !gameDataVals) return;
+    for (let i = 0; i < gameIds.length; i++) {
+      // Populate archived game data lazily if needed.
+      if (
+        gameVals[i].status === "done" &&
+        !gameDataVals[i] &&
+        !staleGamesFetched.current.has(gameIds[i])
+      ) {
+        staleGamesFetched.current.add(gameIds[i]);
+        fetchStaleGame({ gameId: gameIds[i] });
+      }
+    }
+  }, [gameVals, gameDataVals]);
+
   if (redirect) {
     return <Navigate push to={redirect} />;
   }