make page not refresh when changing pagination page
All checks were successful
deploy / deploy (push) Successful in 53s

This commit is contained in:
Lee 2023-10-24 13:32:01 +01:00
parent 171dfd9cc0
commit ec23a73e0e
3 changed files with 12 additions and 15 deletions

@ -5,7 +5,6 @@ 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";
@ -30,8 +29,6 @@ type GlobalRankingProps = {
};
export default function GlobalRanking({ page, country }: GlobalRankingProps) {
const router = useRouter();
const [error, setError] = useState(false);
const [errorMessage, setErrorMessage] = useState("");
@ -59,14 +56,16 @@ export default function GlobalRanking({ page, country }: GlobalRankingProps) {
loading: false,
page: page,
});
router.push(
window.history.pushState(
{},
"",
country
? `/ranking/country/${country}/${page}`
: `/ranking/global/${page}`,
);
});
},
[country, pageInfo, router],
[country, pageInfo],
);
useEffect(() => {
@ -151,7 +150,7 @@ export default function GlobalRanking({ page, country }: GlobalRankingProps) {
key={player.rank}
className="flex flex-col gap-2 rounded-md bg-gray-700 hover:bg-gray-600"
>
<Link href={`/player/${player.id}`}>
<Link href={`/player/${player.id}/top/1`}>
<PlayerRankingMobile player={player} />
</Link>
</div>

@ -33,7 +33,7 @@ export default function PlayerRanking({
)}
<Link
className="transform-gpu transition-all hover:text-blue-500"
href={"/player/" + player.id}
href={`/player/${player.id}/top/1`}
>
<p
className={

@ -5,7 +5,6 @@ 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";
@ -32,8 +31,6 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
const settingsStore = useStore(useSettingsStore, (store) => store);
const playerId = playerData.id;
const router = useRouter();
const [mounted, setMounted] = useState(false);
const [error, setError] = useState(false);
const [errorMessage, setErrorMessage] = useState("");
@ -65,16 +62,17 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
sortType: sortType,
});
settingsStore?.setLastUsedSortType(sortType);
router.push(`/player/${playerId}/${sortType.value}/${page}`, {
scroll: false,
});
window.history.pushState(
{},
"",
`/player/${playerId}/${sortType.value}/${page}`,
);
console.log(`Switched page to ${page} with sort ${sortType.value}`);
},
);
},
[playerId, router, scores, settingsStore],
[playerId, scores, settingsStore],
);
useEffect(() => {