fix leaderboard page info not updating
All checks were successful
Deploy Website / deploy (push) Successful in 8m21s

This commit is contained in:
Lee 2024-10-12 03:17:39 +01:00
parent 7327b8d169
commit 97a91d7249
2 changed files with 8 additions and 14 deletions

@ -30,15 +30,18 @@ type LeaderboardDataProps = {
export function LeaderboardData({ initialPage, initialScores, initialLeaderboard }: LeaderboardDataProps) { export function LeaderboardData({ initialPage, initialScores, initialLeaderboard }: LeaderboardDataProps) {
const [beatSaverMap, setBeatSaverMap] = useState<BeatSaverMap | undefined>(); const [beatSaverMap, setBeatSaverMap] = useState<BeatSaverMap | undefined>();
const [selectedLeaderboardId, setSelectedLeaderboardId] = useState(initialLeaderboard.id); const [selectedLeaderboardId, setSelectedLeaderboardId] = useState(initialLeaderboard.id);
const [currentLeaderboard, setCurrentLeaderboard] = useState(initialLeaderboard);
const { data: leaderboard } = useQuery({ let currentLeaderboard = initialLeaderboard;
queryKey: ["leaderboard-" + initialLeaderboard.id, selectedLeaderboardId], const { data } = useQuery({
queryKey: ["leaderboard", selectedLeaderboardId],
queryFn: () => scoresaberService.lookupLeaderboard(selectedLeaderboardId + ""), queryFn: () => scoresaberService.lookupLeaderboard(selectedLeaderboardId + ""),
initialData: initialLeaderboard, initialData: initialLeaderboard,
staleTime: 30 * 1000, // Cache data for 30 seconds
}); });
if (data) {
currentLeaderboard = data;
}
const fetchBeatSaverData = useCallback(async () => { const fetchBeatSaverData = useCallback(async () => {
const beatSaverMap = await lookupBeatSaverMap(initialLeaderboard.songHash); const beatSaverMap = await lookupBeatSaverMap(initialLeaderboard.songHash);
setBeatSaverMap(beatSaverMap); setBeatSaverMap(beatSaverMap);
@ -48,16 +51,6 @@ export function LeaderboardData({ initialPage, initialScores, initialLeaderboard
fetchBeatSaverData(); fetchBeatSaverData();
}, [fetchBeatSaverData]); }, [fetchBeatSaverData]);
/**
* When the leaderboard changes, update the previous and current leaderboards.
* This is to prevent flickering between leaderboards.
*/
useEffect(() => {
if (leaderboard) {
setCurrentLeaderboard(leaderboard);
}
}, [leaderboard]);
if (!currentLeaderboard) { if (!currentLeaderboard) {
return null; return null;
} }

@ -106,6 +106,7 @@ export default function LeaderboardScores({
setSelectedLeaderboardId(id); setSelectedLeaderboardId(id);
setCurrentPage(1); setCurrentPage(1);
// Call the leaderboard changed callback
if (leaderboardChanged) { if (leaderboardChanged) {
leaderboardChanged(id); leaderboardChanged(id);
} }