cleanup, added country page and added button to go to country page on player info

src/app/ranking/country/[country]/page.tsx

@@ -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>
+  );
+}

src/app/ranking/global/page.tsx

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

src/components/player/PlayerInfo.tsx

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

src/components/player/PlayerRanking.tsx

@@ -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>
+    </>
+  );
+}

src/utils/scoresaber/api.ts

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