This commit is contained in:
parent
39efca8fb7
commit
4d6ece7a3b
@ -5,6 +5,7 @@ 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, useSearchParams } 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";
|
||||||
@ -29,6 +30,10 @@ type GlobalRankingProps = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export default function GlobalRanking({ page, country }: GlobalRankingProps) {
|
export default function GlobalRanking({ page, country }: GlobalRankingProps) {
|
||||||
|
const router = useRouter();
|
||||||
|
const searchQuery = useSearchParams();
|
||||||
|
const isMobile = searchQuery.get("mobile") == "true";
|
||||||
|
|
||||||
const [error, setError] = useState(false);
|
const [error, setError] = useState(false);
|
||||||
const [errorMessage, setErrorMessage] = useState("");
|
const [errorMessage, setErrorMessage] = useState("");
|
||||||
|
|
||||||
@ -41,6 +46,13 @@ export default function GlobalRanking({ page, country }: GlobalRankingProps) {
|
|||||||
|
|
||||||
const updatePage = useCallback(
|
const updatePage = useCallback(
|
||||||
(page: any) => {
|
(page: any) => {
|
||||||
|
const windowSize = document.documentElement.clientWidth;
|
||||||
|
if (windowSize < 768 && !isMobile) {
|
||||||
|
router.push(`/ranking/global/${page}?mobile=true`);
|
||||||
|
router.refresh();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
console.log("Switching page to", page);
|
console.log("Switching page to", page);
|
||||||
ScoreSaberAPI.fetchTopPlayers(page, country).then((response) => {
|
ScoreSaberAPI.fetchTopPlayers(page, country).then((response) => {
|
||||||
if (!response) {
|
if (!response) {
|
||||||
@ -65,7 +77,7 @@ export default function GlobalRanking({ page, country }: GlobalRankingProps) {
|
|||||||
);
|
);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
[country, pageInfo],
|
[country, isMobile, pageInfo, router],
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -117,41 +129,48 @@ export default function GlobalRanking({ page, country }: GlobalRankingProps) {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table className="hidden w-full table-auto border-spacing-2 border-none text-left md:table">
|
{!isMobile && (
|
||||||
<thead>
|
<table className="table w-full table-auto border-spacing-2 border-none text-left">
|
||||||
<tr>
|
<thead>
|
||||||
<th className="px-4 py-2">Rank</th>
|
<tr>
|
||||||
<th className="px-4 py-2">Profile</th>
|
<th className="px-4 py-2">Rank</th>
|
||||||
<th className="px-4 py-2">Performance Points</th>
|
<th className="px-4 py-2">Profile</th>
|
||||||
<th className="px-4 py-2">Total Plays</th>
|
<th className="px-4 py-2">Performance Points</th>
|
||||||
<th className="px-4 py-2">Total Ranked Plays</th>
|
<th className="px-4 py-2">Total Plays</th>
|
||||||
<th className="px-4 py-2">Avg Ranked Accuracy</th>
|
<th className="px-4 py-2">Total Ranked Plays</th>
|
||||||
</tr>
|
<th className="px-4 py-2">Avg Ranked Accuracy</th>
|
||||||
</thead>
|
|
||||||
<tbody className="border-none">
|
|
||||||
{players.map((player) => (
|
|
||||||
<tr key={player.rank} className="border-b border-gray-700">
|
|
||||||
<PlayerRanking
|
|
||||||
showCountryFlag={country ? false : true}
|
|
||||||
player={player}
|
|
||||||
/>
|
|
||||||
</tr>
|
</tr>
|
||||||
))}
|
</thead>
|
||||||
</tbody>
|
<tbody className="border-none">
|
||||||
</table>
|
{players.map((player) => (
|
||||||
|
<tr
|
||||||
|
key={player.rank}
|
||||||
|
className="border-b border-gray-700"
|
||||||
|
>
|
||||||
|
<PlayerRanking
|
||||||
|
showCountryFlag={country ? false : true}
|
||||||
|
player={player}
|
||||||
|
/>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
)}
|
||||||
|
|
||||||
<div className="flex flex-col gap-2 md:hidden">
|
{isMobile && (
|
||||||
{players.map((player) => (
|
<div className="flex flex-col gap-2">
|
||||||
<div
|
{players.map((player) => (
|
||||||
key={player.rank}
|
<div
|
||||||
className="flex flex-col gap-2 rounded-md bg-gray-700 hover:bg-gray-600"
|
key={player.rank}
|
||||||
>
|
className="flex flex-col gap-2 rounded-md bg-gray-700 hover:bg-gray-600"
|
||||||
<Link href={`/player/${player.id}/top/1`}>
|
>
|
||||||
<PlayerRankingMobile player={player} />
|
<Link href={`/player/${player.id}/top/1`}>
|
||||||
</Link>
|
<PlayerRankingMobile player={player} />
|
||||||
</div>
|
</Link>
|
||||||
))}
|
</div>
|
||||||
</div>
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* Pagination */}
|
{/* Pagination */}
|
||||||
<div className="flex w-full flex-row justify-center rounded-md bg-gray-800 md:flex-col">
|
<div className="flex w-full flex-row justify-center rounded-md bg-gray-800 md:flex-col">
|
||||||
|
Loading…
Reference in New Issue
Block a user