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,37 +1,125 @@
 "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({
+type GlobalRankingProps = {
-  page,
+  page: number;
-  totalPages,
+  country?: string;
-  country,
+};
-  players,
+
-}: GlobalRankingProps) {
+export default function GlobalRanking({ page, country }: GlobalRankingProps) {
   const router = useRouter();
 
+  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);
+      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>
+          </Card>
+        </Container>
+      </main>
+    );
+  }
+
+  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" />
+                  <ReactCountryFlag
+                    countryCode={country}
+                    svg
+                    className="!h-8 !w-8"
+                  />
                 )}
                 <p>
                   You are viewing{" "}
@@ -81,20 +169,18 @@ export default function GlobalRanking({
               <div className="flex w-full flex-row justify-center rounded-md bg-gray-800 md:flex-col">
                 <div className="p-3">
                   <Pagination
-              currentPage={page}
+                    currentPage={pageInfo.page}
-              totalPages={totalPages}
+                    totalPages={pageInfo.totalPages}
                     onPageChange={(page) => {
-                const urlBase = country
+                      updatePage(page);
-                  ? `/ranking/country/${country}`
-                  : `/ranking/global`;
-                router.push(`${urlBase}/${page}`, {
-                  scroll: false,
-                });
                     }}
                   />
                 </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,6 +113,8 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
   const isOwnProfile = settingsStore.player?.id == playerId;
 
   return (
+    <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 */}
@@ -161,7 +167,9 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
 
               <a
                 className="flex transform-gpu items-center gap-1 transition-all hover:text-blue-500"
-              href={`/ranking/global/${Math.ceil(playerData.rank / 50)}`}
+                href={`/ranking/global/?page=${Math.round(
+                  playerData.rank / 50,
+                )}`}
               >
                 <p>#{formatNumber(playerData.rank)}</p>
               </a>
@@ -171,7 +179,7 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
             <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(
+                href={`/ranking/country/${playerData.country}?page=${Math.round(
                   playerData.countryRank / 50,
                 )}`}
               >
@@ -207,7 +215,9 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
               title="Avg ranked acc"
               className="bg-blue-500"
               hoverValue="Average accuracy of all your ranked plays"
-            value={`${playerData.scoreStats.averageRankedAccuracy.toFixed(2)}%`}
+              value={`${playerData.scoreStats.averageRankedAccuracy.toFixed(
+                2,
+              )}%`}
             />
 
             {hasLocalScores && (
@@ -224,7 +234,9 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
                   title="Avg PP"
                   className="bg-[#8992e8]"
                   hoverValue="Average amount of pp per play (best 20 scores)"
-                value={`${formatNumber(getAveragePp(playerId)?.toFixed(2))}pp`}
+                  value={`${formatNumber(
+                    getAveragePp(playerId)?.toFixed(2),
+                  )}pp`}
                 />
                 <Label
                   title="+ 1pp"
@@ -242,5 +254,6 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
           <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,89 +1,149 @@
-"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 = {
+const Spinner = dynamic(() => import("@/components/Spinner"));
-  playerData: ScoresaberPlayer;
+
+type PageInfo = {
+  loading: boolean;
   page: number;
   totalPages: number;
   sortType: SortType;
   scores: ScoresaberPlayerScore[];
 };
 
-export default function Scores({
+type ScoresProps = {
-  playerData,
+  playerData: ScoresaberPlayer;
-  page,
+  page: number;
-  totalPages,
+  sortType: SortType;
-  sortType,
+};
-  scores,
+
-}: ScoresProps) {
+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;
+  const [mounted, setMounted] = useState(false);
-  if (lastUsedSortType && lastUsedSortType != sortType) {
+  const [error, setError] = useState(false);
+  const [errorMessage, setErrorMessage] = useState("");
+
+  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}/scoresaber/${lastUsedSortType.value}/${page}`,
+              `/player/${playerId}?page=${page}&sort=${sortType.value}`,
               {
                 scroll: false,
               },
             );
+          } else {
+            router.push(`/player/${playerId}?sort=${sortType.value}`, {
+              scroll: false,
+            });
           }
 
-  function setPage(page: number, sortTypee?: SortType) {
+          console.log(`Switched page to ${page} with sort ${sortType.value}`);
-    if (sortTypee) {
-      if (sortTypee.value !== sortType.value) {
-        settingsStore?.setLastUsedSortType(sortTypee);
-      }
-    }
-    router.push(
-      `/player/${playerId}/scoresaber/${
-        sortTypee ? sortTypee.value : sortType.value
-      }/${page}`,
-      {
-        scroll: false,
         },
       );
+    },
+    [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}
+                {sortType.icon}
-                <p>{sortTypee.name}</p>
+                <p>{sortType.name}</p>
               </button>
             );
           })}
         </div>
       </div>
 
-      <div className="mt-4 grid grid-cols-1 divide-y divide-gray-500">
+      <div className="w-full p-1">
-        {scores.map((scoreData, id) => {
+        {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 (
@@ -94,17 +154,20 @@ export default function Scores({
                     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}
+            currentPage={scores.page}
-            totalPages={totalPages}
+            totalPages={scores.totalPages}
             onPageChange={(page) => {
-              setPage(page);
+              updateScoresPage(scores.sortType, page);
             }}
           />
         </div>

src/components/player/SearchPlayer.tsx

@@ -45,7 +45,7 @@ export default function SearchPlayer() {
 
     // Take the user to the first account
     if (players.length > 0) {
-      window.location.href = `/player/${players[0].id}/scoresaber/top/1`;
+      window.location.href = `/player/${players[0].id}`;
     }
   }
 
@@ -72,7 +72,7 @@ export default function SearchPlayer() {
           <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`}
+            href={`/player/${player.id}`}
           >
             <Avatar label="Account" size={40} url={player.profilePicture} />
 

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({