Fascinated/scoresaber-reloaded-v2
1
2
Fork 0
Code Issues 1 Pull Requests 10 Actions Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/player/GlobalRanking.tsx
View File

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

2
src/components/player/PlayerRanking.tsx
View File

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

14
src/components/player/Scores.tsx
View File

@ -5,7 +5,6 @@ import { SortType, SortTypes } from "@/types/SortTypes";
import { ScoreSaberAPI } from "@/utils/scoresaber/api"; import { ScoreSaberAPI } from "@/utils/scoresaber/api";
import useStore from "@/utils/useStore"; import useStore from "@/utils/useStore";
import dynamic from "next/dynamic"; import dynamic from "next/dynamic";
import { useRouter } from "next/navigation";
import { useCallback, useEffect, useState } from "react"; import { useCallback, useEffect, useState } from "react";
import Card from "../Card"; import Card from "../Card";
import Error from "../Error"; import Error from "../Error";
@ -32,8 +31,6 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
const settingsStore = useStore(useSettingsStore, (store) => store); const settingsStore = useStore(useSettingsStore, (store) => store);
const playerId = playerData.id; const playerId = playerData.id;
const router = useRouter();
const [mounted, setMounted] = useState(false); const [mounted, setMounted] = useState(false);
const [error, setError] = useState(false); const [error, setError] = useState(false);
const [errorMessage, setErrorMessage] = useState(""); const [errorMessage, setErrorMessage] = useState("");
@ -65,16 +62,17 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
sortType: sortType, sortType: sortType,
}); });
settingsStore?.setLastUsedSortType(sortType); settingsStore?.setLastUsedSortType(sortType);
window.history.pushState(
router.push(`/player/${playerId}/${sortType.value}/${page}`, { {},
scroll: false, "",
}); `/player/${playerId}/${sortType.value}/${page}`,
);
console.log(`Switched page to ${page} with sort ${sortType.value}`); console.log(`Switched page to ${page} with sort ${sortType.value}`);
}, },
); );
}, },
[playerId, router, scores, settingsStore], [playerId, scores, settingsStore],
); );
useEffect(() => { useEffect(() => {