revert to client sided data fetching
All checks were successful
deploy / deploy (push) Successful in 47s
All checks were successful
deploy / deploy (push) Successful in 47s
This commit is contained in:
parent
fe0be93d3e
commit
e77e07423a
@ -1,124 +0,0 @@
|
||||
import Card from "@/components/Card";
|
||||
import Container from "@/components/Container";
|
||||
import Error from "@/components/Error";
|
||||
import PlayerInfo from "@/components/player/PlayerInfo";
|
||||
import Scores from "@/components/player/Scores";
|
||||
import { ssrSettings } from "@/ssrSettings";
|
||||
import { SortTypes } from "@/types/SortTypes";
|
||||
import { formatNumber } from "@/utils/number";
|
||||
import { ScoreSaberAPI } from "@/utils/scoresaber/api";
|
||||
import { normalizedRegionName } from "@/utils/utils";
|
||||
import { Metadata } from "next";
|
||||
|
||||
type PlayerPageProps = {
|
||||
params: { id: string; leaderboard: string; sort: string; page: string };
|
||||
};
|
||||
|
||||
const DEFAULT_SORT_TYPE = SortTypes.top;
|
||||
|
||||
// Get data from API (server-sided)
|
||||
async function getData(playerId: string, sort?: string, page?: number) {
|
||||
const playerData = await ScoreSaberAPI.fetchPlayerData(playerId);
|
||||
if (!playerData) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const scores = [];
|
||||
let totalPages = -1;
|
||||
if (sort && page) {
|
||||
const scoresData = await ScoreSaberAPI.fetchScores(
|
||||
playerId,
|
||||
page,
|
||||
sort,
|
||||
10,
|
||||
);
|
||||
if (scoresData) {
|
||||
scores.push(...scoresData.scores);
|
||||
totalPages = scoresData.pageInfo.totalPages;
|
||||
}
|
||||
}
|
||||
|
||||
return { player: playerData, scores: scores, totalPages: totalPages };
|
||||
}
|
||||
|
||||
export async function generateMetadata({
|
||||
params: { id, leaderboard, sort, page },
|
||||
}: PlayerPageProps): Promise<Metadata> {
|
||||
const data = await getData(id, sort, Number(page));
|
||||
if (!data) {
|
||||
return {
|
||||
title: "Player not found",
|
||||
};
|
||||
}
|
||||
|
||||
const player = data.player;
|
||||
|
||||
const description = `
|
||||
View ${player.name}'s scores, top plays, and more.
|
||||
|
||||
Rank: #${formatNumber(player.rank)} (#${formatNumber(
|
||||
player.countryRank,
|
||||
)} - ${normalizedRegionName(player.country)})
|
||||
PP: ${formatNumber(player.pp)}
|
||||
Play Count: ${formatNumber(player.scoreStats.totalPlayCount)}`;
|
||||
|
||||
return {
|
||||
title: `${player.name}`,
|
||||
description: `View ${player.name}'s scores, top plays, and more.`,
|
||||
openGraph: {
|
||||
siteName: ssrSettings.siteName,
|
||||
title: `${player.name}`,
|
||||
description: description,
|
||||
images: [
|
||||
{
|
||||
url: player.profilePicture,
|
||||
},
|
||||
],
|
||||
},
|
||||
twitter: {
|
||||
card: "summary",
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default async function Player({
|
||||
params: { id, leaderboard, sort, page },
|
||||
}: PlayerPageProps) {
|
||||
const playerData = await getData(id, sort, Number(page));
|
||||
const currentPage = Number(page);
|
||||
const sortType = SortTypes[sort] || DEFAULT_SORT_TYPE;
|
||||
|
||||
if (!playerData) {
|
||||
return (
|
||||
<main>
|
||||
<Container>
|
||||
<Card className="mt-2">
|
||||
<Error errorMessage="Failed to load player. Is the ID valid?" />
|
||||
</Card>
|
||||
</Container>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
const player = playerData.player;
|
||||
const scores = playerData.scores;
|
||||
|
||||
return (
|
||||
<main>
|
||||
<Container>
|
||||
<Card className="mt-2">
|
||||
<PlayerInfo playerData={player} />
|
||||
</Card>
|
||||
<Card className="mt-2">
|
||||
<Scores
|
||||
playerData={player}
|
||||
page={currentPage}
|
||||
sortType={sortType}
|
||||
scores={scores}
|
||||
totalPages={playerData.totalPages}
|
||||
/>
|
||||
</Card>
|
||||
</Container>
|
||||
</main>
|
||||
);
|
||||
}
|
52
src/app/player/[id]/page.tsx
Normal file
52
src/app/player/[id]/page.tsx
Normal file
@ -0,0 +1,52 @@
|
||||
import PlayerPage from "@/components/player/PlayerPage";
|
||||
import { ssrSettings } from "@/ssrSettings";
|
||||
import { formatNumber } from "@/utils/number";
|
||||
import { ScoreSaberAPI } from "@/utils/scoresaber/api";
|
||||
import { normalizedRegionName } from "@/utils/utils";
|
||||
import { Metadata } from "next";
|
||||
|
||||
type Props = {
|
||||
params: { id: string };
|
||||
};
|
||||
|
||||
export async function generateMetadata({
|
||||
params: { id },
|
||||
}: Props): Promise<Metadata> {
|
||||
const player = await ScoreSaberAPI.fetchPlayerData(id);
|
||||
if (!player) {
|
||||
return {
|
||||
title: "Player not found",
|
||||
};
|
||||
}
|
||||
|
||||
const description = `
|
||||
View ${player.name}'s scores, top plays, and more.
|
||||
|
||||
Rank: #${formatNumber(player.rank)} (#${formatNumber(
|
||||
player.countryRank,
|
||||
)} - ${normalizedRegionName(player.country)})
|
||||
PP: ${formatNumber(player.pp)}
|
||||
Play Count: ${formatNumber(player.scoreStats.totalPlayCount)}`;
|
||||
|
||||
return {
|
||||
title: `${player.name}`,
|
||||
description: `View ${player.name}'s scores, top plays, and more.`,
|
||||
openGraph: {
|
||||
siteName: ssrSettings.siteName,
|
||||
title: `${player.name}`,
|
||||
description: description,
|
||||
images: [
|
||||
{
|
||||
url: player.profilePicture,
|
||||
},
|
||||
],
|
||||
},
|
||||
twitter: {
|
||||
card: "summary",
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default function Player({ params: { id } }: Props) {
|
||||
return <PlayerPage id={id} />;
|
||||
}
|
@ -1,44 +0,0 @@
|
||||
import Card from "@/components/Card";
|
||||
import Container from "@/components/Container";
|
||||
import Error from "@/components/Error";
|
||||
import GlobalRanking from "@/components/player/GlobalRanking";
|
||||
import { ScoreSaberAPI } from "@/utils/scoresaber/api";
|
||||
|
||||
type RankingGlobalProps = {
|
||||
params: { page: string; country: string };
|
||||
};
|
||||
|
||||
// Get data from API (server-sided)
|
||||
async function getData(page: number, country: string) {
|
||||
const pageData = await ScoreSaberAPI.fetchTopPlayers(page, country);
|
||||
if (!pageData) {
|
||||
return undefined;
|
||||
}
|
||||
return pageData;
|
||||
}
|
||||
|
||||
export default async function RankingGlobal({
|
||||
params: { page, country },
|
||||
}: RankingGlobalProps) {
|
||||
const pageData = await getData(Number(page), country);
|
||||
|
||||
return (
|
||||
<main>
|
||||
<Container>
|
||||
<Card className="mt-2">
|
||||
{pageData == undefined && (
|
||||
<Error errorMessage="Failed to load players. Is the page valid?" />
|
||||
)}
|
||||
{pageData && (
|
||||
<GlobalRanking
|
||||
page={Number(page)}
|
||||
players={pageData.players}
|
||||
totalPages={pageData.pageInfo.totalPages}
|
||||
country={country}
|
||||
/>
|
||||
)}
|
||||
</Card>
|
||||
</Container>
|
||||
</main>
|
||||
);
|
||||
}
|
14
src/app/ranking/country/[country]/page.tsx
Normal file
14
src/app/ranking/country/[country]/page.tsx
Normal file
@ -0,0 +1,14 @@
|
||||
import GlobalRanking from "@/components/player/GlobalRanking";
|
||||
import { getPageFromSearchQuery } from "@/utils/utils";
|
||||
import { headers } from "next/headers";
|
||||
|
||||
type RankingCountryProps = {
|
||||
params: { country: string };
|
||||
};
|
||||
|
||||
export default function RankingCountry({ params }: RankingCountryProps) {
|
||||
const page = getPageFromSearchQuery(headers());
|
||||
const country = params.country;
|
||||
|
||||
return <GlobalRanking page={page} country={country} />;
|
||||
}
|
@ -1,43 +0,0 @@
|
||||
import Card from "@/components/Card";
|
||||
import Container from "@/components/Container";
|
||||
import Error from "@/components/Error";
|
||||
import GlobalRanking from "@/components/player/GlobalRanking";
|
||||
import { ScoreSaberAPI } from "@/utils/scoresaber/api";
|
||||
|
||||
type RankingGlobalProps = {
|
||||
params: { page: string };
|
||||
};
|
||||
|
||||
// Get data from API (server-sided)
|
||||
async function getData(page: number) {
|
||||
const pageData = await ScoreSaberAPI.fetchTopPlayers(page);
|
||||
if (!pageData || pageData.players.length == 0) {
|
||||
return undefined;
|
||||
}
|
||||
return pageData;
|
||||
}
|
||||
|
||||
export default async function RankingGlobal({
|
||||
params: { page },
|
||||
}: RankingGlobalProps) {
|
||||
const pageData = await getData(Number(page));
|
||||
|
||||
return (
|
||||
<main>
|
||||
<Container>
|
||||
<Card className="mt-2">
|
||||
{pageData == undefined && (
|
||||
<Error errorMessage="Failed to load players. Is the page valid?" />
|
||||
)}
|
||||
{pageData && (
|
||||
<GlobalRanking
|
||||
page={Number(page)}
|
||||
players={pageData.players}
|
||||
totalPages={pageData.pageInfo.totalPages}
|
||||
/>
|
||||
)}
|
||||
</Card>
|
||||
</Container>
|
||||
</main>
|
||||
);
|
||||
}
|
9
src/app/ranking/global/page.tsx
Normal file
9
src/app/ranking/global/page.tsx
Normal file
@ -0,0 +1,9 @@
|
||||
import GlobalRanking from "@/components/player/GlobalRanking";
|
||||
import { getPageFromSearchQuery } from "@/utils/utils";
|
||||
import { headers } from "next/headers";
|
||||
|
||||
export default function RankingGlobal() {
|
||||
const page = getPageFromSearchQuery(headers());
|
||||
|
||||
return <GlobalRanking page={page} />;
|
||||
}
|
@ -43,23 +43,20 @@ function NavbarButton({ text, icon, href, children }: ButtonProps) {
|
||||
export default function Navbar() {
|
||||
const settingsStore = useStore(useSettingsStore, (state) => state);
|
||||
|
||||
const player = settingsStore?.player;
|
||||
const lastUsedSortType = settingsStore?.lastUsedSortType.value;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex h-fit w-full rounded-md bg-gray-800">
|
||||
{settingsStore !== undefined && player && (
|
||||
{settingsStore !== undefined && settingsStore.player && (
|
||||
<NavbarButton
|
||||
text="You"
|
||||
icon={
|
||||
<Avatar
|
||||
url={player.profilePicture}
|
||||
url={settingsStore.player.profilePicture}
|
||||
label="Your avatar"
|
||||
size={32}
|
||||
/>
|
||||
}
|
||||
href={`/player/${player?.id}/scoresaber/${lastUsedSortType}/1`}
|
||||
href={`/player/${settingsStore.player.id}`}
|
||||
/>
|
||||
)}
|
||||
|
||||
@ -73,7 +70,7 @@ export default function Navbar() {
|
||||
key={friend.id}
|
||||
className="mt-2 bg-gray-500"
|
||||
text={friend.name}
|
||||
url={`/player/${friend.id}/scoresaber/${lastUsedSortType}/1`}
|
||||
url={`/player/${friend.id}`}
|
||||
icon={
|
||||
<Avatar
|
||||
url={friend.profilePicture}
|
||||
|
@ -1,37 +1,125 @@
|
||||
"use client";
|
||||
|
||||
import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
|
||||
import { ScoreSaberAPI } from "@/utils/scoresaber/api";
|
||||
import { normalizedRegionName } from "@/utils/utils";
|
||||
import dynamic from "next/dynamic";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import Card from "../Card";
|
||||
import Container from "../Container";
|
||||
import Pagination from "../Pagination";
|
||||
import Spinner from "../Spinner";
|
||||
import PlayerRanking from "./PlayerRanking";
|
||||
import PlayerRankingMobile from "./PlayerRankingMobile";
|
||||
|
||||
const ReactCountryFlag = dynamic(() => import("react-country-flag"));
|
||||
const Error = dynamic(() => import("@/components/Error"));
|
||||
|
||||
type GlobalRankingProps = {
|
||||
type PageInfo = {
|
||||
loading: boolean;
|
||||
page: number;
|
||||
totalPages: number;
|
||||
country?: string;
|
||||
players: ScoresaberPlayer[];
|
||||
};
|
||||
|
||||
export default function GlobalRanking({
|
||||
page,
|
||||
totalPages,
|
||||
country,
|
||||
players,
|
||||
}: GlobalRankingProps) {
|
||||
type GlobalRankingProps = {
|
||||
page: number;
|
||||
country?: string;
|
||||
};
|
||||
|
||||
export default function GlobalRanking({ page, country }: GlobalRankingProps) {
|
||||
const router = useRouter();
|
||||
|
||||
const [error, setError] = useState(false);
|
||||
const [errorMessage, setErrorMessage] = useState("");
|
||||
|
||||
const [pageInfo, setPageInfo] = useState<PageInfo>({
|
||||
loading: true,
|
||||
page: page,
|
||||
totalPages: 1,
|
||||
players: [],
|
||||
});
|
||||
|
||||
const updatePage = useCallback(
|
||||
(page: any) => {
|
||||
console.log("Switching page to", page);
|
||||
ScoreSaberAPI.fetchTopPlayers(page, country).then((response) => {
|
||||
if (!response) {
|
||||
setError(true);
|
||||
setErrorMessage("No players found");
|
||||
setPageInfo({ ...pageInfo, loading: false });
|
||||
return;
|
||||
}
|
||||
setPageInfo({
|
||||
...pageInfo,
|
||||
players: response.players,
|
||||
totalPages: response.pageInfo.totalPages,
|
||||
loading: false,
|
||||
page: page,
|
||||
});
|
||||
const urlBase = country
|
||||
? `/ranking/country/${country}`
|
||||
: "/ranking/global";
|
||||
if (page > 1) {
|
||||
router.push(`${urlBase}?page=${page}`, {
|
||||
scroll: false,
|
||||
});
|
||||
} else {
|
||||
router.push(`${urlBase}`, {
|
||||
scroll: false,
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
[country, pageInfo, router],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!pageInfo.loading || error) return;
|
||||
|
||||
updatePage(pageInfo.page);
|
||||
}, [error, country, updatePage, pageInfo.page, pageInfo.loading]);
|
||||
|
||||
if (pageInfo.loading || error) {
|
||||
return (
|
||||
<>
|
||||
<main>
|
||||
<Container>
|
||||
<Card className="mt-2">
|
||||
<div className="p-3 text-center">
|
||||
<div role="status">
|
||||
<div className="flex flex-col items-center justify-center gap-2">
|
||||
{error && <Error errorMessage={errorMessage} />}
|
||||
{!error && <Spinner />}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Container>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
const players = pageInfo.players;
|
||||
|
||||
return (
|
||||
<main>
|
||||
<Container>
|
||||
<Card className="mt-2">
|
||||
{pageInfo.loading ? (
|
||||
<div className="flex justify-center">
|
||||
<Spinner />
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex items-center gap-2 rounded-md bg-gray-700 p-2">
|
||||
{country && (
|
||||
<ReactCountryFlag countryCode={country} svg className="!h-8 !w-8" />
|
||||
<ReactCountryFlag
|
||||
countryCode={country}
|
||||
svg
|
||||
className="!h-8 !w-8"
|
||||
/>
|
||||
)}
|
||||
<p>
|
||||
You are viewing{" "}
|
||||
@ -81,20 +169,18 @@ export default function GlobalRanking({
|
||||
<div className="flex w-full flex-row justify-center rounded-md bg-gray-800 md:flex-col">
|
||||
<div className="p-3">
|
||||
<Pagination
|
||||
currentPage={page}
|
||||
totalPages={totalPages}
|
||||
currentPage={pageInfo.page}
|
||||
totalPages={pageInfo.totalPages}
|
||||
onPageChange={(page) => {
|
||||
const urlBase = country
|
||||
? `/ranking/country/${country}`
|
||||
: `/ranking/global`;
|
||||
router.push(`${urlBase}/${page}`, {
|
||||
scroll: false,
|
||||
});
|
||||
updatePage(page);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Card>
|
||||
</Container>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
@ -1,5 +1,3 @@
|
||||
"use client";
|
||||
|
||||
import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
|
||||
import { useScoresaberScoresStore } from "@/store/scoresaberScoresStore";
|
||||
import { useSettingsStore } from "@/store/settingsStore";
|
||||
@ -8,6 +6,7 @@ import {
|
||||
calcPpBoundary,
|
||||
getAveragePp,
|
||||
getHighestPpPlay,
|
||||
getTotalScores,
|
||||
} from "@/utils/scoresaber/scores";
|
||||
import {
|
||||
GlobeAsiaAustraliaIcon,
|
||||
@ -20,6 +19,7 @@ import { useRef } from "react";
|
||||
import { toast } from "react-toastify";
|
||||
import { useStore } from "zustand";
|
||||
import Avatar from "../Avatar";
|
||||
import Card from "../Card";
|
||||
import Label from "../Label";
|
||||
|
||||
const PlayerChart = dynamic(() => import("./PlayerChart"));
|
||||
@ -96,6 +96,10 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
console.log(
|
||||
`Fetching scores for ${playerId} (${page}/${totalPages})`,
|
||||
);
|
||||
},
|
||||
);
|
||||
if (reponse?.error) {
|
||||
@ -109,6 +113,8 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
|
||||
const isOwnProfile = settingsStore.player?.id == playerId;
|
||||
|
||||
return (
|
||||
<Card className="mt-2">
|
||||
{/* Player Info */}
|
||||
<div className="flex flex-col items-center gap-3 md:flex-row md:items-start">
|
||||
<div className="min-w-fit">
|
||||
{/* Avatar */}
|
||||
@ -161,7 +167,9 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
|
||||
|
||||
<a
|
||||
className="flex transform-gpu items-center gap-1 transition-all hover:text-blue-500"
|
||||
href={`/ranking/global/${Math.ceil(playerData.rank / 50)}`}
|
||||
href={`/ranking/global/?page=${Math.round(
|
||||
playerData.rank / 50,
|
||||
)}`}
|
||||
>
|
||||
<p>#{formatNumber(playerData.rank)}</p>
|
||||
</a>
|
||||
@ -171,7 +179,7 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
|
||||
<div className="text-gray-300">
|
||||
<a
|
||||
className="flex transform-gpu items-center gap-1 transition-all hover:text-blue-500"
|
||||
href={`/ranking/country/${playerData.country}/${Math.ceil(
|
||||
href={`/ranking/country/${playerData.country}?page=${Math.round(
|
||||
playerData.countryRank / 50,
|
||||
)}`}
|
||||
>
|
||||
@ -207,7 +215,9 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
|
||||
title="Avg ranked acc"
|
||||
className="bg-blue-500"
|
||||
hoverValue="Average accuracy of all your ranked plays"
|
||||
value={`${playerData.scoreStats.averageRankedAccuracy.toFixed(2)}%`}
|
||||
value={`${playerData.scoreStats.averageRankedAccuracy.toFixed(
|
||||
2,
|
||||
)}%`}
|
||||
/>
|
||||
|
||||
{hasLocalScores && (
|
||||
@ -224,7 +234,9 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
|
||||
title="Avg PP"
|
||||
className="bg-[#8992e8]"
|
||||
hoverValue="Average amount of pp per play (best 20 scores)"
|
||||
value={`${formatNumber(getAveragePp(playerId)?.toFixed(2))}pp`}
|
||||
value={`${formatNumber(
|
||||
getAveragePp(playerId)?.toFixed(2),
|
||||
)}pp`}
|
||||
/>
|
||||
<Label
|
||||
title="+ 1pp"
|
||||
@ -242,5 +254,6 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
|
||||
<PlayerChart scoresaber={playerData} />
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
109
src/components/player/PlayerPage.tsx
Normal file
109
src/components/player/PlayerPage.tsx
Normal file
@ -0,0 +1,109 @@
|
||||
"use client";
|
||||
|
||||
import Card from "@/components/Card";
|
||||
import Container from "@/components/Container";
|
||||
import Spinner from "@/components/Spinner";
|
||||
import Scores from "@/components/player/Scores";
|
||||
import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
|
||||
import { useSettingsStore } from "@/store/settingsStore";
|
||||
import { SortType, SortTypes } from "@/types/SortTypes";
|
||||
import { ScoreSaberAPI } from "@/utils/scoresaber/api";
|
||||
import useStore from "@/utils/useStore";
|
||||
import dynamic from "next/dynamic";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import { useEffect, useState } from "react";
|
||||
import PlayerInfo from "./PlayerInfo";
|
||||
|
||||
const Error = dynamic(() => import("@/components/Error"));
|
||||
|
||||
type PlayerInfo = {
|
||||
loading: boolean;
|
||||
player: ScoresaberPlayer | undefined;
|
||||
};
|
||||
|
||||
type PlayerPageProps = {
|
||||
id: string;
|
||||
};
|
||||
|
||||
const DEFAULT_SORT_TYPE = SortTypes.top;
|
||||
|
||||
export default function PlayerPage({ id }: PlayerPageProps) {
|
||||
const settingsStore = useStore(useSettingsStore, (store) => store);
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [error, setError] = useState(false);
|
||||
const [errorMessage, setErrorMessage] = useState("");
|
||||
|
||||
const [player, setPlayer] = useState<PlayerInfo>({
|
||||
loading: true,
|
||||
player: undefined,
|
||||
});
|
||||
|
||||
let page;
|
||||
const pageString = searchParams.get("page");
|
||||
if (pageString == null) {
|
||||
page = 1;
|
||||
} else {
|
||||
page = Number.parseInt(pageString) || 1;
|
||||
}
|
||||
|
||||
let sortType: SortType;
|
||||
const sortTypeString = searchParams.get("sort");
|
||||
if (sortTypeString == null) {
|
||||
sortType = settingsStore?.lastUsedSortType || DEFAULT_SORT_TYPE;
|
||||
} else {
|
||||
sortType = SortTypes[sortTypeString] || DEFAULT_SORT_TYPE;
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
if (error || !player.loading) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (mounted == true) {
|
||||
return;
|
||||
}
|
||||
|
||||
ScoreSaberAPI.fetchPlayerData(id).then((playerResponse) => {
|
||||
if (!playerResponse) {
|
||||
setError(true);
|
||||
setErrorMessage("Failed to fetch player. Is the ID correct?");
|
||||
setPlayer({ ...player, loading: false });
|
||||
return;
|
||||
}
|
||||
setPlayer({ ...player, player: playerResponse, loading: false });
|
||||
});
|
||||
}, [error, mounted, id, player]);
|
||||
|
||||
if (player.loading || error || !player.player) {
|
||||
return (
|
||||
<main>
|
||||
<Container>
|
||||
<Card className="mt-2">
|
||||
<div className="p-3 text-center">
|
||||
<div role="status">
|
||||
<div className="flex flex-col items-center justify-center gap-2">
|
||||
{error && <Error errorMessage={errorMessage} />}
|
||||
{!error && <Spinner />}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Container>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
const playerData = player.player;
|
||||
|
||||
return (
|
||||
<main>
|
||||
<Container>
|
||||
<PlayerInfo playerData={playerData} />
|
||||
<Scores playerData={playerData} page={page} sortType={sortType} />
|
||||
</Container>
|
||||
</main>
|
||||
);
|
||||
}
|
@ -1,5 +1,3 @@
|
||||
"use client";
|
||||
|
||||
import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
|
||||
import { useSettingsStore } from "@/store/settingsStore";
|
||||
import { formatNumber } from "@/utils/number";
|
||||
|
@ -1,5 +1,3 @@
|
||||
"use client";
|
||||
|
||||
import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
|
||||
import { useSettingsStore } from "@/store/settingsStore";
|
||||
import { formatNumber } from "@/utils/number";
|
||||
@ -24,7 +22,7 @@ export default function PlayerRankingMobile({
|
||||
return (
|
||||
<div>
|
||||
<div className="m-3 flex flex-col gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="flex items-center gap-2">
|
||||
<p>#{formatNumber(player.rank)}</p>
|
||||
<Avatar url={player.profilePicture} label="Avatar" size={24} />
|
||||
{showCountryFlag && (
|
||||
@ -43,7 +41,7 @@ export default function PlayerRankingMobile({
|
||||
>
|
||||
{player.name}
|
||||
</p>
|
||||
</div>
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-2">
|
||||
<Label
|
||||
title="PP"
|
||||
|
@ -1,89 +1,149 @@
|
||||
"use client";
|
||||
|
||||
import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
|
||||
import { ScoresaberPlayerScore } from "@/schemas/scoresaber/playerScore";
|
||||
import { useSettingsStore } from "@/store/settingsStore";
|
||||
import { SortType, SortTypes } from "@/types/SortTypes";
|
||||
import { ScoreSaberAPI } from "@/utils/scoresaber/api";
|
||||
import useStore from "@/utils/useStore";
|
||||
import dynamic from "next/dynamic";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import Card from "../Card";
|
||||
import Error from "../Error";
|
||||
import Pagination from "../Pagination";
|
||||
import Score from "./Score";
|
||||
|
||||
type ScoresProps = {
|
||||
playerData: ScoresaberPlayer;
|
||||
const Spinner = dynamic(() => import("@/components/Spinner"));
|
||||
|
||||
type PageInfo = {
|
||||
loading: boolean;
|
||||
page: number;
|
||||
totalPages: number;
|
||||
sortType: SortType;
|
||||
scores: ScoresaberPlayerScore[];
|
||||
};
|
||||
|
||||
export default function Scores({
|
||||
playerData,
|
||||
page,
|
||||
totalPages,
|
||||
sortType,
|
||||
scores,
|
||||
}: ScoresProps) {
|
||||
type ScoresProps = {
|
||||
playerData: ScoresaberPlayer;
|
||||
page: number;
|
||||
sortType: SortType;
|
||||
};
|
||||
|
||||
export default function Scores({ playerData, page, sortType }: ScoresProps) {
|
||||
const settingsStore = useStore(useSettingsStore, (store) => store);
|
||||
const playerId = playerData.id;
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const lastUsedSortType = settingsStore?.lastUsedSortType;
|
||||
if (lastUsedSortType && lastUsedSortType != sortType) {
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [error, setError] = useState(false);
|
||||
const [errorMessage, setErrorMessage] = useState("");
|
||||
|
||||
const [scores, setScores] = useState<PageInfo>({
|
||||
loading: true,
|
||||
page: page,
|
||||
totalPages: 1,
|
||||
sortType: sortType,
|
||||
scores: [],
|
||||
});
|
||||
|
||||
const updateScoresPage = useCallback(
|
||||
(sortType: SortType, page: any) => {
|
||||
ScoreSaberAPI.fetchScores(playerId, page, sortType.value, 10).then(
|
||||
(scoresResponse) => {
|
||||
if (!scoresResponse) {
|
||||
setError(true);
|
||||
setErrorMessage("No Scores");
|
||||
setScores({ ...scores, loading: false });
|
||||
return;
|
||||
}
|
||||
setScores({
|
||||
...scores,
|
||||
scores: scoresResponse.scores,
|
||||
totalPages: scoresResponse.pageInfo.totalPages,
|
||||
loading: false,
|
||||
page: page,
|
||||
sortType: sortType,
|
||||
});
|
||||
settingsStore?.setLastUsedSortType(sortType);
|
||||
|
||||
if (page > 1) {
|
||||
router.push(
|
||||
`/player/${playerId}/scoresaber/${lastUsedSortType.value}/${page}`,
|
||||
`/player/${playerId}?page=${page}&sort=${sortType.value}`,
|
||||
{
|
||||
scroll: false,
|
||||
},
|
||||
);
|
||||
} else {
|
||||
router.push(`/player/${playerId}?sort=${sortType.value}`, {
|
||||
scroll: false,
|
||||
});
|
||||
}
|
||||
|
||||
function setPage(page: number, sortTypee?: SortType) {
|
||||
if (sortTypee) {
|
||||
if (sortTypee.value !== sortType.value) {
|
||||
settingsStore?.setLastUsedSortType(sortTypee);
|
||||
}
|
||||
}
|
||||
router.push(
|
||||
`/player/${playerId}/scoresaber/${
|
||||
sortTypee ? sortTypee.value : sortType.value
|
||||
}/${page}`,
|
||||
{
|
||||
scroll: false,
|
||||
console.log(`Switched page to ${page} with sort ${sortType.value}`);
|
||||
},
|
||||
);
|
||||
},
|
||||
[playerId, router, scores, settingsStore],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (mounted) return;
|
||||
setMounted(true);
|
||||
|
||||
updateScoresPage(scores.sortType, scores.page);
|
||||
}, [mounted, updateScoresPage, scores.sortType, scores.page]);
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<Card className="mt-2">
|
||||
<div className="p-3 text-center">
|
||||
<div role="status">
|
||||
<div className="flex flex-col items-center justify-center gap-2">
|
||||
{error && <Error errorMessage={errorMessage} />}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="w-full items-center md:flex-col">
|
||||
<Card className="mt-2 w-full items-center md:flex-col">
|
||||
{/* Sort */}
|
||||
<div className="w-full text-sm">
|
||||
<div className="m-2 w-full text-sm">
|
||||
<div className="flex justify-center gap-2">
|
||||
{Object.values(SortTypes).map((sortTypee) => {
|
||||
{Object.values(SortTypes).map((sortType) => {
|
||||
return (
|
||||
<button
|
||||
key={sortType.value}
|
||||
className={`flex transform-gpu flex-row items-center gap-1 rounded-md p-[0.35rem] transition-all hover:opacity-80 ${
|
||||
sortType.value === sortTypee.value
|
||||
scores.sortType.value === sortType.value
|
||||
? "bg-blue-500"
|
||||
: "bg-gray-500"
|
||||
}`}
|
||||
onClick={() => {
|
||||
setPage(1, sortTypee);
|
||||
updateScoresPage(sortType, 1);
|
||||
}}
|
||||
>
|
||||
{sortTypee.icon}
|
||||
<p>{sortTypee.name}</p>
|
||||
{sortType.icon}
|
||||
<p>{sortType.name}</p>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 grid grid-cols-1 divide-y divide-gray-500">
|
||||
{scores.map((scoreData, id) => {
|
||||
<div className="w-full p-1">
|
||||
{scores.loading ? (
|
||||
<div className="flex justify-center">
|
||||
<Spinner />
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 divide-y divide-gray-500">
|
||||
{!scores.loading && scores.scores.length == 0 ? (
|
||||
<p className="text-red-400">{errorMessage}</p>
|
||||
) : (
|
||||
scores.scores.map((scoreData, id) => {
|
||||
const { score, leaderboard } = scoreData;
|
||||
|
||||
return (
|
||||
@ -94,17 +154,20 @@ export default function Scores({
|
||||
leaderboard={leaderboard}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
<div className="flex w-full flex-row justify-center rounded-md bg-gray-800 md:flex-col">
|
||||
<div className="p-3">
|
||||
<Pagination
|
||||
currentPage={page}
|
||||
totalPages={totalPages}
|
||||
currentPage={scores.page}
|
||||
totalPages={scores.totalPages}
|
||||
onPageChange={(page) => {
|
||||
setPage(page);
|
||||
updateScoresPage(scores.sortType, page);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
@ -45,7 +45,7 @@ export default function SearchPlayer() {
|
||||
|
||||
// Take the user to the first account
|
||||
if (players.length > 0) {
|
||||
window.location.href = `/player/${players[0].id}/scoresaber/top/1`;
|
||||
window.location.href = `/player/${players[0].id}`;
|
||||
}
|
||||
}
|
||||
|
||||
@ -72,7 +72,7 @@ export default function SearchPlayer() {
|
||||
<a
|
||||
key={player.id}
|
||||
className="flex min-w-[14rem] items-center gap-2 rounded-md p-2 transition-all hover:bg-gray-600"
|
||||
href={`/player/${player.id}/scoresaber/top/1`}
|
||||
href={`/player/${player.id}`}
|
||||
>
|
||||
<Avatar label="Account" size={40} url={player.profilePicture} />
|
||||
|
||||
|
@ -22,7 +22,6 @@ export function middleware(request: NextRequest) {
|
||||
if (pathname == "/ranking/global") {
|
||||
return NextResponse.redirect(new URL("/ranking/global/1", request.url));
|
||||
}
|
||||
|
||||
const requestHeaders = new Headers(request.headers);
|
||||
requestHeaders.set("x-url", request.url);
|
||||
return NextResponse.next({
|
||||
|
Loading…
Reference in New Issue
Block a user