"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 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({ 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 (
{error && } {!error && }
); } const players = pageInfo.players; return (
{pageInfo.loading ? (
) : (
{country && ( )}

You are viewing{" "} {country ? "scores from " + normalizedRegionName(country) : "Global scores"}

{players.map((player) => ( ))}
Rank Profile Performance Points Total Plays Total Ranked Plays Avg Ranked Accuracy
{players.map((player) => (
))}
{/* Pagination */}
{ updatePage(page); }} />
)}
); }