61 lines
2.5 KiB
TypeScript
61 lines
2.5 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useState } from "react"
|
|
import { Card, CardContent } from "@/components/ui/card"
|
|
import { Calendar, MapPin } from "lucide-react"
|
|
import Link from "next/link"
|
|
import { getApiUrl } from "@/lib/api-config"
|
|
|
|
export function UserAttendanceList({ userId }: { userId: number }) {
|
|
const [shows, setShows] = useState<any[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
useEffect(() => {
|
|
const token = localStorage.getItem("token")
|
|
if (!token) return
|
|
|
|
fetch(`${getApiUrl()}/users/${userId}/attendance`, {
|
|
headers: { Authorization: `Bearer ${token}` }
|
|
})
|
|
.then(res => res.json())
|
|
.then(data => setShows(data))
|
|
.catch(err => console.error(err))
|
|
.finally(() => setLoading(false))
|
|
}, [userId])
|
|
|
|
if (loading) return <div>Loading attendance...</div>
|
|
|
|
if (shows.length === 0) {
|
|
return (
|
|
<div className="text-center py-12">
|
|
<Calendar className="h-12 w-12 text-muted-foreground/30 mx-auto mb-4" />
|
|
<p className="text-muted-foreground font-medium">No shows attended yet</p>
|
|
<p className="text-sm text-muted-foreground/70 mt-1">Mark shows as attended to track your concert history</p>
|
|
<Link href="/shows" className="text-primary hover:underline text-sm mt-4 inline-block">Browse shows</Link>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{shows.map((show) => (
|
|
<Link key={show.id} href={`/shows/${show.id}`}>
|
|
<Card className="hover:bg-muted/50 transition-colors">
|
|
<CardContent className="p-4 flex items-center justify-between">
|
|
<div className="flex items-center gap-4">
|
|
<Calendar className="h-4 w-4 text-muted-foreground" />
|
|
<span className="font-medium">{new Date(show.date).toLocaleDateString()}</span>
|
|
</div>
|
|
{show.venue && (
|
|
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
|
<MapPin className="h-3 w-3" />
|
|
{show.venue.name}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|