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 ; }