"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, useSearchParams } from "next/navigation"; import { useCallback, useEffect, useState } from "react"; import Card from "./Card"; import Container from "./Container"; import CountyFlag from "./CountryFlag"; import Pagination from "./Pagination"; import Spinner from "./Spinner"; import PlayerRanking from "./player/PlayerRanking"; import PlayerRankingMobile from "./player/PlayerRankingMobile"; import { Separator } from "./ui/separator"; 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 searchQuery = useSearchParams(); const isMobile = searchQuery.get("mobile") == "true"; 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) => { const windowSize = document.documentElement.clientWidth; if (windowSize < 768 && !isMobile) { router.push(`/ranking/global/${page}?mobile=true`); router.refresh(); return; } 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, }); window.history.pushState( {}, "", country ? `/ranking/country/${country}/${page}` : `/ranking/global/${page}`, ); }); }, [country, isMobile, 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"}

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