added score sorting

This commit is contained in:
Lee 2023-10-21 01:58:04 +01:00
parent 1b8069ef00
commit 8a5eaa0646
2 changed files with 98 additions and 13 deletions

@ -12,8 +12,13 @@ import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
import { ScoresaberPlayerScore } from "@/schemas/scoresaber/playerScore"; import { ScoresaberPlayerScore } from "@/schemas/scoresaber/playerScore";
import { formatNumber } from "@/utils/number"; import { formatNumber } from "@/utils/number";
import { fetchScores, getPlayerInfo } from "@/utils/scoresaber/api"; import { fetchScores, getPlayerInfo } from "@/utils/scoresaber/api";
import { GlobeAsiaAustraliaIcon } from "@heroicons/react/20/solid"; import {
ClockIcon,
GlobeAsiaAustraliaIcon,
TrophyIcon,
} from "@heroicons/react/20/solid";
import Image from "next/image"; import Image from "next/image";
import { useRouter, useSearchParams } from "next/navigation";
import { useCallback, useEffect, useState } from "react"; import { useCallback, useEffect, useState } from "react";
import ReactCountryFlag from "react-country-flag"; import ReactCountryFlag from "react-country-flag";
@ -21,7 +26,7 @@ type PageInfo = {
loading: boolean; loading: boolean;
page: number; page: number;
totalPages: number; totalPages: number;
sortType: string; sortType: SortType;
scores: ScoresaberPlayerScore[]; scores: ScoresaberPlayerScore[];
}; };
@ -30,7 +35,46 @@ type PlayerInfo = {
player: ScoresaberPlayer | undefined; player: ScoresaberPlayer | undefined;
}; };
type SortType = {
name: string;
value: string;
icon: JSX.Element;
};
const sortTypes: { [key: string]: SortType } = {
top: {
name: "Top Scores",
value: "top",
icon: <TrophyIcon width={20} height={20} />,
},
recent: {
name: "Recent Scores",
value: "recent",
icon: <ClockIcon width={20} height={20} />,
},
};
const DEFAULT_SORT_TYPE = sortTypes.top;
export default function Player({ params }: { params: { id: string } }) { export default function Player({ params }: { params: { id: string } }) {
const searchParams = useSearchParams();
const router = useRouter();
let page;
const pageString = searchParams.get("page");
if (pageString == null) {
page = 1;
} else {
page = Number.parseInt(pageString) || 1;
}
let sortType;
const sortTypeString = searchParams.get("sort");
if (sortTypeString == null) {
sortType = DEFAULT_SORT_TYPE;
} else {
sortType = sortTypes[sortTypeString] || DEFAULT_SORT_TYPE;
}
const [error, setError] = useState(false); const [error, setError] = useState(false);
const [errorMessage, setErrorMessage] = useState(""); const [errorMessage, setErrorMessage] = useState("");
@ -41,16 +85,16 @@ export default function Player({ params }: { params: { id: string } }) {
const [scores, setScores] = useState<PageInfo>({ const [scores, setScores] = useState<PageInfo>({
loading: true, loading: true,
page: 1, page: page,
totalPages: 1, totalPages: 1,
sortType: "recent", sortType: sortType,
scores: [], scores: [],
}); });
const updateScoresPage = useCallback( const updateScoresPage = useCallback(
(page: any) => { (sortType: SortType, page: any) => {
console.log("Switching page to", page); console.log("Switching page to", page);
fetchScores(params.id, page, scores.sortType, 10).then( fetchScores(params.id, page, sortType.value, 10).then(
(scoresResponse) => { (scoresResponse) => {
if (!scoresResponse) { if (!scoresResponse) {
setError(true); setError(true);
@ -64,11 +108,25 @@ export default function Player({ params }: { params: { id: string } }) {
totalPages: scoresResponse.pageInfo.totalPages, totalPages: scoresResponse.pageInfo.totalPages,
loading: false, loading: false,
page: page, page: page,
sortType: sortType,
}); });
if (page > 1) {
router.push(
`/player/${params.id}?page=${page}&sort=${sortType.value}`,
{
scroll: false,
},
);
} else {
router.push(`/player/${params.id}?sort=${sortType.value}`, {
scroll: false,
});
}
}, },
); );
}, },
[params.id, scores], [params.id, router, scores],
); );
useEffect(() => { useEffect(() => {
@ -89,7 +147,7 @@ export default function Player({ params }: { params: { id: string } }) {
return; return;
} }
setPlayer({ ...player, player: playerResponse, loading: false }); setPlayer({ ...player, player: playerResponse, loading: false });
updateScoresPage(1); updateScoresPage(scores.sortType, 1);
}); });
}, [error, params.id, player, scores, updateScoresPage]); }, [error, params.id, player, scores, updateScoresPage]);
@ -191,7 +249,31 @@ export default function Player({ params }: { params: { id: string } }) {
</Card> </Card>
{/* Scores */} {/* Scores */}
<Card className="mt-2 w-full xs:flex-col"> <Card className="mt-2 w-full items-center xs:flex-col">
{/* Sort */}
<div className="m-2 w-full text-sm">
<div className="flex justify-center gap-2">
{Object.values(sortTypes).map((sortType) => {
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 ${
scores.sortType.value === sortType.value
? "bg-blue-500"
: "bg-gray-500"
}`}
onClick={() => {
updateScoresPage(sortType, 1);
}}
>
{sortType.icon}
<p>{sortType.name}</p>
</button>
);
})}
</div>
</div>
<div className="p-1"> <div className="p-1">
{scores.loading ? ( {scores.loading ? (
<div className="flex justify-center"> <div className="flex justify-center">
@ -221,7 +303,7 @@ export default function Player({ params }: { params: { id: string } }) {
currentPage={scores.page} currentPage={scores.page}
totalPages={scores.totalPages} totalPages={scores.totalPages}
onPageChange={(page) => { onPageChange={(page) => {
updateScoresPage(page); updateScoresPage(scores.sortType, page);
}} }}
/> />
</div> </div>

@ -60,9 +60,13 @@ export default function Player({ params }: { params: { id: string } }) {
page: page, page: page,
}); });
if (page > 1) { if (page > 1) {
router.push(`/ranking/global?page=${page}`); router.push(`/ranking/global?page=${page}`, {
scroll: false,
});
} else { } else {
router.push(`/ranking/global`); router.push(`/ranking/global`, {
scroll: false,
});
} }
}); });
}, },
@ -165,7 +169,6 @@ export default function Player({ params }: { params: { id: string } }) {
<Pagination <Pagination
currentPage={pageInfo.page} currentPage={pageInfo.page}
totalPages={pageInfo.totalPages} totalPages={pageInfo.totalPages}
loadingPage={pageInfo.loadingNextPage}
onPageChange={(page) => { onPageChange={(page) => {
updatePage(page); updatePage(page);
}} }}