117 lines
3.1 KiB
TypeScript
117 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
|
|
import { ScoresaberPlayerScore } from "@/schemas/scoresaber/playerScore";
|
|
import { useSettingsStore } from "@/store/settingsStore";
|
|
import { SortType, SortTypes } from "@/types/SortTypes";
|
|
import useStore from "@/utils/useStore";
|
|
import { useRouter } from "next/navigation";
|
|
import Card from "../Card";
|
|
import Pagination from "../Pagination";
|
|
import Score from "./Score";
|
|
|
|
type ScoresProps = {
|
|
playerData: ScoresaberPlayer;
|
|
page: number;
|
|
totalPages: number;
|
|
sortType: SortType;
|
|
scores: ScoresaberPlayerScore[];
|
|
};
|
|
|
|
export default function Scores({
|
|
playerData,
|
|
page,
|
|
totalPages,
|
|
sortType,
|
|
scores,
|
|
}: ScoresProps) {
|
|
const settingsStore = useStore(useSettingsStore, (store) => store);
|
|
const playerId = playerData.id;
|
|
|
|
const router = useRouter();
|
|
|
|
const lastUsedSortType = settingsStore?.lastUsedSortType;
|
|
if (lastUsedSortType && lastUsedSortType != sortType) {
|
|
router.push(
|
|
`/player/${playerId}/scoresaber/${lastUsedSortType.value}/${page}`,
|
|
{
|
|
scroll: false,
|
|
},
|
|
);
|
|
}
|
|
|
|
function setPage(page: number, sortTypee?: SortType) {
|
|
if (sortTypee) {
|
|
if (sortTypee.value !== sortType.value) {
|
|
settingsStore?.setLastUsedSortType(sortTypee);
|
|
}
|
|
}
|
|
router.push(
|
|
`/player/${playerId}/scoresaber/${
|
|
sortTypee ? sortTypee.value : sortType.value
|
|
}/${page}`,
|
|
{
|
|
scroll: false,
|
|
},
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Card className="mt-2 w-full items-center md:flex-col">
|
|
{/* Sort */}
|
|
<div className="m-2 w-full text-sm">
|
|
<div className="flex justify-center gap-2">
|
|
{Object.values(SortTypes).map((sortTypee) => {
|
|
return (
|
|
<button
|
|
key={sortType.value}
|
|
className={`flex transform-gpu flex-row items-center gap-1 rounded-md p-[0.35rem] transition-all hover:opacity-80 ${
|
|
sortType.value === sortTypee.value
|
|
? "bg-blue-500"
|
|
: "bg-gray-500"
|
|
}`}
|
|
onClick={() => {
|
|
setPage(1, sortTypee);
|
|
}}
|
|
>
|
|
{sortTypee.icon}
|
|
<p>{sortTypee.name}</p>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-full p-1">
|
|
<div className="grid grid-cols-1 divide-y divide-gray-500">
|
|
{scores.map((scoreData, id) => {
|
|
const { score, leaderboard } = scoreData;
|
|
|
|
return (
|
|
<Score
|
|
key={id}
|
|
player={playerData}
|
|
score={score}
|
|
leaderboard={leaderboard}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Pagination */}
|
|
<div className="flex w-full flex-row justify-center rounded-md bg-gray-800 md:flex-col">
|
|
<div className="p-3">
|
|
<Pagination
|
|
currentPage={page}
|
|
totalPages={totalPages}
|
|
onPageChange={(page) => {
|
|
setPage(page);
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|