revert to client sided data fetching

src/app/player/[id]/[leaderboard]/[sort]/[page]/page.tsx

@@ -1,124 +0,0 @@
-import Card from "@/components/Card";
-import Container from "@/components/Container";
-import Error from "@/components/Error";
-import PlayerInfo from "@/components/player/PlayerInfo";
-import Scores from "@/components/player/Scores";
-import { ssrSettings } from "@/ssrSettings";
-import { SortTypes } from "@/types/SortTypes";
-import { formatNumber } from "@/utils/number";
-import { ScoreSaberAPI } from "@/utils/scoresaber/api";
-import { normalizedRegionName } from "@/utils/utils";
-import { Metadata } from "next";
-
-type PlayerPageProps = {
-  params: { id: string; leaderboard: string; sort: string; page: string };
-};
-
-const DEFAULT_SORT_TYPE = SortTypes.top;
-
-// Get data from API (server-sided)
-async function getData(playerId: string, sort?: string, page?: number) {
-  const playerData = await ScoreSaberAPI.fetchPlayerData(playerId);
-  if (!playerData) {
-    return undefined;
-  }
-
-  const scores = [];
-  let totalPages = -1;
-  if (sort && page) {
-    const scoresData = await ScoreSaberAPI.fetchScores(
-      playerId,
-      page,
-      sort,
-      10,
-    );
-    if (scoresData) {
-      scores.push(...scoresData.scores);
-      totalPages = scoresData.pageInfo.totalPages;
-    }
-  }
-
-  return { player: playerData, scores: scores, totalPages: totalPages };
-}
-
-export async function generateMetadata({
-  params: { id, leaderboard, sort, page },
-}: PlayerPageProps): Promise<Metadata> {
-  const data = await getData(id, sort, Number(page));
-  if (!data) {
-    return {
-      title: "Player not found",
-    };
-  }
-
-  const player = data.player;
-
-  const description = `
-    View ${player.name}'s scores, top plays, and more.
-    
-    Rank: #${formatNumber(player.rank)} (#${formatNumber(
-      player.countryRank,
-    )} - ${normalizedRegionName(player.country)})
-    PP: ${formatNumber(player.pp)}
-    Play Count: ${formatNumber(player.scoreStats.totalPlayCount)}`;
-
-  return {
-    title: `${player.name}`,
-    description: `View ${player.name}'s scores, top plays, and more.`,
-    openGraph: {
-      siteName: ssrSettings.siteName,
-      title: `${player.name}`,
-      description: description,
-      images: [
-        {
-          url: player.profilePicture,
-        },
-      ],
-    },
-    twitter: {
-      card: "summary",
-    },
-  };
-}
-
-export default async function Player({
-  params: { id, leaderboard, sort, page },
-}: PlayerPageProps) {
-  const playerData = await getData(id, sort, Number(page));
-  const currentPage = Number(page);
-  const sortType = SortTypes[sort] || DEFAULT_SORT_TYPE;
-
-  if (!playerData) {
-    return (
-      <main>
-        <Container>
-          <Card className="mt-2">
-            <Error errorMessage="Failed to load player. Is the ID valid?" />
-          </Card>
-        </Container>
-      </main>
-    );
-  }
-
-  const player = playerData.player;
-  const scores = playerData.scores;
-
-  return (
-    <main>
-      <Container>
-        <Card className="mt-2">
-          <PlayerInfo playerData={player} />
-        </Card>
-        <Card className="mt-2">
-          <Scores
-            playerData={player}
-            page={currentPage}
-            sortType={sortType}
-            scores={scores}
-            totalPages={playerData.totalPages}
-          />
-        </Card>
-      </Container>
-    </main>
-  );
-}

src/app/player/[id]/page.tsx

@@ -0,0 +1,52 @@
+import PlayerPage from "@/components/player/PlayerPage";
+import { ssrSettings } from "@/ssrSettings";
+import { formatNumber } from "@/utils/number";
+import { ScoreSaberAPI } from "@/utils/scoresaber/api";
+import { normalizedRegionName } from "@/utils/utils";
+import { Metadata } from "next";
+
+type Props = {
+  params: { id: string };
+};
+
+export async function generateMetadata({
+  params: { id },
+}: Props): Promise<Metadata> {
+  const player = await ScoreSaberAPI.fetchPlayerData(id);
+  if (!player) {
+    return {
+      title: "Player not found",
+    };
+  }
+
+  const description = `
+    View ${player.name}'s scores, top plays, and more.
+    
+    Rank: #${formatNumber(player.rank)} (#${formatNumber(
+      player.countryRank,
+    )} - ${normalizedRegionName(player.country)})
+    PP: ${formatNumber(player.pp)}
+    Play Count: ${formatNumber(player.scoreStats.totalPlayCount)}`;
+
+  return {
+    title: `${player.name}`,
+    description: `View ${player.name}'s scores, top plays, and more.`,
+    openGraph: {
+      siteName: ssrSettings.siteName,
+      title: `${player.name}`,
+      description: description,
+      images: [
+        {
+          url: player.profilePicture,
+        },
+      ],
+    },
+    twitter: {
+      card: "summary",
+    },
+  };
+}
+
+export default function Player({ params: { id } }: Props) {
+  return <PlayerPage id={id} />;
+}

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

@@ -1,44 +0,0 @@
-import Card from "@/components/Card";
-import Container from "@/components/Container";
-import Error from "@/components/Error";
-import GlobalRanking from "@/components/player/GlobalRanking";
-import { ScoreSaberAPI } from "@/utils/scoresaber/api";
-
-type RankingGlobalProps = {
-  params: { page: string; country: string };
-};
-
-// Get data from API (server-sided)
-async function getData(page: number, country: string) {
-  const pageData = await ScoreSaberAPI.fetchTopPlayers(page, country);
-  if (!pageData) {
-    return undefined;
-  }
-  return pageData;
-}
-
-export default async function RankingGlobal({
-  params: { page, country },
-}: RankingGlobalProps) {
-  const pageData = await getData(Number(page), country);
-
-  return (
-    <main>
-      <Container>
-        <Card className="mt-2">
-          {pageData == undefined && (
-            <Error errorMessage="Failed to load players. Is the page valid?" />
-          )}
-          {pageData && (
-            <GlobalRanking
-              page={Number(page)}
-              players={pageData.players}
-              totalPages={pageData.pageInfo.totalPages}
-              country={country}
-            />
-          )}
-        </Card>
-      </Container>
-    </main>
-  );
-}

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

@@ -0,0 +1,14 @@
+import GlobalRanking from "@/components/player/GlobalRanking";
+import { getPageFromSearchQuery } from "@/utils/utils";
+import { headers } from "next/headers";
+
+type RankingCountryProps = {
+  params: { country: string };
+};
+
+export default function RankingCountry({ params }: RankingCountryProps) {
+  const page = getPageFromSearchQuery(headers());
+  const country = params.country;
+
+  return <GlobalRanking page={page} country={country} />;
+}

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

@@ -1,43 +0,0 @@
-import Card from "@/components/Card";
-import Container from "@/components/Container";
-import Error from "@/components/Error";
-import GlobalRanking from "@/components/player/GlobalRanking";
-import { ScoreSaberAPI } from "@/utils/scoresaber/api";
-
-type RankingGlobalProps = {
-  params: { page: string };
-};
-
-// Get data from API (server-sided)
-async function getData(page: number) {
-  const pageData = await ScoreSaberAPI.fetchTopPlayers(page);
-  if (!pageData || pageData.players.length == 0) {
-    return undefined;
-  }
-  return pageData;
-}
-
-export default async function RankingGlobal({
-  params: { page },
-}: RankingGlobalProps) {
-  const pageData = await getData(Number(page));
-
-  return (
-    <main>
-      <Container>
-        <Card className="mt-2">
-          {pageData == undefined && (
-            <Error errorMessage="Failed to load players. Is the page valid?" />
-          )}
-          {pageData && (
-            <GlobalRanking
-              page={Number(page)}
-              players={pageData.players}
-              totalPages={pageData.pageInfo.totalPages}
-            />
-          )}
-        </Card>
-      </Container>
-    </main>
-  );
-}

src/app/ranking/global/page.tsx

@@ -0,0 +1,9 @@
+import GlobalRanking from "@/components/player/GlobalRanking";
+import { getPageFromSearchQuery } from "@/utils/utils";
+import { headers } from "next/headers";
+
+export default function RankingGlobal() {
+  const page = getPageFromSearchQuery(headers());
+
+  return <GlobalRanking page={page} />;
+}

src/components/Navbar.tsx

@@ -43,23 +43,20 @@ function NavbarButton({ text, icon, href, children }: ButtonProps) {
 export default function Navbar() {
   const settingsStore = useStore(useSettingsStore, (state) => state);
 
-  const player = settingsStore?.player;
-  const lastUsedSortType = settingsStore?.lastUsedSortType.value;
-
   return (
     <>
       <div className="flex h-fit w-full rounded-md bg-gray-800">
-        {settingsStore !== undefined && player && (
+        {settingsStore !== undefined && settingsStore.player && (
           <NavbarButton
             text="You"
             icon={
               <Avatar
-                url={player.profilePicture}
+                url={settingsStore.player.profilePicture}
                 label="Your avatar"
                 size={32}
               />
             }
-            href={`/player/${player?.id}/scoresaber/${lastUsedSortType}/1`}
+            href={`/player/${settingsStore.player.id}`}
           />
         )}
 
@@ -73,7 +70,7 @@ export default function Navbar() {
                   key={friend.id}
                   className="mt-2 bg-gray-500"
                   text={friend.name}
-                  url={`/player/${friend.id}/scoresaber/${lastUsedSortType}/1`}
+                  url={`/player/${friend.id}`}
                   icon={
                     <Avatar
                       url={friend.profilePicture}

src/components/player/GlobalRanking.tsx

@@ -1,100 +1,186 @@
 "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 GlobalRankingProps = {
+type PageInfo = {
+  loading: boolean;
   page: number;
   totalPages: number;
-  country?: string;
   players: ScoresaberPlayer[];
 };
 
-export default function GlobalRanking({
-  page,
-  totalPages,
-  country,
-  players,
-}: GlobalRankingProps) {
+type GlobalRankingProps = {
+  page: number;
+  country?: string;
+};
+
+export default function GlobalRanking({ page, country }: GlobalRankingProps) {
   const router = useRouter();
 
-  return (
-    <>
-      <div className="flex flex-col gap-2">
-        <div className="flex items-center gap-2 rounded-md bg-gray-700 p-2">
-          {country && (
-            <ReactCountryFlag countryCode={country} svg className="!h-8 !w-8" />
-          )}
-          <p>
-            You are viewing{" "}
-            {country
-              ? "scores from " + normalizedRegionName(country)
-              : "Global scores"}
-          </p>
-        </div>
+  const [error, setError] = useState(false);
+  const [errorMessage, setErrorMessage] = useState("");
 
-        <table className="hidden w-full table-auto border-spacing-2 border-none text-left md:table">
-          <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
-                  showCountryFlag={country ? false : true}
-                  player={player}
-                />
-              </tr>
-            ))}
-          </tbody>
-        </table>
+  const [pageInfo, setPageInfo] = useState<PageInfo>({
+    loading: true,
+    page: page,
+    totalPages: 1,
+    players: [],
+  });
 
-        <div className="flex flex-col gap-2 md:hidden">
-          {players.map((player) => (
-            <div
-              key={player.rank}
-              className="flex flex-col gap-2 rounded-md bg-gray-700 hover:bg-gray-600"
-            >
-              <Link href={`/player/${player.id}`}>
-                <PlayerRankingMobile player={player} />
-              </Link>
+  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 (
+      <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>
-          ))}
-        </div>
+          </Card>
+        </Container>
+      </main>
+    );
+  }
 
-        {/* Pagination */}
-        <div className="flex w-full flex-row justify-center rounded-md bg-gray-800 md:flex-col">
-          <div className="p-3">
-            <Pagination
-              currentPage={page}
-              totalPages={totalPages}
-              onPageChange={(page) => {
-                const urlBase = country
-                  ? `/ranking/country/${country}`
-                  : `/ranking/global`;
-                router.push(`${urlBase}/${page}`, {
-                  scroll: false,
-                });
-              }}
-            />
-          </div>
-        </div>
-      </div>
-    </>
+  const players = pageInfo.players;
+
+  return (
+    <main>
+      <Container>
+        <Card className="mt-2">
+          {pageInfo.loading ? (
+            <div className="flex justify-center">
+              <Spinner />
+            </div>
+          ) : (
+            <div className="flex flex-col gap-2">
+              <div className="flex items-center gap-2 rounded-md bg-gray-700 p-2">
+                {country && (
+                  <ReactCountryFlag
+                    countryCode={country}
+                    svg
+                    className="!h-8 !w-8"
+                  />
+                )}
+                <p>
+                  You are viewing{" "}
+                  {country
+                    ? "scores from " + normalizedRegionName(country)
+                    : "Global scores"}
+                </p>
+              </div>
+
+              <table className="hidden w-full table-auto border-spacing-2 border-none text-left md:table">
+                <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
+                        showCountryFlag={country ? false : true}
+                        player={player}
+                      />
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+
+              <div className="flex flex-col gap-2 md:hidden">
+                {players.map((player) => (
+                  <div
+                    key={player.rank}
+                    className="flex flex-col gap-2 rounded-md bg-gray-700 hover:bg-gray-600"
+                  >
+                    <Link href={`/player/${player.id}`}>
+                      <PlayerRankingMobile player={player} />
+                    </Link>
+                  </div>
+                ))}
+              </div>
+
+              {/* 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>
+            </div>
+          )}
+        </Card>
+      </Container>
+    </main>
   );
 }

src/components/player/PlayerInfo.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
 import { useScoresaberScoresStore } from "@/store/scoresaberScoresStore";
 import { useSettingsStore } from "@/store/settingsStore";
@@ -8,6 +6,7 @@ import {
   calcPpBoundary,
   getAveragePp,
   getHighestPpPlay,
+  getTotalScores,
 } from "@/utils/scoresaber/scores";
 import {
   GlobeAsiaAustraliaIcon,
@@ -20,6 +19,7 @@ import { useRef } from "react";
 import { toast } from "react-toastify";
 import { useStore } from "zustand";
 import Avatar from "../Avatar";
+import Card from "../Card";
 import Label from "../Label";
 
 const PlayerChart = dynamic(() => import("./PlayerChart"));
@@ -96,6 +96,10 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
               });
             }
           }
+
+          console.log(
+            `Fetching scores for ${playerId} (${page}/${totalPages})`,
+          );
         },
       );
       if (reponse?.error) {
@@ -109,138 +113,147 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
   const isOwnProfile = settingsStore.player?.id == playerId;
 
   return (
-    <div className="flex flex-col items-center gap-3 md:flex-row md:items-start">
-      <div className="min-w-fit">
-        {/* Avatar */}
-        <div className="flex flex-col items-center gap-2">
-          <Avatar url={playerData.profilePicture} label="Avatar" />
+    <Card className="mt-2">
+      {/* Player Info */}
+      <div className="flex flex-col items-center gap-3 md:flex-row md:items-start">
+        <div className="min-w-fit">
+          {/* Avatar */}
+          <div className="flex flex-col items-center gap-2">
+            <Avatar url={playerData.profilePicture} label="Avatar" />
+          </div>
+
+          {/* Settings Buttons */}
+          <div className="absolute right-3 top-20 flex flex-col justify-end gap-2 md:relative md:right-0 md:top-0 md:mt-2 md:flex-row md:justify-center">
+            {!isOwnProfile && (
+              <button
+                className="h-fit w-fit rounded-md bg-blue-500 p-1 hover:bg-blue-600"
+                onClick={claimProfile}
+              >
+                <HomeIcon title="Set as your Profile" width={24} height={24} />
+              </button>
+            )}
+
+            {!isOwnProfile && (
+              <>
+                {!settingsStore?.isFriend(playerId) && (
+                  <button
+                    className="rounded-md bg-blue-500 p-1 hover:opacity-80"
+                    onClick={addFriend}
+                  >
+                    <UserIcon title="Add as Friend" width={24} height={24} />
+                  </button>
+                )}
+
+                {settingsStore.isFriend(playerId) && (
+                  <button
+                    className="rounded-md bg-red-500 p-1 hover:opacity-80"
+                    onClick={removeFriend}
+                  >
+                    <XMarkIcon title="Remove Friend" width={24} height={24} />
+                  </button>
+                )}
+              </>
+            )}
+          </div>
         </div>
+        <div className="mt-1 flex w-full flex-col items-center gap-2 md:items-start">
+          {/* Name */}
+          <p className="text-2xl leading-none">{playerData.name}</p>
 
-        {/* Settings Buttons */}
-        <div className="absolute right-3 top-20 flex flex-col justify-end gap-2 md:relative md:right-0 md:top-0 md:mt-2 md:flex-row md:justify-center">
-          {!isOwnProfile && (
-            <button
-              className="h-fit w-fit rounded-md bg-blue-500 p-1 hover:bg-blue-600"
-              onClick={claimProfile}
-            >
-              <HomeIcon title="Set as your Profile" width={24} height={24} />
-            </button>
-          )}
+          <div className="flex items-center gap-3 text-xl">
+            {/* Global Rank */}
+            <div className="flex items-center gap-1 text-gray-300">
+              <GlobeAsiaAustraliaIcon width={32} height={32} />
 
-          {!isOwnProfile && (
-            <>
-              {!settingsStore?.isFriend(playerId) && (
-                <button
-                  className="rounded-md bg-blue-500 p-1 hover:opacity-80"
-                  onClick={addFriend}
-                >
-                  <UserIcon title="Add as Friend" width={24} height={24} />
-                </button>
-              )}
+              <a
+                className="flex transform-gpu items-center gap-1 transition-all hover:text-blue-500"
+                href={`/ranking/global/?page=${Math.round(
+                  playerData.rank / 50,
+                )}`}
+              >
+                <p>#{formatNumber(playerData.rank)}</p>
+              </a>
+            </div>
 
-              {settingsStore.isFriend(playerId) && (
-                <button
-                  className="rounded-md bg-red-500 p-1 hover:opacity-80"
-                  onClick={removeFriend}
-                >
-                  <XMarkIcon title="Remove Friend" width={24} height={24} />
-                </button>
-              )}
-            </>
-          )}
+            {/* Country Rank */}
+            <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>#{formatNumber(playerData.countryRank)}</p>
+              </a>
+            </div>
+
+            {/* PP */}
+            <div className="flex items-center text-gray-300">
+              <p>{formatNumber(playerData.pp)}pp</p>
+            </div>
+          </div>
+          {/* Labels */}
+          <div className="flex flex-wrap justify-center gap-2 md:justify-start">
+            <Label
+              title="Total play count"
+              className="bg-blue-500"
+              hoverValue="Total ranked song play count"
+              value={formatNumber(playerData.scoreStats.totalPlayCount)}
+            />
+            <Label
+              title="Total score"
+              className="bg-blue-500"
+              hoverValue="Total score of all your plays"
+              value={formatNumber(playerData.scoreStats.totalScore)}
+            />
+            <Label
+              title="Avg ranked acc"
+              className="bg-blue-500"
+              hoverValue="Average accuracy of all your ranked plays"
+              value={`${playerData.scoreStats.averageRankedAccuracy.toFixed(
+                2,
+              )}%`}
+            />
+
+            {hasLocalScores && (
+              <>
+                <Label
+                  title="Top PP"
+                  className="bg-[#8992e8]"
+                  hoverValue="Highest pp play"
+                  value={`${formatNumber(
+                    getHighestPpPlay(playerId)?.toFixed(2),
+                  )}pp`}
+                />
+                <Label
+                  title="Avg PP"
+                  className="bg-[#8992e8]"
+                  hoverValue="Average amount of pp per play (best 20 scores)"
+                  value={`${formatNumber(
+                    getAveragePp(playerId)?.toFixed(2),
+                  )}pp`}
+                />
+                <Label
+                  title="+ 1pp"
+                  className="bg-[#8992e8]"
+                  hoverValue="Amount of raw pp required to increase your global pp by 1pp"
+                  value={`${formatNumber(
+                    calcPpBoundary(playerId, 1)?.toFixed(2),
+                  )}pp raw per global`}
+                />
+              </>
+            )}
+          </div>
+
+          {/* Chart */}
+          <PlayerChart scoresaber={playerData} />
         </div>
       </div>
-      <div className="mt-1 flex w-full flex-col items-center gap-2 md:items-start">
-        {/* Name */}
-        <p className="text-2xl leading-none">{playerData.name}</p>
-
-        <div className="flex items-center gap-3 text-xl">
-          {/* Global Rank */}
-          <div className="flex items-center gap-1 text-gray-300">
-            <GlobeAsiaAustraliaIcon width={32} height={32} />
-
-            <a
-              className="flex transform-gpu items-center gap-1 transition-all hover:text-blue-500"
-              href={`/ranking/global/${Math.ceil(playerData.rank / 50)}`}
-            >
-              <p>#{formatNumber(playerData.rank)}</p>
-            </a>
-          </div>
-
-          {/* Country Rank */}
-          <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}/${Math.ceil(
-                playerData.countryRank / 50,
-              )}`}
-            >
-              <ReactCountryFlag
-                countryCode={playerData.country}
-                svg
-                className="!h-7 !w-7"
-              />
-              <p>#{formatNumber(playerData.countryRank)}</p>
-            </a>
-          </div>
-
-          {/* PP */}
-          <div className="flex items-center text-gray-300">
-            <p>{formatNumber(playerData.pp)}pp</p>
-          </div>
-        </div>
-        {/* Labels */}
-        <div className="flex flex-wrap justify-center gap-2 md:justify-start">
-          <Label
-            title="Total play count"
-            className="bg-blue-500"
-            hoverValue="Total ranked song play count"
-            value={formatNumber(playerData.scoreStats.totalPlayCount)}
-          />
-          <Label
-            title="Total score"
-            className="bg-blue-500"
-            hoverValue="Total score of all your plays"
-            value={formatNumber(playerData.scoreStats.totalScore)}
-          />
-          <Label
-            title="Avg ranked acc"
-            className="bg-blue-500"
-            hoverValue="Average accuracy of all your ranked plays"
-            value={`${playerData.scoreStats.averageRankedAccuracy.toFixed(2)}%`}
-          />
-
-          {hasLocalScores && (
-            <>
-              <Label
-                title="Top PP"
-                className="bg-[#8992e8]"
-                hoverValue="Highest pp play"
-                value={`${formatNumber(
-                  getHighestPpPlay(playerId)?.toFixed(2),
-                )}pp`}
-              />
-              <Label
-                title="Avg PP"
-                className="bg-[#8992e8]"
-                hoverValue="Average amount of pp per play (best 20 scores)"
-                value={`${formatNumber(getAveragePp(playerId)?.toFixed(2))}pp`}
-              />
-              <Label
-                title="+ 1pp"
-                className="bg-[#8992e8]"
-                hoverValue="Amount of raw pp required to increase your global pp by 1pp"
-                value={`${formatNumber(
-                  calcPpBoundary(playerId, 1)?.toFixed(2),
-                )}pp raw per global`}
-              />
-            </>
-          )}
-        </div>
-
-        {/* Chart */}
-        <PlayerChart scoresaber={playerData} />
-      </div>
-    </div>
+    </Card>
   );
 }

src/components/player/PlayerPage.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import Card from "@/components/Card";
+import Container from "@/components/Container";
+import Spinner from "@/components/Spinner";
+import Scores from "@/components/player/Scores";
+import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
+import { useSettingsStore } from "@/store/settingsStore";
+import { SortType, SortTypes } from "@/types/SortTypes";
+import { ScoreSaberAPI } from "@/utils/scoresaber/api";
+import useStore from "@/utils/useStore";
+import dynamic from "next/dynamic";
+import { useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
+import PlayerInfo from "./PlayerInfo";
+
+const Error = dynamic(() => import("@/components/Error"));
+
+type PlayerInfo = {
+  loading: boolean;
+  player: ScoresaberPlayer | undefined;
+};
+
+type PlayerPageProps = {
+  id: string;
+};
+
+const DEFAULT_SORT_TYPE = SortTypes.top;
+
+export default function PlayerPage({ id }: PlayerPageProps) {
+  const settingsStore = useStore(useSettingsStore, (store) => store);
+  const searchParams = useSearchParams();
+
+  const [mounted, setMounted] = useState(false);
+  const [error, setError] = useState(false);
+  const [errorMessage, setErrorMessage] = useState("");
+
+  const [player, setPlayer] = useState<PlayerInfo>({
+    loading: true,
+    player: undefined,
+  });
+
+  let page;
+  const pageString = searchParams.get("page");
+  if (pageString == null) {
+    page = 1;
+  } else {
+    page = Number.parseInt(pageString) || 1;
+  }
+
+  let sortType: SortType;
+  const sortTypeString = searchParams.get("sort");
+  if (sortTypeString == null) {
+    sortType = settingsStore?.lastUsedSortType || DEFAULT_SORT_TYPE;
+  } else {
+    sortType = SortTypes[sortTypeString] || DEFAULT_SORT_TYPE;
+  }
+
+  useEffect(() => {
+    setMounted(true);
+    if (error || !player.loading) {
+      return;
+    }
+
+    if (mounted == true) {
+      return;
+    }
+
+    ScoreSaberAPI.fetchPlayerData(id).then((playerResponse) => {
+      if (!playerResponse) {
+        setError(true);
+        setErrorMessage("Failed to fetch player. Is the ID correct?");
+        setPlayer({ ...player, loading: false });
+        return;
+      }
+      setPlayer({ ...player, player: playerResponse, loading: false });
+    });
+  }, [error, mounted, id, player]);
+
+  if (player.loading || error || !player.player) {
+    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 playerData = player.player;
+
+  return (
+    <main>
+      <Container>
+        <PlayerInfo playerData={playerData} />
+        <Scores playerData={playerData} page={page} sortType={sortType} />
+      </Container>
+    </main>
+  );
+}

src/components/player/PlayerRanking.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
 import { useSettingsStore } from "@/store/settingsStore";
 import { formatNumber } from "@/utils/number";

src/components/player/PlayerRankingMobile.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
 import { useSettingsStore } from "@/store/settingsStore";
 import { formatNumber } from "@/utils/number";
@@ -24,7 +22,7 @@ export default function PlayerRankingMobile({
   return (
     <div>
       <div className="m-3 flex flex-col gap-2">
-        <div className="flex items-center gap-2">
+        <p className="flex items-center gap-2">
           <p>#{formatNumber(player.rank)}</p>
           <Avatar url={player.profilePicture} label="Avatar" size={24} />
           {showCountryFlag && (
@@ -43,7 +41,7 @@ export default function PlayerRankingMobile({
           >
             {player.name}
           </p>
-        </div>
+        </p>
         <div className="flex flex-wrap justify-center gap-2">
           <Label
             title="PP"

src/components/player/Scores.tsx

@@ -1,110 +1,173 @@
-"use client";
-
 import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
 import { ScoresaberPlayerScore } from "@/schemas/scoresaber/playerScore";
 import { useSettingsStore } from "@/store/settingsStore";
 import { SortType, SortTypes } from "@/types/SortTypes";
+import { ScoreSaberAPI } from "@/utils/scoresaber/api";
 import useStore from "@/utils/useStore";
+import dynamic from "next/dynamic";
 import { useRouter } from "next/navigation";
+import { useCallback, useEffect, useState } from "react";
 import Card from "../Card";
+import Error from "../Error";
 import Pagination from "../Pagination";
 import Score from "./Score";
 
-type ScoresProps = {
-  playerData: ScoresaberPlayer;
+const Spinner = dynamic(() => import("@/components/Spinner"));
+
+type PageInfo = {
+  loading: boolean;
   page: number;
   totalPages: number;
   sortType: SortType;
   scores: ScoresaberPlayerScore[];
 };
 
-export default function Scores({
-  playerData,
-  page,
-  totalPages,
-  sortType,
-  scores,
-}: ScoresProps) {
+type ScoresProps = {
+  playerData: ScoresaberPlayer;
+  page: number;
+  sortType: SortType;
+};
+
+export default function Scores({ playerData, page, sortType }: ScoresProps) {
   const settingsStore = useStore(useSettingsStore, (store) => store);
   const playerId = playerData.id;
 
   const router = useRouter();
 
-  const lastUsedSortType = settingsStore?.lastUsedSortType;
-  if (lastUsedSortType && lastUsedSortType != sortType) {
-    router.push(
-      `/player/${playerId}/scoresaber/${lastUsedSortType.value}/${page}`,
-      {
-        scroll: false,
-      },
-    );
-  }
+  const [mounted, setMounted] = useState(false);
+  const [error, setError] = useState(false);
+  const [errorMessage, setErrorMessage] = useState("");
 
-  function setPage(page: number, sortTypee?: SortType) {
-    if (sortTypee) {
-      if (sortTypee.value !== sortType.value) {
-        settingsStore?.setLastUsedSortType(sortTypee);
-      }
-    }
-    router.push(
-      `/player/${playerId}/scoresaber/${
-        sortTypee ? sortTypee.value : sortType.value
-      }/${page}`,
-      {
-        scroll: false,
-      },
+  const [scores, setScores] = useState<PageInfo>({
+    loading: true,
+    page: page,
+    totalPages: 1,
+    sortType: sortType,
+    scores: [],
+  });
+
+  const updateScoresPage = useCallback(
+    (sortType: SortType, page: any) => {
+      ScoreSaberAPI.fetchScores(playerId, page, sortType.value, 10).then(
+        (scoresResponse) => {
+          if (!scoresResponse) {
+            setError(true);
+            setErrorMessage("No Scores");
+            setScores({ ...scores, loading: false });
+            return;
+          }
+          setScores({
+            ...scores,
+            scores: scoresResponse.scores,
+            totalPages: scoresResponse.pageInfo.totalPages,
+            loading: false,
+            page: page,
+            sortType: sortType,
+          });
+          settingsStore?.setLastUsedSortType(sortType);
+
+          if (page > 1) {
+            router.push(
+              `/player/${playerId}?page=${page}&sort=${sortType.value}`,
+              {
+                scroll: false,
+              },
+            );
+          } else {
+            router.push(`/player/${playerId}?sort=${sortType.value}`, {
+              scroll: false,
+            });
+          }
+
+          console.log(`Switched page to ${page} with sort ${sortType.value}`);
+        },
+      );
+    },
+    [playerId, router, scores, settingsStore],
+  );
+
+  useEffect(() => {
+    if (mounted) return;
+    setMounted(true);
+
+    updateScoresPage(scores.sortType, scores.page);
+  }, [mounted, updateScoresPage, scores.sortType, scores.page]);
+
+  if (error) {
+    return (
+      <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} />}
+            </div>
+          </div>
+        </div>
+      </Card>
     );
   }
 
   return (
-    <Card className="w-full items-center md:flex-col">
+    <Card className="mt-2 w-full items-center md:flex-col">
       {/* Sort */}
-      <div className="w-full text-sm">
+      <div className="m-2 w-full text-sm">
         <div className="flex justify-center gap-2">
-          {Object.values(SortTypes).map((sortTypee) => {
+          {Object.values(SortTypes).map((sortType) => {
             return (
               <button
                 key={sortType.value}
                 className={`flex transform-gpu flex-row items-center gap-1 rounded-md p-[0.35rem] transition-all hover:opacity-80 ${
-                  sortType.value === sortTypee.value
+                  scores.sortType.value === sortType.value
                     ? "bg-blue-500"
                     : "bg-gray-500"
                 }`}
                 onClick={() => {
-                  setPage(1, sortTypee);
+                  updateScoresPage(sortType, 1);
                 }}
               >
-                {sortTypee.icon}
-                <p>{sortTypee.name}</p>
+                {sortType.icon}
+                <p>{sortType.name}</p>
               </button>
             );
           })}
         </div>
       </div>
 
-      <div className="mt-4 grid grid-cols-1 divide-y divide-gray-500">
-        {scores.map((scoreData, id) => {
-          const { score, leaderboard } = scoreData;
+      <div className="w-full p-1">
+        {scores.loading ? (
+          <div className="flex justify-center">
+            <Spinner />
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 divide-y divide-gray-500">
+            {!scores.loading && scores.scores.length == 0 ? (
+              <p className="text-red-400">{errorMessage}</p>
+            ) : (
+              scores.scores.map((scoreData, id) => {
+                const { score, leaderboard } = scoreData;
 
-          return (
-            <Score
-              key={id}
-              player={playerData}
-              score={score}
-              leaderboard={leaderboard}
-            />
-          );
-        })}
+                return (
+                  <Score
+                    key={id}
+                    player={playerData}
+                    score={score}
+                    leaderboard={leaderboard}
+                  />
+                );
+              })
+            )}
+          </div>
+        )}
       </div>
 
       {/* Pagination */}
       <div className="flex w-full flex-row justify-center rounded-md bg-gray-800 md:flex-col">
         <div className="p-3">
           <Pagination
-            currentPage={page}
-            totalPages={totalPages}
+            currentPage={scores.page}
+            totalPages={scores.totalPages}
             onPageChange={(page) => {
-              setPage(page);
+              updateScoresPage(scores.sortType, page);
             }}
           />
         </div>

src/components/player/SearchPlayer.tsx

@@ -1,90 +1,90 @@
-"use client";
-
-import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
-import { formatNumber } from "@/utils/number";
-import { ScoreSaberAPI } from "@/utils/scoresaber/api";
-import { MagnifyingGlassIcon } from "@heroicons/react/20/solid";
-import clsx from "clsx";
-import { useEffect, useState } from "react";
-import Avatar from "../Avatar";
-
-export default function SearchPlayer() {
-  const [search, setSearch] = useState("");
-  const [players, setPlayers] = useState([] as ScoresaberPlayer[]);
-
-  useEffect(() => {
-    // Don't search if the query is too short
-    if (search.length < 4) {
-      setPlayers([]); // Clear players
-      return;
-    }
-    searchPlayer(search);
-  }, [search]);
-
-  async function searchPlayer(search: string) {
-    // Check if the search is a profile link
-    if (search.startsWith("https://scoresaber.com/u/")) {
-      const id = search.split("/").pop();
-      if (id == undefined) return;
-
-      const player = await ScoreSaberAPI.fetchPlayerData(id);
-      if (player == undefined) return;
-
-      setPlayers([player]);
-    }
-
-    // Search by name
-    const players = await ScoreSaberAPI.searchByName(search);
-    if (players == undefined) return;
-
-    setPlayers(players);
-  }
-
-  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
-    e.preventDefault();
-
-    // Take the user to the first account
-    if (players.length > 0) {
-      window.location.href = `/player/${players[0].id}/scoresaber/top/1`;
-    }
-  }
-
-  return (
-    <form className="mt-6 flex gap-2" onSubmit={handleSubmit}>
-      <input
-        className="min-w-[14rem] border-b bg-transparent text-xs outline-none"
-        type="text"
-        placeholder="Enter a name or ScoreSaber profile..."
-        value={search}
-        onChange={(e) => setSearch(e.target.value)}
-      />
-      <button className="transform-gpu rounded-md bg-blue-600 p-1 transition-all hover:opacity-80">
-        <MagnifyingGlassIcon className="font-black" width={18} height={18} />
-      </button>
-
-      <div
-        className={clsx(
-          "absolute z-20 mt-7 flex max-h-[400px] min-w-[14rem] flex-col divide-y overflow-y-auto rounded-md bg-gray-700 shadow-sm",
-          players.length > 0 ? "flex" : "hidden",
-        )}
-      >
-        {players.map((player: ScoresaberPlayer) => (
-          <a
-            key={player.id}
-            className="flex min-w-[14rem] items-center gap-2 rounded-md p-2 transition-all hover:bg-gray-600"
-            href={`/player/${player.id}/scoresaber/top/1`}
-          >
-            <Avatar label="Account" size={40} url={player.profilePicture} />
-
-            <div>
-              <p className="text-xs text-gray-400">
-                #{formatNumber(player.rank)}
-              </p>
-              <p className="text-sm">{player.name}</p>
-            </div>
-          </a>
-        ))}
-      </div>
-    </form>
-  );
-}
+"use client";
+
+import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
+import { formatNumber } from "@/utils/number";
+import { ScoreSaberAPI } from "@/utils/scoresaber/api";
+import { MagnifyingGlassIcon } from "@heroicons/react/20/solid";
+import clsx from "clsx";
+import { useEffect, useState } from "react";
+import Avatar from "../Avatar";
+
+export default function SearchPlayer() {
+  const [search, setSearch] = useState("");
+  const [players, setPlayers] = useState([] as ScoresaberPlayer[]);
+
+  useEffect(() => {
+    // Don't search if the query is too short
+    if (search.length < 4) {
+      setPlayers([]); // Clear players
+      return;
+    }
+    searchPlayer(search);
+  }, [search]);
+
+  async function searchPlayer(search: string) {
+    // Check if the search is a profile link
+    if (search.startsWith("https://scoresaber.com/u/")) {
+      const id = search.split("/").pop();
+      if (id == undefined) return;
+
+      const player = await ScoreSaberAPI.fetchPlayerData(id);
+      if (player == undefined) return;
+
+      setPlayers([player]);
+    }
+
+    // Search by name
+    const players = await ScoreSaberAPI.searchByName(search);
+    if (players == undefined) return;
+
+    setPlayers(players);
+  }
+
+  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+
+    // Take the user to the first account
+    if (players.length > 0) {
+      window.location.href = `/player/${players[0].id}`;
+    }
+  }
+
+  return (
+    <form className="mt-6 flex gap-2" onSubmit={handleSubmit}>
+      <input
+        className="min-w-[14rem] border-b bg-transparent text-xs outline-none"
+        type="text"
+        placeholder="Enter a name or ScoreSaber profile..."
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+      />
+      <button className="transform-gpu rounded-md bg-blue-600 p-1 transition-all hover:opacity-80">
+        <MagnifyingGlassIcon className="font-black" width={18} height={18} />
+      </button>
+
+      <div
+        className={clsx(
+          "absolute z-20 mt-7 flex max-h-[400px] min-w-[14rem] flex-col divide-y overflow-y-auto rounded-md bg-gray-700 shadow-sm",
+          players.length > 0 ? "flex" : "hidden",
+        )}
+      >
+        {players.map((player: ScoresaberPlayer) => (
+          <a
+            key={player.id}
+            className="flex min-w-[14rem] items-center gap-2 rounded-md p-2 transition-all hover:bg-gray-600"
+            href={`/player/${player.id}`}
+          >
+            <Avatar label="Account" size={40} url={player.profilePicture} />
+
+            <div>
+              <p className="text-xs text-gray-400">
+                #{formatNumber(player.rank)}
+              </p>
+              <p className="text-sm">{player.name}</p>
+            </div>
+          </a>
+        ))}
+      </div>
+    </form>
+  );
+}

src/middleware.ts

@@ -22,7 +22,6 @@ export function middleware(request: NextRequest) {
   if (pathname == "/ranking/global") {
     return NextResponse.redirect(new URL("/ranking/global/1", request.url));
   }
-
   const requestHeaders = new Headers(request.headers);
   requestHeaders.set("x-url", request.url);
   return NextResponse.next({