make urls look less awful (remove query params)

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

@@ -6,7 +6,7 @@ import { normalizedRegionName } from "@/utils/utils";
 import { Metadata } from "next";
 
 type Props = {
-  params: { id: string };
+  params: { id: string; sort: string; page: string };
 };
 
 export async function generateMetadata({
@@ -47,6 +47,6 @@ export async function generateMetadata({
   };
 }
 
-export default function Player({ params: { id } }: Props) {
+export default function Player({ params: { id, sort, page } }: Props) {
-  return <PlayerPage id={id} />;
+  return <PlayerPage id={id} sort={sort} page={page} />;
 }

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

@@ -0,0 +1,9 @@
+import GlobalRanking from "@/components/player/GlobalRanking";
+
+type Props = {
+  params: { page: string; country: string };
+};
+
+export default function RankingGlobal({ params: { page, country } }: Props) {
+  return <GlobalRanking page={Number(page)} country={country} />;
+}

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

@@ -1,14 +0,0 @@
-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

@@ -0,0 +1,9 @@
+import GlobalRanking from "@/components/player/GlobalRanking";
+
+type Props = {
+  params: { page: string };
+};
+
+export default function RankingGlobal({ params: { page } }: Props) {
+  return <GlobalRanking page={Number(page)} />;
+}

src/app/ranking/global/page.tsx

@@ -1,9 +0,0 @@
-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

@@ -56,7 +56,7 @@ export default function Navbar() {
                 size={32}
               />
             }
-            href={`/player/${settingsStore.player.id}`}
+            href={`/player/${settingsStore.player.id}/top/1`}
           />
         )}
 
@@ -70,7 +70,7 @@ export default function Navbar() {
                   key={friend.id}
                   className="mt-2 bg-gray-500"
                   text={friend.name}
-                  url={`/player/${friend.id}`}
+                  url={`/player/${friend.id}/top/1`}
                   icon={
                     <Avatar
                       url={friend.profilePicture}
@@ -93,7 +93,7 @@ export default function Navbar() {
         <NavbarButton
           text="Ranking"
           icon={<GlobeAltIcon height={20} width={20} />}
-          href="/ranking/global"
+          href="/ranking/global/1"
         />
 
         <div className="m-auto" />

src/components/player/GlobalRanking.tsx

@@ -59,18 +59,11 @@ export default function GlobalRanking({ page, country }: GlobalRankingProps) {
           loading: false,
           page: page,
         });
-        const urlBase = country
+        router.push(
-          ? `/ranking/country/${country}`
+          country
-          : "/ranking/global";
+            ? `/ranking/country/${country}/${page}`
-        if (page > 1) {
+            : `/ranking/global/${page}`,
-          router.push(`${urlBase}?page=${page}`, {
+        );
-            scroll: false,
-          });
-        } else {
-          router.push(`${urlBase}`, {
-            scroll: false,
-          });
-        }
       });
     },
     [country, pageInfo, router],

src/components/player/PlayerInfo.tsx

@@ -169,9 +169,7 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
 
               <a
                 className="flex transform-gpu items-center gap-1 transition-all hover:text-blue-500"
-                href={`/ranking/global/?page=${Math.round(
+                href={`/ranking/global/${Math.round(playerData.rank / 50)}`}
-                  playerData.rank / 50,
-                )}`}
               >
                 <p>#{formatNumber(playerData.rank)}</p>
               </a>
@@ -181,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}?page=${Math.round(
+                href={`/ranking/country/${playerData.country}/${Math.round(
                   playerData.countryRank / 50,
                 )}`}
               >

src/components/player/PlayerPage.tsx

@@ -5,12 +5,9 @@ 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 { SortTypes } from "@/types/SortTypes";
-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";
 
@@ -23,14 +20,13 @@ type PlayerInfo = {
 
 type PlayerPageProps = {
   id: string;
+  sort: string;
+  page: string;
 };
 
 const DEFAULT_SORT_TYPE = SortTypes.top;
 
-export default function PlayerPage({ id }: PlayerPageProps) {
+export default function PlayerPage({ id, sort, page }: PlayerPageProps) {
-  const settingsStore = useStore(useSettingsStore, (store) => store);
-  const searchParams = useSearchParams();
-
   const [mounted, setMounted] = useState(false);
   const [error, setError] = useState(false);
   const [errorMessage, setErrorMessage] = useState("");
@@ -40,21 +36,7 @@ export default function PlayerPage({ id }: PlayerPageProps) {
     player: undefined,
   });
 
-  let page;
+  const sortType = SortTypes[sort] || DEFAULT_SORT_TYPE;
-  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);
@@ -102,7 +84,11 @@ export default function PlayerPage({ id }: PlayerPageProps) {
     <main>
       <Container>
         <PlayerInfo playerData={playerData} />
-        <Scores playerData={playerData} page={page} sortType={sortType} />
+        <Scores
+          playerData={playerData}
+          page={Number(page)}
+          sortType={sortType}
+        />
       </Container>
     </main>
   );

src/components/player/Scores.tsx

@@ -66,18 +66,9 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
           });
           settingsStore?.setLastUsedSortType(sortType);
 
-          if (page > 1) {
+          router.push(`/player/${playerId}/${sortType.value}/${page}`, {
-            router.push(
+            scroll: false,
-              `/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}`);
         },

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}`;
+      window.location.href = `/player/${players[0].id}/top/1`;
     }
   }
 
@@ -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}`}
+            href={`/player/${player.id}/top/1`}
           >
             <Avatar label="Account" size={40} url={player.profilePicture} />
 

src/middleware.ts

@@ -9,7 +9,7 @@ export function middleware(request: NextRequest) {
   if (pathname == "/") {
     if (playerIdCookie) {
       return NextResponse.redirect(
-        new URL(`/player/${playerIdCookie.value}`, request.url),
+        new URL(`/player/${playerIdCookie.value}/top/1`, request.url),
       );
     } else {
       return NextResponse.redirect(new URL("/search", request.url));