feat(ssr): server load inital page of scores
All checks were successful
deploy / deploy (push) Successful in 1m13s

This commit is contained in:
Lee 2023-11-08 08:11:48 +00:00
parent 8e5aeadce0
commit 0a8878cdac
5 changed files with 63 additions and 133 deletions

@ -69,15 +69,21 @@ export async function generateMetadata({
* @param id the player's id * @param id the player's id
* @returns the player's data * @returns the player's data
*/ */
async function getData(id: string) { async function getData(id: string, page: number, sort: string) {
const response = await ScoreSaberAPI.fetchPlayerData(id); const playerData = await ScoreSaberAPI.fetchPlayerData(id);
const playerScores = await ScoreSaberAPI.fetchScores(id, page, sort, 10);
return { return {
data: response, playerData: playerData,
playerScores: playerScores,
}; };
} }
export default async function Player({ params: { id, sort, page } }: Props) { 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) { if (!player) {
return ( return (
<main> <main>
@ -130,7 +136,12 @@ export default async function Player({ params: { id, sort, page } }: Props) {
</Suspense> </Suspense>
</div> </div>
</Card> </Card>
<Scores playerData={player} page={Number(page)} sortType={sortType} /> <Scores
initalScores={playerScores?.scores}
initalPage={Number(page)}
playerData={player}
initalSortType={sortType}
/>
</Container> </Container>
</main> </main>
); );

@ -64,21 +64,6 @@ export default function GlobalRanking({
))} ))}
</tbody> </tbody>
</table> </table>
{/*
{isMobile && (
<div className="flex flex-col gap-2">
{players.map((player) => (
<div
key={player.rank}
className="flex flex-col gap-2 rounded-md bg-background"
>
<Link href={`/player/${player.id}/top/1`}>
<PlayerRankingMobile player={player} />
</Link>
</div>
))}
</div>
)} */}
{/* Pagination */} {/* Pagination */}
<div className="flex w-full flex-row justify-center"> <div className="flex w-full flex-row justify-center">

@ -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 (
<div>
<div className="m-3 flex flex-col gap-2">
<p className="flex items-center gap-2">
<p>#{formatNumber(player.rank)}</p>
<Avatar url={player.profilePicture} label="Avatar" size={24} />
{showCountryFlag && (
<CountyFlag countryCode={player.country} className="!h-5 !w-5" />
)}
<p
className={
player.id == settingsStore.player?.id
? "transform-gpu text-red-500 transition-all hover:text-blue-500"
: ""
}
>
{player.name}
</p>
</p>
<div className="flex flex-wrap justify-center gap-2">
<Label
title="PP"
tooltip={<p>The total amount of pp this player has</p>}
value={`${formatNumber(player.pp)}`}
/>
<Label
title="Total play count"
tooltip={<p>The total amount of plays this player has</p>}
value={formatNumber(player.scoreStats.totalPlayCount)}
/>
</div>
</div>
</div>
);
}

@ -74,7 +74,7 @@ export default function Score({
className="h-fit min-w-[60px] rounded-md" className="h-fit min-w-[60px] rounded-md"
width={60} width={60}
height={60} height={60}
loading="lazy" priority
/> />
<div <div
className="absolute mt-12 flex w-[55px] cursor-default items-center justify-center divide-x divide-y rounded-sm pl-[3px] pr-[3px] text-[0.8rem] opacity-90" className="absolute mt-12 flex w-[55px] cursor-default items-center justify-center divide-x divide-y rounded-sm pl-[3px] pr-[3px] text-[0.8rem] opacity-90"

@ -6,18 +6,13 @@ import { useSettingsStore } from "@/store/settingsStore";
import { SortType, SortTypes } from "@/types/SortTypes"; import { SortType, SortTypes } from "@/types/SortTypes";
import { ScoreSaberAPI } from "@/utils/scoresaber/api"; import { ScoreSaberAPI } from "@/utils/scoresaber/api";
import useStore from "@/utils/useStore"; import useStore from "@/utils/useStore";
import clsx from "clsx";
import dynamic from "next/dynamic";
import { useCallback, useEffect, useState } from "react"; import { useCallback, useEffect, useState } from "react";
import Card from "../Card"; import Card from "../Card";
import Error from "../Error"; import Error from "../Error";
import Pagination from "../Pagination"; import Pagination from "../Pagination";
import Score from "./Score"; import Score from "./Score";
const Spinner = dynamic(() => import("@/components/Spinner"));
type PageInfo = { type PageInfo = {
loading: boolean;
page: number; page: number;
totalPages: number; totalPages: number;
sortType: SortType; sortType: SortType;
@ -25,12 +20,18 @@ type PageInfo = {
}; };
type ScoresProps = { type ScoresProps = {
initalScores: ScoresaberPlayerScore[] | undefined;
initalPage: number;
playerData: ScoresaberPlayer; playerData: ScoresaberPlayer;
page: number; initalSortType: SortType;
sortType: 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 settingsStore = useStore(useSettingsStore, (store) => store);
const playerId = playerData.id; const playerId = playerData.id;
@ -39,28 +40,31 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
const [errorMessage, setErrorMessage] = useState(""); const [errorMessage, setErrorMessage] = useState("");
const [scores, setScores] = useState<PageInfo>({ const [scores, setScores] = useState<PageInfo>({
loading: true, page: initalPage,
page: page,
totalPages: 1, totalPages: 1,
sortType: sortType, sortType: initalSortType,
scores: [], scores: initalScores ? initalScores : [],
}); });
const updateScoresPage = useCallback( const updateScoresPage = useCallback(
(sortType: SortType, page: any) => { (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( ScoreSaberAPI.fetchScores(playerId, page, sortType.value, 10).then(
(scoresResponse) => { (scoresResponse) => {
if (!scoresResponse) { if (!scoresResponse) {
setError(true); setError(true);
setErrorMessage("No Scores"); setErrorMessage("No Scores");
setScores({ ...scores, loading: false }); setScores({ ...scores });
return; return;
} }
setScores({ setScores({
...scores, ...scores,
scores: scoresResponse.scores, scores: scoresResponse.scores,
totalPages: scoresResponse.pageInfo.totalPages, totalPages: scoresResponse.pageInfo.totalPages,
loading: false,
page: page, page: page,
sortType: sortType, sortType: sortType,
}); });
@ -75,7 +79,7 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
}, },
); );
}, },
[playerId, scores, settingsStore], [initalPage, initalScores, initalSortType, playerId, scores, settingsStore],
); );
useEffect(() => { useEffect(() => {
@ -100,13 +104,7 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
} }
return ( return (
<Card <Card outerClassName="mt-2" className="w-full items-center md:flex-col">
outerClassName="mt-2"
className={clsx(
"w-full items-center md:flex-col",
scores.loading && "min-h-[1050px]",
)}
>
{/* Sort */} {/* Sort */}
<div className="mb-2 mt-1 w-full text-sm"> <div className="mb-2 mt-1 w-full text-sm">
<div className="flex justify-center gap-2"> <div className="flex justify-center gap-2">
@ -132,17 +130,9 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
</div> </div>
<div className="flex h-full w-full flex-col items-center justify-center"> <div className="flex h-full w-full flex-col items-center justify-center">
{scores.loading ? (
<div className="mt-2">
<Spinner />
</div>
) : (
<> <>
<div className="grid min-w-full grid-cols-1 divide-y divide-border"> <div className="grid min-w-full grid-cols-1 divide-y divide-border">
{!scores.loading && scores.scores.length == 0 ? ( {scores.scores.map((scoreData, id) => {
<p className="text-red-400">{errorMessage}</p>
) : (
scores.scores.map((scoreData, id) => {
const { score, leaderboard } = scoreData; const { score, leaderboard } = scoreData;
return ( return (
@ -154,8 +144,7 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
ownProfile={settingsStore?.player} ownProfile={settingsStore?.player}
/> />
); );
}) })}
)}
</div> </div>
{/* Pagination */} {/* Pagination */}
<div className="pt-3"> <div className="pt-3">
@ -168,7 +157,6 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
/> />
</div> </div>
</> </>
)}
</div> </div>
</Card> </Card>
); );