runfoo-org/elmeg-demo
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
fullsizemalt 2025-12-21 01:05:14 -08:00
parent 7a066995e8
commit d09bcef56c
1 changed files with 5 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
frontend/app/leaderboards/page.tsx
View file

@ -3,9 +3,8 @@
import { useEffect, useState } from "react" import { useEffect, useState } from "react"
import { getApiUrl } from "@/lib/api-config" import { getApiUrl } from "@/lib/api-config"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import Link from "next/link" import Link from "next/link"
import { Star, Trophy, Users, MapPin, Music } from "lucide-react" import { Star, MapPin, Music } from "lucide-react"
interface TopShow { interface TopShow {
show: { show: {
@ -34,33 +33,22 @@ interface TopVenue {
review_count: number review_count: number
} }
interface ActiveUser {
profile: {
id: number
username: string
display_name: string
}
review_count: number
}
export default function LeaderboardsPage() { export default function LeaderboardsPage() {
const [topShows, setTopShows] = useState<TopShow[]>([]) const [topShows, setTopShows] = useState<TopShow[]>([])
const [topVenues, setTopVenues] = useState<TopVenue[]>([]) const [topVenues, setTopVenues] = useState<TopVenue[]>([])
const [activeUsers, setActiveUsers] = useState<ActiveUser[]>([])
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
useEffect(() => { useEffect(() => {
const fetchData = async () => { const fetchData = async () => {
try { try {
const [showsRes, venuesRes, usersRes] = await Promise.all([ const [showsRes, venuesRes] = await Promise.all([
fetch(`${getApiUrl()}/leaderboards/shows/top`), fetch(`${getApiUrl()}/leaderboards/shows/top`),
fetch(`${getApiUrl()}/leaderboards/venues/top`), fetch(`${getApiUrl()}/leaderboards/venues/top`)
fetch(`${getApiUrl()}/leaderboards/users/active`)
]) ])
setTopShows(await showsRes.json()) setTopShows(await showsRes.json())
setTopVenues(await venuesRes.json()) setTopVenues(await venuesRes.json())
setActiveUsers(await usersRes.json())
} catch (error) { } catch (error) {
console.error("Failed to fetch leaderboards:", error) console.error("Failed to fetch leaderboards:", error)
} finally { } finally {
@ -78,11 +66,11 @@ export default function LeaderboardsPage() {
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<h1 className="text-3xl font-bold tracking-tight">Leaderboards</h1> <h1 className="text-3xl font-bold tracking-tight">Leaderboards</h1>
<p className="text-muted-foreground"> <p className="text-muted-foreground">
Top rated shows, venues, and our most active community members. Top rated shows and venues.
</p> </p>
</div> </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 */} {/* Top Shows */}
<Card> <Card>
<CardHeader> <CardHeader>
@ -153,39 +141,6 @@ export default function LeaderboardsPage() {
</div> </div>
</CardContent> </CardContent>
</Card> </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>
</div> </div>
) )