feat(leaderboard): add leaderboard functionaltiy
This commit is contained in:
shafin-r
@ -22,7 +22,7 @@ import { useNavigate } from "react-router-dom";
|
||||
export const Practice = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<main className="min-h-screen max-w-7xl mx-auto px-8 sm:px-6 lg:px-8 py-8 space-y-4">
|
||||
<main className="h-fit max-w-7xl mx-auto px-8 sm:px-6 lg:px-8 py-8 space-y-4">
|
||||
<header className="flex justify-between items-center">
|
||||
<div className="w-fit bg-linear-to-br from-purple-500 to-purple-600 p-3 rounded-2xl">
|
||||
<BookOpen size={20} color="white" />
|
||||
|
||||
@ -3,7 +3,7 @@ import firstTrophy from "../../assets/icons/first_trophy.png";
|
||||
import secondTrophy from "../../assets/icons/second_trophy.png";
|
||||
import thirdTrophy from "../../assets/icons/third_trophy.png";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
// import {
|
||||
// Card,
|
||||
// CardHeader,
|
||||
@ -27,34 +27,81 @@ import {
|
||||
DropdownMenuTrigger,
|
||||
} from "../../components/ui/dropdown-menu";
|
||||
import { formatTimeFilter, getRandomColor } from "../../lib/utils";
|
||||
import { Avatar, AvatarFallback } from "../../components/ui/avatar";
|
||||
import {
|
||||
Avatar,
|
||||
AvatarFallback,
|
||||
AvatarImage,
|
||||
} from "../../components/ui/avatar";
|
||||
import { Zap } from "lucide-react";
|
||||
import type { Leaderboard } from "../../types/leaderboard";
|
||||
import { api } from "../../utils/api";
|
||||
import { Card, CardContent } from "../../components/ui/card";
|
||||
import { LeaderboardRowSkeleton } from "../../components/LeaderboardSkeleton";
|
||||
|
||||
export const Rewards = () => {
|
||||
const user = useAuthStore((state) => state.user);
|
||||
const [time, setTime] = useState("bottom");
|
||||
|
||||
const leaderboard = [
|
||||
{ id: 1, name: "Alice", xp: 587 },
|
||||
{ id: 2, name: "Bob", xp: 560 },
|
||||
{ id: 3, name: "Charlie", xp: 540 },
|
||||
{ id: 4, name: "David", xp: 510 },
|
||||
{ id: 5, name: "Emma", xp: 495 },
|
||||
];
|
||||
const [leaderboard, setLeaderboard] = useState<Leaderboard>();
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchLeaderboard = async () => {
|
||||
if (!user) return;
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
const authStorage = localStorage.getItem("auth-storage");
|
||||
if (!authStorage) return;
|
||||
|
||||
const parsed = JSON.parse(authStorage) as {
|
||||
state?: { token?: string };
|
||||
};
|
||||
|
||||
const token = parsed.state?.token;
|
||||
if (!token) return;
|
||||
|
||||
const response = await api.fetchLeaderboard(token);
|
||||
|
||||
setLeaderboard(response);
|
||||
setLoading(false);
|
||||
} catch (error) {
|
||||
setLoading(false);
|
||||
console.error("Error fetching leaderboard: " + error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchLeaderboard();
|
||||
}, [user]);
|
||||
|
||||
const trophies = [firstTrophy, secondTrophy, thirdTrophy];
|
||||
|
||||
const isTopThree = (leaderboard?.user_rank?.rank ?? Infinity) < 3;
|
||||
|
||||
return (
|
||||
<main className="flex flex-col gap-8 items-start min-h-screen mx-auto px-8 sm:px-6 lg:px-8 py-8">
|
||||
<main className="flex flex-col gap-8 items-start mx-auto sm:px-6 lg:px-8 py-8">
|
||||
<header className="flex flex-col items-center h-fit w-full gap-3">
|
||||
<h1 className="font-satoshi-black text-3xl">Leaderboards</h1>
|
||||
<p className="font-satoshi-medium text-md text-gray-500">
|
||||
Complete lessons to rise to the top.{" "}
|
||||
<span className="underline">Start a lesson.</span>
|
||||
</p>
|
||||
{loading ? (
|
||||
<div className="animate-pulse">
|
||||
<div className="h-4 w-60 bg-gray-200 rounded" />
|
||||
</div>
|
||||
) : (
|
||||
<p className="font-satoshi-medium text-md text-gray-500">
|
||||
Don't stop now! You're{" "}
|
||||
<span className="text-purple-400">
|
||||
#{leaderboard?.user_rank.rank}
|
||||
</span>{" "}
|
||||
in XP.
|
||||
</p>
|
||||
)}
|
||||
</header>
|
||||
<section className="w-full">
|
||||
<Tabs defaultValue="xp" className="space-y-6">
|
||||
<TabsList className="bg-transparent p-0 w-full justify-between ">
|
||||
<section className="w-full px-7">
|
||||
<Tabs
|
||||
defaultValue="xp"
|
||||
className="space-y-6 h-[calc(100vh-250px)] flex flex-col"
|
||||
>
|
||||
<TabsList className="bg-transparent p-0 w-full justify-between shrink-0">
|
||||
<TabsTrigger
|
||||
value="xp"
|
||||
className="font-satoshi-bold px-4 tracking-wide text-md rounded-none border-b-2 data-[state=active]:font-satoshi-medium data-[state=active]:border-b-indigo-800 data-[state=active]:text-indigo-800"
|
||||
@ -100,49 +147,64 @@ export const Rewards = () => {
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</TabsList>
|
||||
<TabsContent value="xp" className="space-y-6">
|
||||
{leaderboard.map((user, index) => {
|
||||
const isTopThree = index < 3;
|
||||
<TabsContent
|
||||
value="xp"
|
||||
className="flex-1 overflow-y-auto space-y-6 pb-8"
|
||||
>
|
||||
{loading ? (
|
||||
<div className="space-y-6">
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<LeaderboardRowSkeleton key={i} />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
leaderboard?.top_users.map((user, index) => {
|
||||
const isTopThree = index < 3;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={user.id}
|
||||
className="flex justify-between items-center"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
{isTopThree ? (
|
||||
<img
|
||||
src={trophies[index]}
|
||||
alt={`trophy_${index + 1}`}
|
||||
className="w-12 h-12"
|
||||
/>
|
||||
) : (
|
||||
<span className="w-12 text-center font-satoshi-bold text-gray-400">
|
||||
{index + 1}
|
||||
</span>
|
||||
)}
|
||||
return (
|
||||
<div
|
||||
key={user.user_id}
|
||||
className="flex justify-between items-center"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
{isTopThree ? (
|
||||
<img
|
||||
src={trophies[index]}
|
||||
alt={`trophy_${index + 1}`}
|
||||
className="w-12 h-12"
|
||||
/>
|
||||
) : (
|
||||
<span className="w-12 text-center font-satoshi-bold text-gray-400">
|
||||
{index + 1}
|
||||
</span>
|
||||
)}
|
||||
|
||||
<Avatar className={`p-6 ${getRandomColor()}`}>
|
||||
<AvatarFallback className="text-white font-satoshi-bold">
|
||||
{user.name.slice(0, 1).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<Avatar className={`p-6 ${getRandomColor()}`}>
|
||||
<AvatarImage src={user.avatar_url} />
|
||||
<AvatarFallback className="text-white font-satoshi-bold">
|
||||
{user.name.slice(0, 1).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
|
||||
<p className="font-satoshi-medium text-gray-600">
|
||||
{user.name}
|
||||
</p>
|
||||
<p className="font-satoshi-medium text-gray-600">
|
||||
{user.name}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
<p className="font-satoshi-medium">{user.total_xp}</p>
|
||||
<Zap size={20} color="darkgreen" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
<p className="font-satoshi-medium">{user.xp}</p>
|
||||
<Zap size={20} color="darkgreen" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
);
|
||||
})
|
||||
)}
|
||||
</TabsContent>
|
||||
<TabsContent value="questions" className="space-y-6">
|
||||
{leaderboard.map((user, index) => {
|
||||
<TabsContent
|
||||
value="questions"
|
||||
className="flex-1 overflow-y-auto space-y-6"
|
||||
>
|
||||
{/* {leaderboard.map((user, index) => {
|
||||
const isTopThree = index < 3;
|
||||
|
||||
return (
|
||||
@ -180,10 +242,13 @@ export const Rewards = () => {
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
})} */}
|
||||
</TabsContent>
|
||||
<TabsContent value="streak" className="space-y-6">
|
||||
{leaderboard.map((user, index) => {
|
||||
<TabsContent
|
||||
value="streak"
|
||||
className="flex-1 overflow-y-auto space-y-6"
|
||||
>
|
||||
{/* {leaderboard.map((user, index) => {
|
||||
const isTopThree = index < 3;
|
||||
|
||||
return (
|
||||
@ -221,10 +286,66 @@ export const Rewards = () => {
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
})} */}
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</section>
|
||||
<Card className="fixed bottom-19 bg-linear-to-br from-purple-500 to-purple-600 w-full rounded-full py-4">
|
||||
<CardContent className="flex justify-between items-center">
|
||||
{loading ? (
|
||||
<div className="flex justify-between items-center animate-pulse w-full">
|
||||
<div className="flex items-center gap-3">
|
||||
{/* Rank / Trophy */}
|
||||
<div className="w-12 h-12 rounded-full bg-gray-200" />
|
||||
|
||||
{/* Avatar */}
|
||||
<div className="w-12 h-12 rounded-full bg-gray-300" />
|
||||
|
||||
{/* Name */}
|
||||
<div className="h-4 w-32 bg-gray-200 rounded" />
|
||||
</div>
|
||||
|
||||
{/* XP */}
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="h-4 w-10 bg-gray-200 rounded" />
|
||||
<div className="w-5 h-5 rounded bg-gray-200" />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex items-center gap-3">
|
||||
{isTopThree ? (
|
||||
<img
|
||||
src={trophies[leaderboard?.user_rank?.rank ?? Infinity]}
|
||||
alt={`trophy_${leaderboard?.user_rank?.rank ?? Infinity}`}
|
||||
className="w-12 h-12"
|
||||
/>
|
||||
) : (
|
||||
<span className="w-12 text-center font-satoshi-bold text-white">
|
||||
{leaderboard?.user_rank?.rank ?? Infinity}
|
||||
</span>
|
||||
)}
|
||||
<Avatar className={`p-6 ${getRandomColor()}`}>
|
||||
<AvatarImage src={leaderboard?.user_rank.avatar_url} />
|
||||
<AvatarFallback className="text-white font-satoshi-bold">
|
||||
{leaderboard?.user_rank.name.slice(0, 1).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<p className="font-satoshi-bold text-white">
|
||||
{leaderboard?.user_rank.name}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
<p className="font-satoshi-medium text-white">
|
||||
{leaderboard?.user_rank.total_xp}
|
||||
</p>
|
||||
<Zap size={20} color="white" />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user