69 lines
2.5 KiB
TypeScript
69 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import LeaderboardScores from "@/components/leaderboard/leaderboard-scores";
|
|
import { LeaderboardInfo } from "@/components/leaderboard/leaderboard-info";
|
|
import ScoreSaberScore from "@ssr/common/score/impl/scoresaber-score";
|
|
import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";
|
|
import { LeaderboardResponse } from "@ssr/common/response/leaderboard-response";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { useEffect, useState } from "react";
|
|
import { fetchLeaderboard } from "@ssr/common/utils/leaderboard.util";
|
|
import LeaderboardScoresResponse from "@ssr/common/response/leaderboard-scores-response";
|
|
import LeaderboardPpChart from "@/components/leaderboard/leaderboard-pp-chart";
|
|
import Card from "@/components/card";
|
|
|
|
type LeaderboardDataProps = {
|
|
/**
|
|
* The initial leaderboard data.
|
|
*/
|
|
initialLeaderboard: LeaderboardResponse<ScoreSaberLeaderboard>;
|
|
|
|
/**
|
|
* The initial score data.
|
|
*/
|
|
initialScores?: LeaderboardScoresResponse<ScoreSaberScore, ScoreSaberLeaderboard>;
|
|
|
|
/**
|
|
* The initial page.
|
|
*/
|
|
initialPage?: number;
|
|
};
|
|
|
|
export function LeaderboardData({ initialLeaderboard, initialScores, initialPage }: LeaderboardDataProps) {
|
|
const [currentLeaderboardId, setCurrentLeaderboardId] = useState(initialLeaderboard.leaderboard.id);
|
|
const [currentLeaderboard, setCurrentLeaderboard] = useState(initialLeaderboard);
|
|
|
|
const { data, isLoading, isError } = useQuery({
|
|
queryKey: ["leaderboard", currentLeaderboardId],
|
|
queryFn: async (): Promise<LeaderboardResponse<ScoreSaberLeaderboard> | undefined> => {
|
|
return fetchLeaderboard<ScoreSaberLeaderboard>("scoresaber", currentLeaderboardId + "");
|
|
},
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (data) {
|
|
setCurrentLeaderboard(data);
|
|
}
|
|
}, [data]);
|
|
|
|
const leaderboard = currentLeaderboard.leaderboard;
|
|
return (
|
|
<main className="flex flex-col-reverse xl:flex-row w-full gap-2">
|
|
<Card className="flex gap-2 w-full relative">
|
|
<LeaderboardScores
|
|
leaderboard={leaderboard}
|
|
initialScores={initialScores}
|
|
initialPage={initialPage}
|
|
leaderboardChanged={newId => setCurrentLeaderboardId(newId)}
|
|
showDifficulties
|
|
isLeaderboardPage
|
|
/>
|
|
</Card>
|
|
<div className="flex flex-col gap-2 w-full xl:w-[550px]">
|
|
<LeaderboardInfo leaderboard={leaderboard} beatSaverMap={currentLeaderboard.beatsaver} />
|
|
{leaderboard.stars > 0 && <LeaderboardPpChart leaderboard={leaderboard} />}
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|