Fascinated/scoresaber-reloaded-v2
1
2
Fork 0
Code Issues 1 Pull Requests 10 Actions Activity

fix(ssr): make the player page less jarring when initally loading
All checks were successful
deploy / deploy (push) Successful in 1m16s
Details

Browse Source
This commit is contained in:
Lee 2023-11-08 08:01:00 +00:00
parent c251239e45
commit 8e5aeadce0
4 changed files with 141 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
next.config.js
View File

@ -60,41 +60,41 @@ const nextConfig = {
},
};
// module.exports = withBundleAnalyzer(nextConfig);
module.exports = withBundleAnalyzer(nextConfig);
// // Injected content via Sentry wizard below
// Injected content via Sentry wizard below
// const { withSentryConfig } = require("@sentry/nextjs");
const { withSentryConfig } = require("@sentry/nextjs");
// module.exports = withSentryConfig(
// module.exports,
// {
// // For all available options, see:
// // https://github.com/getsentry/sentry-webpack-plugin#options
module.exports = withSentryConfig(
module.exports,
{
// For all available options, see:
// https://github.com/getsentry/sentry-webpack-plugin#options
// // Suppresses source map uploading logs during build
// silent: true,
// org: "sentry",
// project: "scoresaber-reloaded",
// url: "https://sentry.fascinated.cc/",
// },
// {
// // For all available options, see:
// // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
// Suppresses source map uploading logs during build
silent: true,
org: "sentry",
project: "scoresaber-reloaded",
url: "https://sentry.fascinated.cc/",
},
{
// For all available options, see:
// https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
// // Upload a larger set of source maps for prettier stack traces (increases build time)
// widenClientFileUpload: false,
// Upload a larger set of source maps for prettier stack traces (increases build time)
widenClientFileUpload: false,
// // Transpiles SDK to be compatible with IE11 (increases bundle size)
// transpileClientSDK: false,
// Transpiles SDK to be compatible with IE11 (increases bundle size)
transpileClientSDK: false,
// // Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load)
// tunnelRoute: "/monitoring",
// Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load)
tunnelRoute: "/monitoring",
// // Hides source maps from generated client bundles
// hideSourceMaps: true,
// Hides source maps from generated client bundles
hideSourceMaps: true,
// // Automatically tree-shake Sentry logger statements to reduce bundle size
// disableLogger: true,
// },
// );
// Automatically tree-shake Sentry logger statements to reduce bundle size
disableLogger: true,
},
);

77
src/app/player/[id]/[sort]/[page]/page.tsx
View File

@ -1,9 +1,25 @@
import PlayerPage from "@/components/player/PlayerPage";
import Card from "@/components/Card";
import Container from "@/components/Container";
import Spinner from "@/components/Spinner";
import PlayerChart from "@/components/player/PlayerChart";
import PlayerInfo from "@/components/player/PlayerInfo";
import Scores from "@/components/player/Scores";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/ui/Tooltip";
import ssrSettings from "@/ssrSettings.json";
import { SortTypes } from "@/types/SortTypes";
import { formatNumber } from "@/utils/numberUtils";
import { ScoreSaberAPI } from "@/utils/scoresaber/api";
import { normalizedRegionName } from "@/utils/utils";
import clsx from "clsx";
import { Metadata } from "next";
import Image from "next/image";
import { Suspense } from "react";
const DEFAULT_SORT_TYPE = SortTypes.top;
type Props = {
params: { id: string; sort: string; page: string };
@ -61,10 +77,61 @@ async function getData(id: string) {
}
export default async function Player({ params: { id, sort, page } }: Props) {
const { data } = await getData(id);
if (!data) {
return <div>Player not found</div>;
const { data: player } = await getData(id);
if (!player) {
return (
<main>
<Container>
<Card outerClassName="mt-2">
<h1 className="text-2xl font-bold">Player not found</h1>
</Card>
</Container>
</main>
);
}
return <PlayerPage player={data} sort={sort} page={page} />;
const sortType = SortTypes[sort] || DEFAULT_SORT_TYPE;
const badges = player.badges;
return (
<main>
<Container>
<PlayerInfo playerData={player} />
{/* Chart */}
<Card outerClassName="mt-2 min-h-[320px]">
{/* Badges */}
<div
className={clsx(
"mb-2 mt-2 flex flex-wrap items-center justify-center gap-2",
badges.length > 0 ? "block" : "hidden",
)}
>
{badges.map((badge) => {
return (
<Tooltip key={badge.image}>
<TooltipTrigger>
<Image
src={badge.image}
alt={badge.description}
width={80}
height={30}
/>
</TooltipTrigger>
<TooltipContent>
<p>{badge.description}</p>
</TooltipContent>
</Tooltip>
);
})}
</div>
<div className="h-[320px] w-full">
<Suspense fallback={<Spinner />}>
<PlayerChart scoresaber={player} />
</Suspense>
</div>
</Card>
<Scores playerData={player} page={Number(page)} sortType={sortType} />
</Container>
</main>
);
}

69
src/components/player/PlayerPage.tsx
View File

@ -1,69 +0,0 @@
import Card from "@/components/Card";
import Container from "@/components/Container";
import Scores from "@/components/player/Scores";
import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
import { SortTypes } from "@/types/SortTypes";
import clsx from "clsx";
import Image from "next/image";
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/Tooltip";
import PlayerChart from "./PlayerChart";
import PlayerInfo from "./PlayerInfo";
type PlayerInfo = {
loading: boolean;
player: ScoresaberPlayer | undefined;
};
type PlayerPageProps = {
player: ScoresaberPlayer;
sort: string;
page: string;
};
const DEFAULT_SORT_TYPE = SortTypes.top;
export default function PlayerPage({ player, sort, page }: PlayerPageProps) {
const sortType = SortTypes[sort] || DEFAULT_SORT_TYPE;
const badges = player.badges;
return (
<main>
<Container>
<PlayerInfo playerData={player} />
{/* Chart */}
<Card outerClassName="mt-2">
{/* Badges */}
<div
className={clsx(
"mb-2 mt-2 flex flex-wrap items-center justify-center gap-2",
badges.length > 0 ? "block" : "hidden",
)}
>
{badges.map((badge) => {
return (
<Tooltip key={badge.image}>
<TooltipTrigger>
<Image
src={badge.image}
alt={badge.description}
width={80}
height={30}
/>
</TooltipTrigger>
<TooltipContent>
<p>{badge.description}</p>
</TooltipContent>
</Tooltip>
);
})}
</div>
<div className="h-[320px] w-full">
<PlayerChart scoresaber={player} />
</div>
</Card>
<Scores playerData={player} page={Number(page)} sortType={sortType} />
</Container>
</main>
);
}

22
src/components/player/Scores.tsx
View File

@ -6,6 +6,7 @@ import { useSettingsStore } from "@/store/settingsStore";
import { SortType, SortTypes } from "@/types/SortTypes";
import { ScoreSaberAPI } from "@/utils/scoresaber/api";
import useStore from "@/utils/useStore";
import clsx from "clsx";
import dynamic from "next/dynamic";
import { useCallback, useEffect, useState } from "react";
import Card from "../Card";
@ -99,7 +100,13 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
}
return (
<Card outerClassName="mt-2" className="w-full items-center md:flex-col">
<Card
outerClassName="mt-2"
className={clsx(
"w-full items-center md:flex-col",
scores.loading && "min-h-[1050px]",
)}
>
{/* Sort */}
<div className="mb-2 mt-1 w-full text-sm">
<div className="flex justify-center gap-2">
@ -124,13 +131,14 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
</div>
</div>
<div className="w-full p-1">
<div className="flex h-full w-full flex-col items-center justify-center">
{scores.loading ? (
<div className="flex justify-center">
<div className="mt-2">
<Spinner />
</div>
) : (
<div className="grid 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 ? (
<p className="text-red-400">{errorMessage}</p>
) : (
@ -149,11 +157,7 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
})
)}
</div>
)}
</div>
{/* Pagination */}
<div>
<div className="pt-3">
<Pagination
currentPage={scores.page}
@ -163,6 +167,8 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
}}
/>
</div>
</>
)}
</div>
</Card>
);