386 lines
15 KiB
TypeScript
386 lines
15 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useState, Suspense, useMemo } from "react"
|
|
import { getApiUrl } from "@/lib/api-config"
|
|
import { Loader2, Calendar, Music2, Clock, Heart, Users, X } from "lucide-react"
|
|
import { Skeleton } from "@/components/ui/skeleton"
|
|
import { useSearchParams, useRouter, usePathname } from "next/navigation"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import Link from "next/link"
|
|
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
|
|
import { DateGroupedList } from "@/components/shows/date-grouped-list"
|
|
import { VERTICALS } from "@/config/verticals"
|
|
import { Card, CardContent } from "@/components/ui/card"
|
|
|
|
interface Show {
|
|
id: number
|
|
slug?: string
|
|
date: string
|
|
youtube_link?: string
|
|
vertical?: {
|
|
name: string
|
|
slug: string
|
|
}
|
|
venue: {
|
|
id: number
|
|
name: string
|
|
city: string
|
|
state: string
|
|
}
|
|
}
|
|
|
|
interface VerticalWithCount {
|
|
slug: string
|
|
name: string
|
|
showCount?: number
|
|
}
|
|
|
|
function ShowsContent() {
|
|
const searchParams = useSearchParams()
|
|
const router = useRouter()
|
|
const pathname = usePathname()
|
|
|
|
// Parse query params
|
|
const bandsParam = searchParams.get("bands")
|
|
const viewParam = searchParams.get("view") || "recent"
|
|
|
|
const initialBands = bandsParam ? bandsParam.split(",") : []
|
|
|
|
const [shows, setShows] = useState<Show[]>([])
|
|
const [upcomingShows, setUpcomingShows] = useState<Show[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
const [selectedBands, setSelectedBands] = useState<string[]>(initialBands)
|
|
const [activeView, setActiveView] = useState(viewParam)
|
|
const [bandCounts, setBandCounts] = useState<Record<string, number>>({})
|
|
|
|
// Fetch band counts on mount
|
|
useEffect(() => {
|
|
fetch(`${getApiUrl()}/verticals/`)
|
|
.then(res => res.json())
|
|
.then(verticals => {
|
|
// We'll get counts from the shows data instead
|
|
})
|
|
.catch(console.error)
|
|
}, [])
|
|
|
|
// Update URL when filters change
|
|
const updateFilters = (bands: string[], view: string) => {
|
|
const params = new URLSearchParams()
|
|
if (bands.length > 0) {
|
|
params.set("bands", bands.join(","))
|
|
}
|
|
if (view !== "recent") {
|
|
params.set("view", view)
|
|
}
|
|
const queryString = params.toString()
|
|
router.push(`${pathname}${queryString ? `?${queryString}` : ''}`)
|
|
}
|
|
|
|
const toggleBand = (slug: string) => {
|
|
const newBands = selectedBands.includes(slug)
|
|
? selectedBands.filter(s => s !== slug)
|
|
: [...selectedBands, slug]
|
|
setSelectedBands(newBands)
|
|
updateFilters(newBands, activeView)
|
|
}
|
|
|
|
const clearBandFilters = () => {
|
|
setSelectedBands([])
|
|
updateFilters([], activeView)
|
|
}
|
|
|
|
const handleViewChange = (view: string) => {
|
|
setActiveView(view)
|
|
updateFilters(selectedBands, view)
|
|
}
|
|
|
|
// Fetch shows based on view
|
|
useEffect(() => {
|
|
if (activeView === "bands") return // No fetch needed for bands view
|
|
|
|
setLoading(true)
|
|
const params = new URLSearchParams()
|
|
params.append("limit", "200")
|
|
|
|
if (activeView === "recent") {
|
|
params.append("status", "past")
|
|
} else if (activeView === "upcoming") {
|
|
params.append("status", "upcoming")
|
|
}
|
|
|
|
if (selectedBands.length > 0) {
|
|
selectedBands.forEach(slug => params.append("vertical_slugs", slug))
|
|
}
|
|
|
|
const url = `${getApiUrl()}/shows/?${params.toString()}`
|
|
|
|
fetch(url)
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
const sorted = data.sort((a: Show, b: Show) =>
|
|
activeView === "upcoming"
|
|
? new Date(a.date).getTime() - new Date(b.date).getTime()
|
|
: new Date(b.date).getTime() - new Date(a.date).getTime()
|
|
)
|
|
|
|
// Calculate band counts from data
|
|
const counts: Record<string, number> = {}
|
|
data.forEach((show: Show) => {
|
|
if (show.vertical?.slug) {
|
|
counts[show.vertical.slug] = (counts[show.vertical.slug] || 0) + 1
|
|
}
|
|
})
|
|
setBandCounts(counts)
|
|
|
|
if (activeView === "upcoming") {
|
|
setUpcomingShows(sorted)
|
|
} else {
|
|
setShows(sorted)
|
|
}
|
|
})
|
|
.catch(console.error)
|
|
.finally(() => setLoading(false))
|
|
}, [activeView, selectedBands])
|
|
|
|
// Get unique bands from current data for filter pills
|
|
const activeBandsInData = useMemo(() => {
|
|
const dataToCheck = activeView === "upcoming" ? upcomingShows : shows
|
|
const slugs = new Set(dataToCheck.map(s => s.vertical?.slug).filter(Boolean))
|
|
return Array.from(slugs) as string[]
|
|
}, [shows, upcomingShows, activeView])
|
|
|
|
// Bands available for filtering
|
|
const availableBands = VERTICALS.filter(v =>
|
|
activeBandsInData.includes(v.slug) || selectedBands.includes(v.slug)
|
|
)
|
|
|
|
return (
|
|
<div className="container py-8 space-y-6 animate-in fade-in duration-500">
|
|
{/* Header */}
|
|
<div className="space-y-2">
|
|
<h1 className="text-3xl font-bold tracking-tight">Shows</h1>
|
|
<p className="text-muted-foreground">
|
|
Browse the complete archive across all bands.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Tabs Navigation */}
|
|
<Tabs value={activeView} onValueChange={handleViewChange} className="w-full">
|
|
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
|
<TabsList className="grid w-full sm:w-auto grid-cols-4 sm:grid-cols-4">
|
|
<TabsTrigger value="recent" className="gap-2">
|
|
<Clock className="h-4 w-4 hidden sm:block" />
|
|
Recent
|
|
</TabsTrigger>
|
|
<TabsTrigger value="bands" className="gap-2">
|
|
<Music2 className="h-4 w-4 hidden sm:block" />
|
|
By Band
|
|
</TabsTrigger>
|
|
<TabsTrigger value="upcoming" className="gap-2">
|
|
<Calendar className="h-4 w-4 hidden sm:block" />
|
|
Upcoming
|
|
</TabsTrigger>
|
|
<TabsTrigger value="feed" className="gap-2">
|
|
<Heart className="h-4 w-4 hidden sm:block" />
|
|
My Feed
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
</div>
|
|
|
|
{/* Band Filter Pills - Only show on Recent and Upcoming */}
|
|
{(activeView === "recent" || activeView === "upcoming") && (
|
|
<div className="flex flex-wrap items-center gap-2 pt-4 border-t mt-4">
|
|
<span className="text-sm text-muted-foreground mr-2">Filter:</span>
|
|
|
|
{selectedBands.length === 0 ? (
|
|
<Badge variant="secondary" className="bg-primary/10 text-primary">
|
|
All Bands
|
|
</Badge>
|
|
) : (
|
|
<>
|
|
{selectedBands.map(slug => {
|
|
const band = VERTICALS.find(v => v.slug === slug)
|
|
return (
|
|
<Badge
|
|
key={slug}
|
|
variant="secondary"
|
|
className="gap-1 cursor-pointer hover:bg-destructive/20 transition-colors"
|
|
onClick={() => toggleBand(slug)}
|
|
>
|
|
{band?.name || slug}
|
|
<X className="h-3 w-3" />
|
|
</Badge>
|
|
)
|
|
})}
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={clearBandFilters}
|
|
className="h-6 text-xs text-muted-foreground"
|
|
>
|
|
Clear all
|
|
</Button>
|
|
</>
|
|
)}
|
|
|
|
{/* Add band buttons */}
|
|
{selectedBands.length === 0 && availableBands.length > 0 && (
|
|
<div className="flex flex-wrap gap-1 ml-2">
|
|
{availableBands.slice(0, 5).map(band => (
|
|
<Badge
|
|
key={band.slug}
|
|
variant="outline"
|
|
className="cursor-pointer hover:bg-primary/10 transition-colors"
|
|
onClick={() => toggleBand(band.slug)}
|
|
>
|
|
{band.name}
|
|
{bandCounts[band.slug] && (
|
|
<span className="ml-1 text-muted-foreground">
|
|
({bandCounts[band.slug]})
|
|
</span>
|
|
)}
|
|
</Badge>
|
|
))}
|
|
{availableBands.length > 5 && (
|
|
<Badge variant="outline" className="text-muted-foreground">
|
|
+{availableBands.length - 5} more
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Tab Content */}
|
|
<TabsContent value="recent" className="mt-6">
|
|
{loading ? (
|
|
<LoadingSkeleton />
|
|
) : (
|
|
<DateGroupedList shows={shows} />
|
|
)}
|
|
</TabsContent>
|
|
|
|
<TabsContent value="bands" className="mt-6">
|
|
<BandsGrid />
|
|
</TabsContent>
|
|
|
|
<TabsContent value="upcoming" className="mt-6">
|
|
{loading ? (
|
|
<LoadingSkeleton />
|
|
) : upcomingShows.length === 0 ? (
|
|
<div className="text-center py-12 text-muted-foreground">
|
|
<Calendar className="h-12 w-12 mx-auto mb-4 opacity-50" />
|
|
<p className="text-lg font-medium">No upcoming shows announced</p>
|
|
<p className="text-sm mt-1">Check back later for new tour dates!</p>
|
|
</div>
|
|
) : (
|
|
<DateGroupedList shows={upcomingShows} />
|
|
)}
|
|
</TabsContent>
|
|
|
|
<TabsContent value="feed" className="mt-6">
|
|
<MyFeedPlaceholder />
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function BandsGrid() {
|
|
const [verticals, setVerticals] = useState<any[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
useEffect(() => {
|
|
fetch(`${getApiUrl()}/verticals/`)
|
|
.then(res => res.json())
|
|
.then(data => setVerticals(data))
|
|
.catch(console.error)
|
|
.finally(() => setLoading(false))
|
|
}, [])
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
|
{Array.from({ length: 8 }).map((_, i) => (
|
|
<Skeleton key={i} className="h-24 rounded-lg" />
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
|
{verticals.map(vertical => (
|
|
<Link key={vertical.id} href={`/${vertical.slug}/shows`}>
|
|
<Card className="h-full transition-all hover:scale-[1.02] hover:shadow-lg hover:border-primary/50 cursor-pointer">
|
|
<CardContent className="p-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-2 rounded-lg bg-primary/10">
|
|
<Music2 className="h-5 w-5 text-primary" />
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<h3 className="font-semibold truncate">{vertical.name}</h3>
|
|
<p className="text-sm text-muted-foreground truncate">
|
|
{vertical.description?.slice(0, 50)}...
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function MyFeedPlaceholder() {
|
|
return (
|
|
<div className="text-center py-12">
|
|
<Users className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
|
|
<h3 className="text-lg font-medium mb-2">Your Personal Feed</h3>
|
|
<p className="text-muted-foreground max-w-md mx-auto mb-4">
|
|
Follow your favorite bands to see a customized feed of shows tailored to your preferences.
|
|
</p>
|
|
<div className="flex gap-2 justify-center">
|
|
<Link href="/register">
|
|
<Button>Create Account</Button>
|
|
</Link>
|
|
<Link href="/login">
|
|
<Button variant="outline">Sign In</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function LoadingSkeleton() {
|
|
return (
|
|
<div className="space-y-8">
|
|
<div className="space-y-4">
|
|
<Skeleton className="h-8 w-48" />
|
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
|
{Array.from({ length: 6 }).map((_, i) => (
|
|
<Skeleton key={i} className="h-32 rounded-lg" />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function LoadingFallback() {
|
|
return (
|
|
<div className="container py-10 flex items-center justify-center min-h-[400px]">
|
|
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default function ShowsPage() {
|
|
return (
|
|
<Suspense fallback={<LoadingFallback />}>
|
|
<ShowsContent />
|
|
</Suspense>
|
|
)
|
|
}
|