make page not refresh when changing pagination page
All checks were successful
deploy / deploy (push) Successful in 53s
All checks were successful
deploy / deploy (push) Successful in 53s
This commit is contained in:
parent
171dfd9cc0
commit
ec23a73e0e
@ -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>
|
||||||
|
@ -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={
|
||||||
|
@ -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(() => {
|
||||||
|
Loading…
Reference in New Issue
Block a user