fix(ssr): fix pagination being broken on inital player page load
All checks were successful
deploy / deploy (push) Successful in 1m44s

This commit is contained in:
Lee 2023-11-08 08:40:49 +00:00
parent 0a8878cdac
commit fb38ac69df
3 changed files with 9 additions and 10 deletions

@ -3,7 +3,7 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "next dev --turbo", "dev": "next dev",
"build": "next build", "build": "next build",
"generate-sitemap": "next-sitemap", "generate-sitemap": "next-sitemap",
"start": "next start", "start": "next start",

@ -1,6 +1,5 @@
import Card from "@/components/Card"; import Card from "@/components/Card";
import Container from "@/components/Container"; import Container from "@/components/Container";
import Spinner from "@/components/Spinner";
import PlayerChart from "@/components/player/PlayerChart"; import PlayerChart from "@/components/player/PlayerChart";
import PlayerInfo from "@/components/player/PlayerInfo"; import PlayerInfo from "@/components/player/PlayerInfo";
import Scores from "@/components/player/Scores"; import Scores from "@/components/player/Scores";
@ -17,7 +16,6 @@ import { normalizedRegionName } from "@/utils/utils";
import clsx from "clsx"; import clsx from "clsx";
import { Metadata } from "next"; import { Metadata } from "next";
import Image from "next/image"; import Image from "next/image";
import { Suspense } from "react";
const DEFAULT_SORT_TYPE = SortTypes.top; const DEFAULT_SORT_TYPE = SortTypes.top;
@ -131,16 +129,15 @@ export default async function Player({ params: { id, sort, page } }: Props) {
})} })}
</div> </div>
<div className="h-[320px] w-full"> <div className="h-[320px] w-full">
<Suspense fallback={<Spinner />}>
<PlayerChart scoresaber={player} /> <PlayerChart scoresaber={player} />
</Suspense>
</div> </div>
</Card> </Card>
<Scores <Scores
initalScores={playerScores?.scores} initalScores={playerScores?.scores}
initalPage={Number(page)} initalPage={Number(page)}
playerData={player}
initalSortType={sortType} initalSortType={sortType}
initalTotalPages={playerScores?.pageInfo.totalPages}
playerData={player}
/> />
</Container> </Container>
</main> </main>

@ -22,15 +22,17 @@ type PageInfo = {
type ScoresProps = { type ScoresProps = {
initalScores: ScoresaberPlayerScore[] | undefined; initalScores: ScoresaberPlayerScore[] | undefined;
initalPage: number; initalPage: number;
playerData: ScoresaberPlayer;
initalSortType: SortType; initalSortType: SortType;
initalTotalPages?: number;
playerData: ScoresaberPlayer;
}; };
export default function Scores({ export default function Scores({
initalScores, initalScores,
playerData,
initalPage, initalPage,
initalSortType, initalSortType,
initalTotalPages,
playerData,
}: ScoresProps) { }: ScoresProps) {
const settingsStore = useStore(useSettingsStore, (store) => store); const settingsStore = useStore(useSettingsStore, (store) => store);
const playerId = playerData.id; const playerId = playerData.id;
@ -41,7 +43,7 @@ export default function Scores({
const [scores, setScores] = useState<PageInfo>({ const [scores, setScores] = useState<PageInfo>({
page: initalPage, page: initalPage,
totalPages: 1, totalPages: initalTotalPages || 1,
sortType: initalSortType, sortType: initalSortType,
scores: initalScores ? initalScores : [], scores: initalScores ? initalScores : [],
}); });