feat(frontend): Hide 'Most Active Fans' from leaderboards
Some checks are pending
Deploy Elmeg / deploy (push) Waiting to run

This commit is contained in:
fullsizemalt 2025-12-21 01:05:14 -08:00
parent 7a066995e8
commit d09bcef56c

View file

@ -3,9 +3,8 @@
import { useEffect, useState } from "react"
import { getApiUrl } from "@/lib/api-config"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import Link from "next/link"
import { Star, Trophy, Users, MapPin, Music } from "lucide-react"
import { Star, MapPin, Music } from "lucide-react"
interface TopShow {
show: {
@ -34,33 +33,22 @@ interface TopVenue {
review_count: number
}
interface ActiveUser {
profile: {
id: number
username: string
display_name: string
}
review_count: number
}
export default function LeaderboardsPage() {
const [topShows, setTopShows] = useState<TopShow[]>([])
const [topVenues, setTopVenues] = useState<TopVenue[]>([])
const [activeUsers, setActiveUsers] = useState<ActiveUser[]>([])
const [loading, setLoading] = useState(true)
useEffect(() => {
const fetchData = async () => {
try {
const [showsRes, venuesRes, usersRes] = await Promise.all([
const [showsRes, venuesRes] = await Promise.all([
fetch(`${getApiUrl()}/leaderboards/shows/top`),
fetch(`${getApiUrl()}/leaderboards/venues/top`),
fetch(`${getApiUrl()}/leaderboards/users/active`)
fetch(`${getApiUrl()}/leaderboards/venues/top`)
])
setTopShows(await showsRes.json())
setTopVenues(await venuesRes.json())
setActiveUsers(await usersRes.json())
} catch (error) {
console.error("Failed to fetch leaderboards:", error)
} finally {
@ -78,11 +66,11 @@ export default function LeaderboardsPage() {
<div className="flex flex-col gap-2">
<h1 className="text-3xl font-bold tracking-tight">Leaderboards</h1>
<p className="text-muted-foreground">
Top rated shows, venues, and our most active community members.
Top rated shows and venues.
</p>
</div>
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-2">
{/* Top Shows */}
<Card>
<CardHeader>
@ -153,39 +141,6 @@ export default function LeaderboardsPage() {
</div>
</CardContent>
</Card>
{/* Active Users */}
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Users className="h-5 w-5 text-purple-500" />
Most Active Fans
</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-4">
{activeUsers.map((item, i) => (
<div key={item.profile.id} className="flex items-center justify-between">
<div className="flex items-center gap-3">
<span className={`flex h-6 w-6 items-center justify-center rounded-full text-xs font-bold ${i === 0 ? "bg-yellow-100 text-yellow-700" :
i === 1 ? "bg-gray-100 text-gray-700" :
i === 2 ? "bg-orange-100 text-orange-700" : "text-muted-foreground"
}`}>
{i + 1}
</span>
<Link href={`/users/${item.profile.id}`} className="font-medium hover:underline">
{item.profile.display_name || item.profile.username}
</Link>
</div>
<div className="text-sm">
<span className="font-bold">{item.review_count}</span>
<span className="text-muted-foreground text-xs ml-1">reviews</span>
</div>
</div>
))}
</div>
</CardContent>
</Card>
</div>
</div>
)