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 (
- No recent games to display…
+ No recent games in this category.
);
}
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>} */
+ 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 ;
}