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

Fix hydration error, add venues page error handling

Browse source
This commit is contained in:
fullsizemalt 2025-12-26 12:30:35 -08:00
parent ce7bb81e64
commit 485d6413e2
2 changed files with 15 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/app/layout.tsx
View file

@ -31,7 +31,7 @@ export default function RootLayout({
}>) { }>) {
return ( return (
<html lang="en" suppressHydrationWarning> <html lang="en" suppressHydrationWarning>
<body className={cn( <body suppressHydrationWarning className={cn(
spaceGrotesk.variable, spaceGrotesk.variable,
jetbrainsMono.variable, jetbrainsMono.variable,
"min-h-screen bg-background font-sans antialiased flex flex-col" "min-h-screen bg-background font-sans antialiased flex flex-col"

14
frontend/app/venues/page.tsx
View file

@ -23,6 +23,7 @@ type SortOption = "name" | "city" | "shows"
export default function VenuesPage() { export default function VenuesPage() {
const [venues, setVenues] = useState<Venue[]>([]) const [venues, setVenues] = useState<Venue[]>([])
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
const [error, setError] = useState<string | null>(null)
const [searchQuery, setSearchQuery] = useState("") const [searchQuery, setSearchQuery] = useState("")
const [stateFilter, setStateFilter] = useState<string>("") const [stateFilter, setStateFilter] = useState<string>("")
const [sortBy, setSortBy] = useState<SortOption>("name") const [sortBy, setSortBy] = useState<SortOption>("name")
@ -30,6 +31,7 @@ export default function VenuesPage() {
useEffect(() => { useEffect(() => {
async function fetchVenues() { async function fetchVenues() {
try { try {
setError(null)
// Fetch venues // Fetch venues
const venuesRes = await fetch(`${getApiUrl()}/venues/?limit=100`) const venuesRes = await fetch(`${getApiUrl()}/venues/?limit=100`)
const venuesData: Venue[] = await venuesRes.json() const venuesData: Venue[] = await venuesRes.json()
@ -55,6 +57,7 @@ export default function VenuesPage() {
setVenues(venuesWithCounts) setVenues(venuesWithCounts)
} catch (error) { } catch (error) {
console.error("Failed to fetch venues:", error) console.error("Failed to fetch venues:", error)
setError("Failed to load venues. Please try again.")
} finally { } finally {
setLoading(false) setLoading(false)
} }
@ -102,6 +105,17 @@ export default function VenuesPage() {
return result return result
}, [venues, searchQuery, stateFilter, sortBy]) }, [venues, searchQuery, stateFilter, sortBy])
if (error) {
return (
<div className="container py-10 text-center">
<MapPin className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
<h1 className="text-2xl font-bold mb-2">Unable to Load Venues</h1>
<p className="text-muted-foreground mb-4">{error}</p>
<Button onClick={() => window.location.reload()}>Try Again</Button>
</div>
)
}
if (loading) { if (loading) {
return ( return (
<div className="container py-10"> <div className="container py-10">