From 171dfd9cc050e106e53ed99d395ad839a438148e Mon Sep 17 00:00:00 2001 From: Liam Date: Tue, 24 Oct 2023 12:56:28 +0100 Subject: [PATCH] make urls look less awful (remove query params) --- .../player/[id]/{ => [sort]/[page]}/page.tsx | 6 ++-- .../ranking/country/[country]/[page]/page.tsx | 9 +++++ src/app/ranking/country/[country]/page.tsx | 14 -------- src/app/ranking/global/[page]/page.tsx | 9 +++++ src/app/ranking/global/page.tsx | 9 ----- src/components/Navbar.tsx | 6 ++-- src/components/player/GlobalRanking.tsx | 17 +++------- src/components/player/PlayerInfo.tsx | 6 ++-- src/components/player/PlayerPage.tsx | 34 ++++++------------- src/components/player/Scores.tsx | 15 ++------ src/components/player/SearchPlayer.tsx | 4 +-- src/middleware.ts | 2 +- 12 files changed, 47 insertions(+), 84 deletions(-) rename src/app/player/[id]/{ => [sort]/[page]}/page.tsx (87%) create mode 100644 src/app/ranking/country/[country]/[page]/page.tsx delete mode 100644 src/app/ranking/country/[country]/page.tsx create mode 100644 src/app/ranking/global/[page]/page.tsx delete mode 100644 src/app/ranking/global/page.tsx diff --git a/src/app/player/[id]/page.tsx b/src/app/player/[id]/[sort]/[page]/page.tsx similarity index 87% rename from src/app/player/[id]/page.tsx rename to src/app/player/[id]/[sort]/[page]/page.tsx index d7c0339..2844efc 100644 --- a/src/app/player/[id]/page.tsx +++ b/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) { - return ; +export default function Player({ params: { id, sort, page } }: Props) { + return ; } diff --git a/src/app/ranking/country/[country]/[page]/page.tsx b/src/app/ranking/country/[country]/[page]/page.tsx new file mode 100644 index 0000000..75a729c --- /dev/null +++ b/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 ; +} diff --git a/src/app/ranking/country/[country]/page.tsx b/src/app/ranking/country/[country]/page.tsx deleted file mode 100644 index 10e84a8..0000000 --- a/src/app/ranking/country/[country]/page.tsx +++ /dev/null @@ -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 ; -} diff --git a/src/app/ranking/global/[page]/page.tsx b/src/app/ranking/global/[page]/page.tsx new file mode 100644 index 0000000..d8322b6 --- /dev/null +++ b/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 ; +} diff --git a/src/app/ranking/global/page.tsx b/src/app/ranking/global/page.tsx deleted file mode 100644 index 05e4bf7..0000000 --- a/src/app/ranking/global/page.tsx +++ /dev/null @@ -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 ; -} diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index bacc142..e91deab 100644 --- a/src/components/Navbar.tsx +++ b/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={ } - href="/ranking/global" + href="/ranking/global/1" />
diff --git a/src/components/player/GlobalRanking.tsx b/src/components/player/GlobalRanking.tsx index 3b3c280..596ebdb 100644 --- a/src/components/player/GlobalRanking.tsx +++ b/src/components/player/GlobalRanking.tsx @@ -59,18 +59,11 @@ export default function GlobalRanking({ page, country }: GlobalRankingProps) { 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, - }); - } + router.push( + country + ? `/ranking/country/${country}/${page}` + : `/ranking/global/${page}`, + ); }); }, [country, pageInfo, router], diff --git a/src/components/player/PlayerInfo.tsx b/src/components/player/PlayerInfo.tsx index de2c0cc..b14a7b6 100644 --- a/src/components/player/PlayerInfo.tsx +++ b/src/components/player/PlayerInfo.tsx @@ -169,9 +169,7 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {

#{formatNumber(playerData.rank)}

 @@ -181,7 +179,7 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
diff --git a/src/components/player/PlayerPage.tsx b/src/components/player/PlayerPage.tsx index cff5d26..b994c8a 100644 --- a/src/components/player/PlayerPage.tsx +++ b/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 { SortType, SortTypes } from "@/types/SortTypes"; +import { 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) { - const settingsStore = useStore(useSettingsStore, (store) => store); - const searchParams = useSearchParams(); - +export default function PlayerPage({ id, sort, page }: PlayerPageProps) { 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 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; - } + const sortType = SortTypes[sort] || DEFAULT_SORT_TYPE; useEffect(() => { setMounted(true); @@ -102,7 +84,11 @@ export default function PlayerPage({ id }: PlayerPageProps) {
- +
); diff --git a/src/components/player/Scores.tsx b/src/components/player/Scores.tsx index bce2f1f..b62dbed 100644 --- a/src/components/player/Scores.tsx +++ b/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}?page=${page}&sort=${sortType.value}`, - { - scroll: false, - }, - ); - } else { - router.push(`/player/${playerId}?sort=${sortType.value}`, { - scroll: false, - }); - } + router.push(`/player/${playerId}/${sortType.value}/${page}`, { + scroll: false, + }); console.log(`Switched page to ${page} with sort ${sortType.value}`); }, diff --git a/src/components/player/SearchPlayer.tsx b/src/components/player/SearchPlayer.tsx index 357b2e9..4f71712 100644 --- a/src/components/player/SearchPlayer.tsx +++ b/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() { diff --git a/src/middleware.ts b/src/middleware.ts index 466f605..b2bce66 100644 --- a/src/middleware.ts +++ b/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));