cleanup, added country page and added button to go to country page on player info
All checks were successful
deploy / deploy (push) Successful in 58s

This commit is contained in:
Lee 2023-10-22 06:07:17 +01:00
parent 154eec2aac
commit 76c6ac6acd
5 changed files with 239 additions and 55 deletions

@ -0,0 +1,153 @@
"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 { ScoresaberPlayer } from "@/schemas/scoresaber/player";
import { fetchTopPlayers } from "@/utils/scoresaber/api";
import { useRouter, useSearchParams } from "next/navigation";
import { useCallback, useEffect, useState } from "react";
type PageInfo = {
loading: boolean;
page: number;
totalPages: number;
players: ScoresaberPlayer[];
};
export default function RankingCountry({
params,
}: {
params: { country: string };
}) {
const searchParams = useSearchParams();
const router = useRouter();
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);
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, params.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>
) : (
<table className="w-full table-auto border-spacing-2 border-none text-left">
<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>
)}
{/* 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>
</Card>
</Container>
</main>
);
}

@ -1,15 +1,13 @@
"use client"; "use client";
import Avatar from "@/components/Avatar";
import Card from "@/components/Card"; import Card from "@/components/Card";
import Container from "@/components/Container"; import Container from "@/components/Container";
import Error from "@/components/Error";
import Pagination from "@/components/Pagination"; import Pagination from "@/components/Pagination";
import { Spinner } from "@/components/Spinner"; import { Spinner } from "@/components/Spinner";
import PlayerRanking from "@/components/player/PlayerRanking";
import { ScoresaberPlayer } from "@/schemas/scoresaber/player"; import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
import { formatNumber } from "@/utils/number";
import { fetchTopPlayers } from "@/utils/scoresaber/api"; import { fetchTopPlayers } from "@/utils/scoresaber/api";
import Image from "next/image";
import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation"; import { useRouter, useSearchParams } from "next/navigation";
import { useCallback, useEffect, useState } from "react"; import { useCallback, useEffect, useState } from "react";
@ -20,7 +18,7 @@ type PageInfo = {
players: ScoresaberPlayer[]; players: ScoresaberPlayer[];
}; };
export default function Player({ params }: { params: { id: string } }) { export default function RankingGlobal() {
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const router = useRouter(); const router = useRouter();
@ -77,7 +75,7 @@ export default function Player({ params }: { params: { id: string } }) {
if (!pageInfo.loading || error) return; if (!pageInfo.loading || error) return;
updatePage(pageInfo.page); updatePage(pageInfo.page);
}, [error, params.id, updatePage, pageInfo.page, pageInfo.loading]); }, [error, updatePage, pageInfo.page, pageInfo.loading]);
if (pageInfo.loading || error) { if (pageInfo.loading || error) {
return ( return (
@ -86,20 +84,10 @@ export default function Player({ params }: { params: { id: string } }) {
<Card className="mt-2"> <Card className="mt-2">
<div className="p-3 text-center"> <div className="p-3 text-center">
<div role="status"> <div role="status">
{pageInfo.loading && <Spinner />} <div className="flex flex-col items-center justify-center gap-2">
{error && <Error errorMessage={errorMessage} />}
{error && ( {!error && <Spinner />}
<div className="flex flex-col items-center justify-center gap-2"> </div>
<p className="text-xl text-red-500">{errorMessage}</p>
<Image
alt="Sad cat"
src={"https://cdn.fascinated.cc/BxI9iJI9.jpg"}
width={200}
height={200}
/>
</div>
)}
</div> </div>
</div> </div>
</Card> </Card>
@ -133,30 +121,7 @@ export default function Player({ params }: { params: { id: string } }) {
<tbody className="border-none"> <tbody className="border-none">
{players.map((player) => ( {players.map((player) => (
<tr key={player.rank} className="border-b border-gray-700"> <tr key={player.rank} className="border-b border-gray-700">
<td className="px-4 py-2">#{formatNumber(player.rank)}</td> <PlayerRanking player={player} />
<td className="flex gap-2 px-4 py-2">
<Avatar
url={player.profilePicture}
label="Avatar"
size={24}
/>{" "}
<Link
className="transform-gpu transition-all hover:text-blue-500"
href={"/player/" + player.id}
>
<p>{player.name}</p>
</Link>
</td>
<td className="px-4 py-2">{formatNumber(player.pp)}pp</td>
<td className="px-4 py-2">
{formatNumber(player.scoreStats.totalPlayCount)}
</td>
<td className="px-4 py-2">
{formatNumber(player.scoreStats.rankedPlayCount)}
</td>
<td className="px-4 py-2">
{player.scoreStats.averageRankedAccuracy.toFixed(2) + "%"}
</td>
</tr> </tr>
))} ))}
</tbody> </tbody>

@ -136,13 +136,20 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
</div> </div>
{/* Country Rank */} {/* Country Rank */}
<div className="flex items-center gap-1 text-gray-300"> <div className="text-gray-300">
<ReactCountryFlag <a
countryCode={playerData.country} className="flex transform-gpu items-center gap-1 transition-all hover:text-blue-500"
svg href={`/ranking/country/${playerData.country}?page=${Math.round(
className="!h-7 !w-7" playerData.countryRank / 50,
/> )}`}
<p>#{playerData.countryRank}</p> >
<ReactCountryFlag
countryCode={playerData.country}
svg
className="!h-7 !w-7"
/>
<p>#{playerData.countryRank}</p>
</a>
</div> </div>
{/* PP */} {/* PP */}

@ -0,0 +1,53 @@
import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
import { useSettingsStore } from "@/store/settingsStore";
import { formatNumber } from "@/utils/number";
import Link from "next/link";
import ReactCountryFlag from "react-country-flag";
import { useStore } from "zustand";
import Avatar from "../Avatar";
type PlayerRankingProps = {
player: ScoresaberPlayer;
};
export default function PlayerRanking({ player }: PlayerRankingProps) {
const settingsStore = useStore(useSettingsStore, (store) => store);
return (
<>
<td className="px-4 py-2">#{formatNumber(player.rank)}</td>
<td className="flex items-center gap-2 px-4 py-2">
<Avatar url={player.profilePicture} label="Avatar" size={24} />
<ReactCountryFlag
countryCode={player.country}
svg
className="!h-5 !w-5"
/>
<Link
className="transform-gpu transition-all hover:text-blue-500"
href={"/player/" + player.id}
>
<p
className={
player.id == settingsStore?.userId
? "transform-gpu text-red-500 transition-all hover:text-blue-500"
: ""
}
>
{player.name}
</p>
</Link>
</td>
<td className="px-4 py-2">{formatNumber(player.pp)}pp</td>
<td className="px-4 py-2">
{formatNumber(player.scoreStats.totalPlayCount)}
</td>
<td className="px-4 py-2">
{formatNumber(player.scoreStats.rankedPlayCount)}
</td>
<td className="px-4 py-2">
{player.scoreStats.averageRankedAccuracy.toFixed(2) + "%"}
</td>
</>
);
}

@ -14,6 +14,7 @@ const PLAYER_SCORES =
API_URL + "/player/{}/scores?limit={}&sort={}&page={}&withMetadata=true"; API_URL + "/player/{}/scores?limit={}&sort={}&page={}&withMetadata=true";
const GET_PLAYER_DATA_FULL = API_URL + "/player/{}/full"; const GET_PLAYER_DATA_FULL = API_URL + "/player/{}/full";
const GET_PLAYERS_URL = API_URL + "/players?page={}"; const GET_PLAYERS_URL = API_URL + "/players?page={}";
const GET_PLAYERS_BY_COUNTRY_URL = API_URL + "/players?page={}&countries={}";
const SearchType = { const SearchType = {
RECENT: "recent", RECENT: "recent",
@ -160,9 +161,13 @@ export async function fetchAllScores(
* Get the top players * Get the top players
* *
* @param page the page to get the players from * @param page the page to get the players from
* @param country the country to get the players from
* @returns a list of players * @returns a list of players
*/ */
export async function fetchTopPlayers(page: number = 1): Promise< export async function fetchTopPlayers(
page: number = 1,
country?: string,
): Promise<
| { | {
players: ScoresaberPlayer[]; players: ScoresaberPlayer[];
pageInfo: { pageInfo: {
@ -173,9 +178,10 @@ export async function fetchTopPlayers(page: number = 1): Promise<
} }
| undefined | undefined
> { > {
const response = await fetchQueue.fetch( const url = country
formatString(GET_PLAYERS_URL, true, page), ? formatString(GET_PLAYERS_BY_COUNTRY_URL, true, page, country)
); : formatString(GET_PLAYERS_URL, true, page);
const response = await fetchQueue.fetch(url);
const json = await response.json(); const json = await response.json();
// Check if there was an error fetching the user data // Check if there was an error fetching the user data