some bug fixes and add the ranking page

projects/website/src/components/ranking/player-ranking.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { formatNumberWithCommas, formatPp } from "@/common/number-utils";
+import CountryFlag from "@/components/country-flag";
+import ScoreSaberPlayerToken from "@ssr/common/types/token/scoresaber/score-saber-player-token";
+import Link from "next/link";
+import useDatabase from "@/hooks/use-database";
+import { useLiveQuery } from "dexie-react-hooks";
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+
+type PlayerRankingProps = {
+  player: ScoreSaberPlayerToken;
+  isCountry: boolean;
+};
+
+export function PlayerRanking({ player, isCountry }: PlayerRankingProps) {
+  const database = useDatabase();
+  const settings = useLiveQuery(() => database.getSettings());
+
+  return (
+    <>
+      <td className="px-4 py-2">
+        #{formatNumberWithCommas(isCountry ? player.countryRank : player.rank)}{" "}
+        <span className="text-sm">{isCountry && "(#" + formatNumberWithCommas(player.rank) + ")"}</span>
+      </td>
+      <td className="flex items-center gap-2 px-4 py-2">
+        <Avatar className="w-[24px] h-[24px] pointer-events-none">
+          <AvatarImage
+            alt="Profile Picture"
+            src={`https://img.fascinated.cc/upload/w_128,h_128/${player.profilePicture}`}
+          />
+        </Avatar>
+        <CountryFlag code={player.country} size={14} />
+        <Link className="transform-gpu transition-all hover:text-blue-500" href={`/player/${player.id}/top/1`}>
+          <p
+            className={
+              player.id == settings?.playerId ? "transform-gpu text-pp transition-all hover:brightness-75" : ""
+            }
+          >
+            {player.name}
+          </p>
+        </Link>
+      </td>
+      <td className="px-4 py-2 text-pp-blue">{formatPp(player.pp)}pp</td>
+      <td className="px-4 py-2">{formatNumberWithCommas(player.scoreStats.totalPlayCount)}</td>
+      <td className="px-4 py-2">{formatNumberWithCommas(player.scoreStats.rankedPlayCount)}</td>
+      <td className="px-4 py-2">{player.scoreStats.averageRankedAccuracy.toFixed(2) + "%"}</td>
+    </>
+  );
+}

projects/website/src/components/ranking/ranking-data.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { useCallback, useEffect, useState } from "react";
+import { scoresaberService } from "@ssr/common/service/impl/scoresaber";
+import { ScoreSaberPlayersPageToken } from "@ssr/common/types/token/scoresaber/score-saber-players-page-token";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+import Pagination from "@/components/input/pagination";
+import { PlayerRanking } from "@/components/ranking/player-ranking";
+
+const REFRESH_INTERVAL = 1000 * 60 * 5;
+
+type RankingDataProps = {
+  /**
+   * The page to show when opening the leaderboard.
+   */
+  initialPage: number;
+
+  /**
+   * The country to show when opening the leaderboard.
+   */
+  country?: string | undefined;
+
+  /**
+   * The leaderboard to display.
+   */
+  initialPageData?: ScoreSaberPlayersPageToken;
+};
+
+export default function RankingData({ initialPage, country, initialPageData }: RankingDataProps) {
+  const isMobile = useIsMobile();
+
+  const [currentPage, setCurrentPage] = useState(initialPage);
+  const [rankingData, setRankingData] = useState<ScoreSaberPlayersPageToken | undefined>(initialPageData);
+
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ["rankingData", currentPage],
+    queryFn: async () => {
+      const players =
+        country == undefined
+          ? await scoresaberService.lookupPlayers(currentPage)
+          : await scoresaberService.lookupPlayersByCountry(currentPage, country);
+      return players && players.players.length > 0 ? players : undefined;
+    },
+    staleTime: REFRESH_INTERVAL,
+    refetchInterval: REFRESH_INTERVAL,
+    refetchIntervalInBackground: false,
+  });
+
+  useEffect(() => {
+    if (data && (!isLoading || !isError)) {
+      setRankingData(data);
+    }
+  }, [data, isLoading, isError]);
+
+  /**
+   * Gets the URL to the page.
+   */
+  const getUrl = useCallback(
+    (page: number) => {
+      return `/ranking/${country != undefined ? `${country}/` : ""}${page}`;
+    },
+    [country]
+  );
+
+  /**
+   * Handle updating the URL when the page number,
+   * sort, or search term changes.
+   */
+  useEffect(() => {
+    const newUrl = getUrl(currentPage);
+    window.history.replaceState({ ...window.history.state, as: newUrl, url: newUrl }, "", newUrl);
+  }, [currentPage, getUrl]);
+
+  if (!rankingData) {
+    return <p>Unknown page.</p>;
+  }
+
+  const { players, metadata } = rankingData;
+
+  return (
+    <div className="flex flex-col gap-2">
+      <table className="table 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-border">
+              <PlayerRanking isCountry={country != undefined} player={player} />
+            </tr>
+          ))}
+        </tbody>
+      </table>
+
+      {/* Pagination */}
+      <Pagination
+        mobilePagination={isMobile}
+        page={currentPage}
+        totalPages={Math.ceil(metadata.total / metadata.itemsPerPage)}
+        loadingPage={isLoading ? currentPage : undefined}
+        generatePageUrl={page => {
+          return getUrl(page);
+        }}
+        onPageChange={newPage => {
+          setCurrentPage(newPage);
+        }}
+      />
+    </div>
+  );
+}