Fascinated/scoresaber-reloadedv3
Archived
1
1
Fork 0
Code Issues 1 Pull Requests 2 Actions Packages Activity

reset dropdown mode on dropdown close
Some checks failed
Deploy Website / docker (ubuntu-latest) (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Lee 2024-10-25 21:40:07 +01:00
parent 3abffec9cb
commit ff287222f7
1 changed files with 14 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
projects/website/src/components/score/score.tsx
View File

@ -38,7 +38,7 @@ type Props = {
}; };
}; };
type LeaderboardDropdownData = { type DropdownData = {
scores?: LeaderboardScoresResponse<ScoreSaberScore, ScoreSaberLeaderboard>; scores?: LeaderboardScoresResponse<ScoreSaberScore, ScoreSaberLeaderboard>;
scoreStats?: ScoreStatsToken; scoreStats?: ScoreStatsToken;
}; };
@ -57,13 +57,13 @@ export default function Score({ leaderboard, beatSaverMap, score, settings }: Pr
const [baseScore, setBaseScore] = useState(score.score); const [baseScore, setBaseScore] = useState(score.score);
const [isLeaderboardExpanded, setIsLeaderboardExpanded] = useState(false); const [isLeaderboardExpanded, setIsLeaderboardExpanded] = useState(false);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [leaderboardDropdownData, setLeaderboardDropdownData] = useState<LeaderboardDropdownData | undefined>(); const [dropdownData, setDropdownData] = useState<DropdownData | undefined>();
const [selectedMode, setSelectedMode] = useState<Mode>(modes[0]); const [selectedMode, setSelectedMode] = useState<Mode>(modes[0]);
const scoresPage = getPageFromRank(score.rank, 12); const scoresPage = getPageFromRank(score.rank, 12);
const isMobile = useIsMobile(); const isMobile = useIsMobile();
const { data, isLoading } = useQuery<LeaderboardDropdownData>({ const { data, isLoading } = useQuery<DropdownData>({
queryKey: [`leaderboardDropdownData:${leaderboard.id}`, leaderboard.id, score.scoreId, isLeaderboardExpanded], queryKey: [`leaderboardDropdownData:${leaderboard.id}`, leaderboard.id, score.scoreId, isLeaderboardExpanded],
queryFn: async () => { queryFn: async () => {
const scores = await fetchLeaderboardScores<ScoreSaberScore, ScoreSaberLeaderboard>( const scores = await fetchLeaderboardScores<ScoreSaberScore, ScoreSaberLeaderboard>(
@ -82,14 +82,18 @@ export default function Score({ leaderboard, beatSaverMap, score, settings }: Pr
useEffect(() => { useEffect(() => {
if (data) { if (data) {
setLeaderboardDropdownData(data); setDropdownData(data);
setLoading(false); setLoading(false);
} }
}, [data]); }, [data]);
useEffect(() => { useEffect(() => {
/**
* Reset the leaderboard dropdown when the score changes
*/
setIsLeaderboardExpanded(false); setIsLeaderboardExpanded(false);
setLeaderboardDropdownData(undefined); setDropdownData(undefined);
setSelectedMode(modes[0]);
}, [score.scoreId]); }, [score.scoreId]);
useEffect(() => { useEffect(() => {
@ -101,7 +105,8 @@ export default function Score({ leaderboard, beatSaverMap, score, settings }: Pr
const handleLeaderboardOpen = (isExpanded: boolean) => { const handleLeaderboardOpen = (isExpanded: boolean) => {
if (!isExpanded) { if (!isExpanded) {
setLeaderboardDropdownData(undefined); setSelectedMode(modes[0]);
setDropdownData(undefined);
} else { } else {
setLoading(true); setLoading(true);
} }
@ -137,7 +142,7 @@ export default function Score({ leaderboard, beatSaverMap, score, settings }: Pr
<ScoreStats score={{ ...score, accuracy, pp }} leaderboard={leaderboard} /> <ScoreStats score={{ ...score, accuracy, pp }} leaderboard={leaderboard} />
</div> </div>
{isLeaderboardExpanded && leaderboardDropdownData && !loading && ( {isLeaderboardExpanded && dropdownData && !loading && (
<motion.div <motion.div
initial={{ opacity: 0, y: -50 }} initial={{ opacity: 0, y: -50 }}
exit={{ opacity: 0, y: -50 }} exit={{ opacity: 0, y: -50 }}
@ -167,10 +172,10 @@ export default function Score({ leaderboard, beatSaverMap, score, settings }: Pr
{selectedMode.name === "Overview" && ( {selectedMode.name === "Overview" && (
<ScoreOverview <ScoreOverview
scores={leaderboardDropdownData.scores} scores={dropdownData.scores}
leaderboard={leaderboard} leaderboard={leaderboard}
initialPage={scoresPage} initialPage={scoresPage}
scoreStats={leaderboardDropdownData.scoreStats} scoreStats={dropdownData.scoreStats}
/> />
)} )}