Fascinated/scoresaber-reloadedv3
Archived
1
1
Fork 0
Code Issues 1 Pull Requests 2 Actions Packages Activity

add dropdown leaderboard animation
All checks were successful
Deploy SSR / deploy (push) Successful in 1m11s
Details

Browse Source
This commit is contained in:
Lee 2024-09-12 22:34:07 +01:00
parent 14845c0377
commit 39026d9a32
1 changed files with 17 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/leaderboard/leaderboard-scores.tsx
View File

@ -5,8 +5,8 @@ import ScoreSaberLeaderboard from "@/common/data-fetcher/types/scoresaber/scores
import ScoreSaberLeaderboardScoresPage from "@/common/data-fetcher/types/scoresaber/scoresaber-leaderboard-scores-page"; import ScoreSaberLeaderboardScoresPage from "@/common/data-fetcher/types/scoresaber/scoresaber-leaderboard-scores-page";
import useWindowDimensions from "@/hooks/use-window-dimensions"; import useWindowDimensions from "@/hooks/use-window-dimensions";
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import { motion, useAnimation } from "framer-motion"; import { motion } from "framer-motion";
import { useCallback, useEffect, useState } from "react"; import { useEffect, useState } from "react";
import Card from "../card"; import Card from "../card";
import Pagination from "../input/pagination"; import Pagination from "../input/pagination";
import LeaderboardScore from "./leaderboard-score"; import LeaderboardScore from "./leaderboard-score";
@ -17,7 +17,6 @@ type Props = {
export default function LeaderboardScores({ leaderboard }: Props) { export default function LeaderboardScores({ leaderboard }: Props) {
const { width } = useWindowDimensions(); const { width } = useWindowDimensions();
const controls = useAnimation();
const [currentPage, setCurrentPage] = useState(1); const [currentPage, setCurrentPage] = useState(1);
const [currentScores, setCurrentScores] = useState<ScoreSaberLeaderboardScoresPage | undefined>(); const [currentScores, setCurrentScores] = useState<ScoreSaberLeaderboardScoresPage | undefined>();
@ -33,23 +32,12 @@ export default function LeaderboardScores({ leaderboard }: Props) {
staleTime: 30 * 1000, // Cache data for 30 seconds staleTime: 30 * 1000, // Cache data for 30 seconds
}); });
const handleAnimation = useCallback(() => {
controls.set({ x: -50, opacity: 0 });
controls.start({ x: 0, opacity: 1, transition: { duration: 0.25 } });
}, [controls]);
useEffect(() => { useEffect(() => {
if (scores) { if (scores) {
setCurrentScores(scores); setCurrentScores(scores);
} }
}, [scores]); }, [scores]);
useEffect(() => {
if (scores) {
handleAnimation();
}
}, [scores, handleAnimation]);
useEffect(() => { useEffect(() => {
refetch(); refetch();
}, [leaderboard, currentPage, refetch]); }, [leaderboard, currentPage, refetch]);
@ -59,27 +47,27 @@ export default function LeaderboardScores({ leaderboard }: Props) {
} }
return ( return (
<Card className="flex gap-2"> <motion.div initial={{ opacity: 0, y: -50 }} animate={{ opacity: 1, y: 0 }}>
<div className="text-center"> <Card className="flex gap-2">
{isError && <p>Oopsies! Something went wrong.</p>} <div className="text-center">
{currentScores.scores.length === 0 && <p>No scores found. Invalid Page?</p>} {isError && <p>Oopsies! Something went wrong.</p>}
</div> {currentScores.scores.length === 0 && <p>No scores found. Invalid Page?</p>}
</div>
<motion.div animate={controls}>
<div className="grid min-w-full grid-cols-1 divide-y divide-border"> <div className="grid min-w-full grid-cols-1 divide-y divide-border">
{currentScores.scores.map((playerScore, index) => ( {currentScores.scores.map((playerScore, index) => (
<LeaderboardScore key={index} score={playerScore} leaderboard={leaderboard} /> <LeaderboardScore key={index} score={playerScore} leaderboard={leaderboard} />
))} ))}
</div> </div>
</motion.div>
<Pagination <Pagination
mobilePagination={width < 768} mobilePagination={width < 768}
page={currentPage} page={currentPage}
totalPages={Math.ceil(currentScores.metadata.total / currentScores.metadata.itemsPerPage)} totalPages={Math.ceil(currentScores.metadata.total / currentScores.metadata.itemsPerPage)}
loadingPage={isLoading ? currentPage : undefined} loadingPage={isLoading ? currentPage : undefined}
onPageChange={setCurrentPage} onPageChange={setCurrentPage}
/> />
</Card> </Card>
</motion.div>
); );
} }