109 lines
3.6 KiB
TypeScript
109 lines
3.6 KiB
TypeScript
// src/components/Leaderboard.tsx
|
|
import React, { useState, useEffect } from 'react';
|
|
import * as apiClient from '../services/apiClient';
|
|
import { LeaderboardUser } from '../types';
|
|
import { logger } from '../services/logger.client';
|
|
import { Award, Crown, ShieldAlert } from 'lucide-react';
|
|
|
|
export const Leaderboard: React.FC = () => {
|
|
const [leaderboard, setLeaderboard] = useState<LeaderboardUser[]>([]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
const loadLeaderboard = async () => {
|
|
setIsLoading(true);
|
|
try {
|
|
const response = await apiClient.fetchLeaderboard(10); // Fetch top 10 users
|
|
if (!response.ok) {
|
|
throw new Error('Failed to fetch leaderboard data.');
|
|
}
|
|
const data: LeaderboardUser[] = await response.json();
|
|
setLeaderboard(data);
|
|
} catch (err) {
|
|
const errorMessage = err instanceof Error ? err.message : 'An unknown error occurred.';
|
|
logger.error('Error fetching leaderboard:', { error: err });
|
|
setError(errorMessage);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
loadLeaderboard();
|
|
}, []);
|
|
|
|
const getRankIcon = (rank: string) => {
|
|
switch (rank) {
|
|
case '1':
|
|
return <Crown className="w-6 h-6 text-yellow-400" />;
|
|
case '2':
|
|
return <Crown className="w-6 h-6 text-gray-400" />;
|
|
case '3':
|
|
return <Crown className="w-6 h-6 text-yellow-600" />;
|
|
default:
|
|
return <span className="font-semibold text-gray-500 dark:text-gray-400">{rank}</span>;
|
|
}
|
|
};
|
|
|
|
if (isLoading) {
|
|
return <div className="text-center p-8">Loading Leaderboard...</div>;
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div
|
|
className="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 rounded-md"
|
|
role="alert"
|
|
>
|
|
<div className="flex items-center">
|
|
<ShieldAlert className="h-6 w-6 mr-3" />
|
|
<p className="font-bold">Error: {error}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6">
|
|
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
|
|
<Award className="w-6 h-6 mr-2 text-blue-500" />
|
|
Top Users
|
|
</h2>
|
|
{leaderboard.length === 0 ? (
|
|
<p className="text-gray-500 dark:text-gray-400">
|
|
The leaderboard is currently empty. Be the first to earn points!
|
|
</p>
|
|
) : (
|
|
<ol className="space-y-4">
|
|
{leaderboard.map((user) => (
|
|
<li
|
|
key={user.user_id}
|
|
className="flex items-center space-x-4 p-3 bg-gray-50 dark:bg-gray-700 rounded-lg transition hover:bg-gray-100 dark:hover:bg-gray-600"
|
|
>
|
|
<div className="shrink-0 w-8 text-center">{getRankIcon(user.rank)}</div>
|
|
<img
|
|
src={
|
|
user.avatar_url ||
|
|
`https://api.dicebear.com/8.x/initials/svg?seed=${user.full_name || user.user_id}`
|
|
}
|
|
alt={user.full_name || 'User Avatar'}
|
|
className="w-12 h-12 rounded-full object-cover"
|
|
/>
|
|
<div className="flex-1">
|
|
<p className="font-semibold text-gray-800 dark:text-gray-100">
|
|
{user.full_name || 'Anonymous User'}
|
|
</p>
|
|
</div>
|
|
<div className="text-lg font-bold text-blue-600 dark:text-blue-400">
|
|
{user.points} pts
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ol>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Leaderboard;
|