diff --git a/src/app/player/[id]/[sort]/[page]/page.tsx b/src/app/player/[id]/[sort]/[page]/page.tsx
index f4d8125..0458c24 100644
--- a/src/app/player/[id]/[sort]/[page]/page.tsx
+++ b/src/app/player/[id]/[sort]/[page]/page.tsx
@@ -69,15 +69,21 @@ export async function generateMetadata({
* @param id the player's id
* @returns the player's data
*/
-async function getData(id: string) {
- const response = await ScoreSaberAPI.fetchPlayerData(id);
+async function getData(id: string, page: number, sort: string) {
+ const playerData = await ScoreSaberAPI.fetchPlayerData(id);
+ const playerScores = await ScoreSaberAPI.fetchScores(id, page, sort, 10);
return {
- data: response,
+ playerData: playerData,
+ playerScores: playerScores,
};
}
export default async function Player({ params: { id, sort, page } }: Props) {
- const { data: player } = await getData(id);
+ const { playerData: player, playerScores } = await getData(
+ id,
+ Number(page),
+ sort,
+ );
if (!player) {
return (
@@ -130,7 +136,12 @@ export default async function Player({ params: { id, sort, page } }: Props) {
-
+
);
diff --git a/src/components/GlobalRanking.tsx b/src/components/GlobalRanking.tsx
index 86889ac..c8a5244 100644
--- a/src/components/GlobalRanking.tsx
+++ b/src/components/GlobalRanking.tsx
@@ -64,21 +64,6 @@ export default function GlobalRanking({
))}
- {/*
- {isMobile && (
-
- {players.map((player) => (
-
- ))}
-
- )} */}
{/* Pagination */}
diff --git a/src/components/player/PlayerRankingMobile.tsx b/src/components/player/PlayerRankingMobile.tsx
deleted file mode 100644
index 35c7ec8..0000000
--- a/src/components/player/PlayerRankingMobile.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
-import { useSettingsStore } from "@/store/settingsStore";
-import { formatNumber } from "@/utils/numberUtils";
-import { useStore } from "zustand";
-import Avatar from "../Avatar";
-import CountyFlag from "../CountryFlag";
-import Label from "../Label";
-
-type PlayerRankingProps = {
- player: ScoresaberPlayer;
- showCountryFlag?: boolean;
-};
-
-export default function PlayerRankingMobile({
- player,
- showCountryFlag = true,
-}: PlayerRankingProps) {
- const settingsStore = useStore(useSettingsStore, (store) => store);
-
- return (
-
-
-
-
#{formatNumber(player.rank)}
-
- {showCountryFlag && (
-
- )}
-
- {player.name}
-
-
-
-
-
-
- );
-}
diff --git a/src/components/player/Score.tsx b/src/components/player/Score.tsx
index 51ace2f..6a25f82 100644
--- a/src/components/player/Score.tsx
+++ b/src/components/player/Score.tsx
@@ -74,7 +74,7 @@ export default function Score({
className="h-fit min-w-[60px] rounded-md"
width={60}
height={60}
- loading="lazy"
+ priority
/>
import("@/components/Spinner"));
-
type PageInfo = {
- loading: boolean;
page: number;
totalPages: number;
sortType: SortType;
@@ -25,12 +20,18 @@ type PageInfo = {
};
type ScoresProps = {
+ initalScores: ScoresaberPlayerScore[] | undefined;
+ initalPage: number;
playerData: ScoresaberPlayer;
- page: number;
- sortType: SortType;
+ initalSortType: SortType;
};
-export default function Scores({ playerData, page, sortType }: ScoresProps) {
+export default function Scores({
+ initalScores,
+ playerData,
+ initalPage,
+ initalSortType,
+}: ScoresProps) {
const settingsStore = useStore(useSettingsStore, (store) => store);
const playerId = playerData.id;
@@ -39,28 +40,31 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
const [errorMessage, setErrorMessage] = useState("");
const [scores, setScores] = useState
({
- loading: true,
- page: page,
+ page: initalPage,
totalPages: 1,
- sortType: sortType,
- scores: [],
+ sortType: initalSortType,
+ scores: initalScores ? initalScores : [],
});
const updateScoresPage = useCallback(
(sortType: SortType, page: any) => {
+ if (page == initalPage && sortType == initalSortType && initalScores) {
+ console.log("Already loaded scores, not fetching");
+ return;
+ }
+
ScoreSaberAPI.fetchScores(playerId, page, sortType.value, 10).then(
(scoresResponse) => {
if (!scoresResponse) {
setError(true);
setErrorMessage("No Scores");
- setScores({ ...scores, loading: false });
+ setScores({ ...scores });
return;
}
setScores({
...scores,
scores: scoresResponse.scores,
totalPages: scoresResponse.pageInfo.totalPages,
- loading: false,
page: page,
sortType: sortType,
});
@@ -75,7 +79,7 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
},
);
},
- [playerId, scores, settingsStore],
+ [initalPage, initalScores, initalSortType, playerId, scores, settingsStore],
);
useEffect(() => {
@@ -100,13 +104,7 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
}
return (
-
+
{/* Sort */}
@@ -132,43 +130,33 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
- {scores.loading ? (
-
-
-
- ) : (
- <>
-
- {!scores.loading && scores.scores.length == 0 ? (
-
{errorMessage}
- ) : (
- scores.scores.map((scoreData, id) => {
- const { score, leaderboard } = scoreData;
+ <>
+
+ {scores.scores.map((scoreData, id) => {
+ const { score, leaderboard } = scoreData;
- return (
-
- );
- })
- )}
-
- {/* Pagination */}
-
-
{
- updateScoresPage(scores.sortType, page);
- }}
- />
-
- >
- )}
+ return (
+
+ );
+ })}
+
+ {/* Pagination */}
+
+
{
+ updateScoresPage(scores.sortType, page);
+ }}
+ />
+
+ >
);