This commit is contained in:
parent
26c097d29f
commit
84c25cafd4
@ -1,183 +1,14 @@
|
||||
"use client";
|
||||
|
||||
import Card from "@/components/Card";
|
||||
import Container from "@/components/Container";
|
||||
import Error from "@/components/Error";
|
||||
import Pagination from "@/components/Pagination";
|
||||
import { Spinner } from "@/components/Spinner";
|
||||
import PlayerRanking from "@/components/player/PlayerRanking";
|
||||
import PlayerRankingMobile from "@/components/player/PlayerRankingMobile";
|
||||
import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
|
||||
import { ScoreSaberAPI } from "@/utils/scoresaber/api";
|
||||
import { normalizedRegionName } from "@/utils/utils";
|
||||
import Link from "next/link";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import ReactCountryFlag from "react-country-flag";
|
||||
|
||||
type PageInfo = {
|
||||
loading: boolean;
|
||||
page: number;
|
||||
totalPages: number;
|
||||
players: ScoresaberPlayer[];
|
||||
};
|
||||
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 searchParams = useSearchParams();
|
||||
const router = useRouter();
|
||||
|
||||
const page = getPageFromSearchQuery(headers());
|
||||
const country = params.country;
|
||||
|
||||
let page;
|
||||
const pageString = searchParams.get("page");
|
||||
if (pageString == null) {
|
||||
page = 1;
|
||||
} else {
|
||||
page = Number.parseInt(pageString) || 1;
|
||||
}
|
||||
|
||||
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,
|
||||
});
|
||||
if (page > 1) {
|
||||
router.push(`/ranking/country/${country}?page=${page}`, {
|
||||
scroll: false,
|
||||
});
|
||||
} else {
|
||||
router.push(`/ranking/country/${country}`, {
|
||||
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">
|
||||
<ReactCountryFlag
|
||||
countryCode={country}
|
||||
svg
|
||||
className="!h-8 !w-8"
|
||||
/>
|
||||
<p>
|
||||
You are viewing scores from {normalizedRegionName(country)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<table className="hidden w-full table-auto border-spacing-2 border-none text-left md:table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="px-4 py-2">Rank</th>
|
||||
<th className="px-4 py-2">Profile</th>
|
||||
<th className="px-4 py-2">Performance Points</th>
|
||||
<th className="px-4 py-2">Total Plays</th>
|
||||
<th className="px-4 py-2">Total Ranked Plays</th>
|
||||
<th className="px-4 py-2">Avg Ranked Accuracy</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="border-none">
|
||||
{players.map((player) => (
|
||||
<tr key={player.rank} className="border-b border-gray-700">
|
||||
<PlayerRanking showCountryFlag={false} player={player} />
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div className="flex flex-col gap-2 md:hidden">
|
||||
{players.map((player) => (
|
||||
<div
|
||||
key={player.rank}
|
||||
className="flex flex-col gap-2 rounded-md bg-gray-700 hover:bg-gray-600"
|
||||
>
|
||||
<Link href={`/player/${player.id}`}>
|
||||
<PlayerRankingMobile player={player} />
|
||||
</Link>
|
||||
</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={pageInfo.page}
|
||||
totalPages={pageInfo.totalPages}
|
||||
onPageChange={(page) => {
|
||||
updatePage(page);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</Container>
|
||||
</main>
|
||||
);
|
||||
return <GlobalRanking page={page} country={country} />;
|
||||
}
|
||||
|
@ -1,169 +1,9 @@
|
||||
"use client";
|
||||
|
||||
import Card from "@/components/Card";
|
||||
import Container from "@/components/Container";
|
||||
import Error from "@/components/Error";
|
||||
import Pagination from "@/components/Pagination";
|
||||
import { Spinner } from "@/components/Spinner";
|
||||
import PlayerRanking from "@/components/player/PlayerRanking";
|
||||
import PlayerRankingMobile from "@/components/player/PlayerRankingMobile";
|
||||
import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
|
||||
import { ScoreSaberAPI } from "@/utils/scoresaber/api";
|
||||
import { GlobeAsiaAustraliaIcon } from "@heroicons/react/20/solid";
|
||||
import Link from "next/link";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
|
||||
type PageInfo = {
|
||||
loading: boolean;
|
||||
page: number;
|
||||
totalPages: number;
|
||||
players: ScoresaberPlayer[];
|
||||
};
|
||||
import GlobalRanking from "@/components/player/GlobalRanking";
|
||||
import { getPageFromSearchQuery } from "@/utils/utils";
|
||||
import { headers } from "next/headers";
|
||||
|
||||
export default function RankingGlobal() {
|
||||
const searchParams = useSearchParams();
|
||||
const router = useRouter();
|
||||
const page = getPageFromSearchQuery(headers());
|
||||
|
||||
let page;
|
||||
const pageString = searchParams.get("page");
|
||||
if (pageString == null) {
|
||||
page = 1;
|
||||
} else {
|
||||
page = Number.parseInt(pageString) || 1;
|
||||
}
|
||||
|
||||
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).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,
|
||||
});
|
||||
if (page > 1) {
|
||||
router.push(`/ranking/global?page=${page}`, {
|
||||
scroll: false,
|
||||
});
|
||||
} else {
|
||||
router.push(`/ranking/global`, {
|
||||
scroll: false,
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
[pageInfo, router],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!pageInfo.loading || error) return;
|
||||
|
||||
updatePage(pageInfo.page);
|
||||
}, [error, 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">
|
||||
<GlobeAsiaAustraliaIcon width={32} height={32} />
|
||||
<p>You are viewing Global scores</p>
|
||||
</div>
|
||||
<table className="hidden w-full table-auto border-spacing-2 border-none text-left md:table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="px-4 py-2">Rank</th>
|
||||
<th className="px-4 py-2">Profile</th>
|
||||
<th className="px-4 py-2">Performance Points</th>
|
||||
<th className="px-4 py-2">Total Plays</th>
|
||||
<th className="px-4 py-2">Total Ranked Plays</th>
|
||||
<th className="px-4 py-2">Avg Ranked Accuracy</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="border-none">
|
||||
{players.map((player) => (
|
||||
<tr key={player.rank} className="border-b border-gray-700">
|
||||
<PlayerRanking player={player} />
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div className="flex flex-col gap-2 md:hidden">
|
||||
{players.map((player) => (
|
||||
<div
|
||||
key={player.rank}
|
||||
className="flex flex-col gap-2 rounded-md bg-gray-700 hover:bg-gray-600"
|
||||
>
|
||||
<Link href={`/player/${player.id}`}>
|
||||
<PlayerRankingMobile player={player} />
|
||||
</Link>
|
||||
</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={pageInfo.page}
|
||||
totalPages={pageInfo.totalPages}
|
||||
onPageChange={(page) => {
|
||||
updatePage(page);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</Container>
|
||||
</main>
|
||||
);
|
||||
return <GlobalRanking page={page} />;
|
||||
}
|
||||
|
184
src/components/player/GlobalRanking.tsx
Normal file
184
src/components/player/GlobalRanking.tsx
Normal file
@ -0,0 +1,184 @@
|
||||
"use client";
|
||||
|
||||
import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
|
||||
import { ScoreSaberAPI } from "@/utils/scoresaber/api";
|
||||
import { normalizedRegionName } from "@/utils/utils";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import ReactCountryFlag from "react-country-flag";
|
||||
import Card from "../Card";
|
||||
import Container from "../Container";
|
||||
import Error from "../Error";
|
||||
import Pagination from "../Pagination";
|
||||
import { Spinner } from "../Spinner";
|
||||
import PlayerRanking from "./PlayerRanking";
|
||||
import PlayerRankingMobile from "./PlayerRankingMobile";
|
||||
|
||||
type PageInfo = {
|
||||
loading: boolean;
|
||||
page: number;
|
||||
totalPages: number;
|
||||
players: ScoresaberPlayer[];
|
||||
};
|
||||
|
||||
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"
|
||||
/>
|
||||
)}
|
||||
<p>
|
||||
You are viewing{" "}
|
||||
{country
|
||||
? "scores from " + normalizedRegionName(country)
|
||||
: "Global scores"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<table className="hidden w-full table-auto border-spacing-2 border-none text-left md:table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="px-4 py-2">Rank</th>
|
||||
<th className="px-4 py-2">Profile</th>
|
||||
<th className="px-4 py-2">Performance Points</th>
|
||||
<th className="px-4 py-2">Total Plays</th>
|
||||
<th className="px-4 py-2">Total Ranked Plays</th>
|
||||
<th className="px-4 py-2">Avg Ranked Accuracy</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="border-none">
|
||||
{players.map((player) => (
|
||||
<tr key={player.rank} className="border-b border-gray-700">
|
||||
<PlayerRanking
|
||||
showCountryFlag={country ? false : true}
|
||||
player={player}
|
||||
/>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div className="flex flex-col gap-2 md:hidden">
|
||||
{players.map((player) => (
|
||||
<div
|
||||
key={player.rank}
|
||||
className="flex flex-col gap-2 rounded-md bg-gray-700 hover:bg-gray-600"
|
||||
>
|
||||
<Link href={`/player/${player.id}`}>
|
||||
<PlayerRankingMobile player={player} />
|
||||
</Link>
|
||||
</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={pageInfo.page}
|
||||
totalPages={pageInfo.totalPages}
|
||||
onPageChange={(page) => {
|
||||
updatePage(page);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</Container>
|
||||
</main>
|
||||
);
|
||||
}
|
@ -6,6 +6,15 @@ export function middleware(request: NextRequest) {
|
||||
if (request.nextUrl.pathname == "/") {
|
||||
return NextResponse.redirect(new URL("/search", request.url));
|
||||
}
|
||||
|
||||
const requestHeaders = new Headers(request.headers);
|
||||
requestHeaders.set("x-url", request.url);
|
||||
return NextResponse.next({
|
||||
request: {
|
||||
// New request headers
|
||||
headers: requestHeaders,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export const config = {
|
||||
|
@ -1,3 +1,5 @@
|
||||
import { ReadonlyHeaders } from "next/dist/server/web/spec-extension/adapters/headers";
|
||||
|
||||
let regionNames = new Intl.DisplayNames(["en"], { type: "region" });
|
||||
|
||||
export function isProduction() {
|
||||
@ -13,3 +15,31 @@ export function isProduction() {
|
||||
export function normalizedRegionName(region: string) {
|
||||
return regionNames.of(region);
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the page number from the search query
|
||||
*
|
||||
* @param query the query to get the page from
|
||||
* @param defaultPage the default page to return if the page is not found
|
||||
* @returns the page from the query
|
||||
*/
|
||||
export function getPageFromSearchQuery(
|
||||
headers: ReadonlyHeaders,
|
||||
defaultPage = 1,
|
||||
) {
|
||||
const url = new URL(headers.get("x-url")!);
|
||||
const searchParams = url.searchParams;
|
||||
|
||||
let page;
|
||||
const pageString = searchParams.get("page");
|
||||
if (pageString == null) {
|
||||
page = defaultPage;
|
||||
} else {
|
||||
page = Number.parseInt(pageString);
|
||||
}
|
||||
if (Number.isNaN(page)) {
|
||||
page = defaultPage;
|
||||
}
|
||||
|
||||
return page;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user