diff --git a/projects/website/src/components/score/score.tsx b/projects/website/src/components/score/score.tsx index 7d6b4ba..f14773a 100644 --- a/projects/website/src/components/score/score.tsx +++ b/projects/website/src/components/score/score.tsx @@ -38,7 +38,7 @@ type Props = { }; }; -type LeaderboardDropdownData = { +type DropdownData = { scores?: LeaderboardScoresResponse; scoreStats?: ScoreStatsToken; }; @@ -57,13 +57,13 @@ export default function Score({ leaderboard, beatSaverMap, score, settings }: Pr const [baseScore, setBaseScore] = useState(score.score); const [isLeaderboardExpanded, setIsLeaderboardExpanded] = useState(false); const [loading, setLoading] = useState(false); - const [leaderboardDropdownData, setLeaderboardDropdownData] = useState(); + const [dropdownData, setDropdownData] = useState(); const [selectedMode, setSelectedMode] = useState(modes[0]); const scoresPage = getPageFromRank(score.rank, 12); const isMobile = useIsMobile(); - const { data, isLoading } = useQuery({ + const { data, isLoading } = useQuery({ queryKey: [`leaderboardDropdownData:${leaderboard.id}`, leaderboard.id, score.scoreId, isLeaderboardExpanded], queryFn: async () => { const scores = await fetchLeaderboardScores( @@ -82,14 +82,18 @@ export default function Score({ leaderboard, beatSaverMap, score, settings }: Pr useEffect(() => { if (data) { - setLeaderboardDropdownData(data); + setDropdownData(data); setLoading(false); } }, [data]); useEffect(() => { + /** + * Reset the leaderboard dropdown when the score changes + */ setIsLeaderboardExpanded(false); - setLeaderboardDropdownData(undefined); + setDropdownData(undefined); + setSelectedMode(modes[0]); }, [score.scoreId]); useEffect(() => { @@ -101,7 +105,8 @@ export default function Score({ leaderboard, beatSaverMap, score, settings }: Pr const handleLeaderboardOpen = (isExpanded: boolean) => { if (!isExpanded) { - setLeaderboardDropdownData(undefined); + setSelectedMode(modes[0]); + setDropdownData(undefined); } else { setLoading(true); } @@ -137,7 +142,7 @@ export default function Score({ leaderboard, beatSaverMap, score, settings }: Pr - {isLeaderboardExpanded && leaderboardDropdownData && !loading && ( + {isLeaderboardExpanded && dropdownData && !loading && ( )}