pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-20 12:31:26 -05:00
Code Issues Packages Projects Releases Wiki Activity

Code edited in Lovable Code Editor

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-11-02 21:00:25 +00:00
parent f3c898dfc1
commit 54b84dff21
1 changed files with 106 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

237
src/pages/Parks.tsx
View File

@@ -1,16 +1,16 @@
import { useState, useEffect, useMemo } from 'react'; import { useState, useEffect, useMemo } from "react";
import { Header } from '@/components/layout/Header'; import { Header } from "@/components/layout/Header";
import { Button } from '@/components/ui/button'; import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { cn } from '@/lib/utils'; import { cn } from "@/lib/utils";
import { Collapsible, CollapsibleContent } from '@/components/ui/collapsible'; import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
import { Badge } from '@/components/ui/badge'; import { Badge } from "@/components/ui/badge";
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { import {
MapPin, MapPin,
Grid3X3, Grid3X3,
List, List,
Map, Map,
Filter, Filter,
SortAsc, SortAsc,
Search, Search,
@@ -20,25 +20,25 @@ import {
FerrisWheel, FerrisWheel,
Plus, Plus,
PanelLeftClose, PanelLeftClose,
PanelLeftOpen PanelLeftOpen,
} from 'lucide-react'; } from "lucide-react";
import { Park } from '@/types/database'; import { Park } from "@/types/database";
import { supabase } from '@/integrations/supabase/client'; import { supabase } from "@/integrations/supabase/client";
import { useNavigate } from 'react-router-dom'; import { useNavigate } from "react-router-dom";
import { ParkFilters } from '@/components/parks/ParkFilters'; import { ParkFilters } from "@/components/parks/ParkFilters";
import { ParkGridView } from '@/components/parks/ParkGridView'; import { ParkGridView } from "@/components/parks/ParkGridView";
import { ParkListView } from '@/components/parks/ParkListView'; import { ParkListView } from "@/components/parks/ParkListView";
import { ParkSearch } from '@/components/parks/ParkSearch'; import { ParkSearch } from "@/components/parks/ParkSearch";
import { ParkSortOptions } from '@/components/parks/ParkSortOptions'; import { ParkSortOptions } from "@/components/parks/ParkSortOptions";
import { useToast } from '@/hooks/use-toast'; import { useToast } from "@/hooks/use-toast";
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'; import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { ParkForm } from '@/components/admin/ParkForm'; import { ParkForm } from "@/components/admin/ParkForm";
import { useAuth } from '@/hooks/useAuth'; import { useAuth } from "@/hooks/useAuth";
import { useUserRole } from '@/hooks/useUserRole'; import { useUserRole } from "@/hooks/useUserRole";
import { useAuthModal } from '@/hooks/useAuthModal'; import { useAuthModal } from "@/hooks/useAuthModal";
import { useOpenGraph } from '@/hooks/useOpenGraph'; import { useOpenGraph } from "@/hooks/useOpenGraph";
import { useParks } from '@/hooks/parks/useParks'; import { useParks } from "@/hooks/parks/useParks";
import { Pagination } from '@/components/common/Pagination'; import { Pagination } from "@/components/common/Pagination";
export interface FilterState { export interface FilterState {
search: string; search: string;
@@ -63,11 +63,11 @@ export interface FilterState {
export interface SortState { export interface SortState {
field: string; field: string;
direction: 'asc' | 'desc'; direction: "asc" | "desc";
} }
const initialFilters: FilterState = { const initialFilters: FilterState = {
search: '', search: "",
parkType: [], parkType: [],
status: [], status: [],
country: [], country: [],
@@ -88,19 +88,19 @@ const initialFilters: FilterState = {
}; };
const initialSort: SortState = { const initialSort: SortState = {
field: 'name', field: "name",
direction: 'asc' direction: "asc",
}; };
export default function Parks() { export default function Parks() {
const [filters, setFilters] = useState<FilterState>(initialFilters); const [filters, setFilters] = useState<FilterState>(initialFilters);
const [sort, setSort] = useState<SortState>(initialSort); const [sort, setSort] = useState<SortState>(initialSort);
const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid'); const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
const [showFilters, setShowFilters] = useState(false); const [showFilters, setShowFilters] = useState(false);
const [isAddParkModalOpen, setIsAddParkModalOpen] = useState(false); const [isAddParkModalOpen, setIsAddParkModalOpen] = useState(false);
const [currentPage, setCurrentPage] = useState(1); const [currentPage, setCurrentPage] = useState(1);
const [sidebarCollapsed, setSidebarCollapsed] = useState(() => { const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
const saved = localStorage.getItem('parks-sidebar-collapsed'); const saved = localStorage.getItem("parks-sidebar-collapsed");
return saved ? JSON.parse(saved) : false; return saved ? JSON.parse(saved) : false;
}); });
const navigate = useNavigate(); const navigate = useNavigate();
@@ -113,7 +113,7 @@ export default function Parks() {
const { data: parks = [], isLoading: loading, error } = useParks(); const { data: parks = [], isLoading: loading, error } = useParks();
useEffect(() => { useEffect(() => {
localStorage.setItem('parks-sidebar-collapsed', JSON.stringify(sidebarCollapsed)); localStorage.setItem("parks-sidebar-collapsed", JSON.stringify(sidebarCollapsed));
}, [sidebarCollapsed]); }, [sidebarCollapsed]);
// Show error toast if query fails // Show error toast if query fails
@@ -122,23 +122,23 @@ export default function Parks() {
toast({ toast({
variant: "destructive", variant: "destructive",
title: "Error loading parks", title: "Error loading parks",
description: error instanceof Error ? error.message : 'Failed to load parks', description: error instanceof Error ? error.message : "Failed to load parks",
}); });
} }
}, [error, toast]); }, [error, toast]);
const filteredAndSortedParks = useMemo(() => { const filteredAndSortedParks = useMemo(() => {
let filtered = parks.filter(park => { let filtered = parks.filter((park) => {
// Search filter // Search filter
if (filters.search) { if (filters.search) {
const searchTerm = filters.search.toLowerCase(); const searchTerm = filters.search.toLowerCase();
const matchesSearch = const matchesSearch =
park.name.toLowerCase().includes(searchTerm) || park.name.toLowerCase().includes(searchTerm) ||
park.description?.toLowerCase().includes(searchTerm) || park.description?.toLowerCase().includes(searchTerm) ||
park.location?.city?.toLowerCase().includes(searchTerm) || park.location?.city?.toLowerCase().includes(searchTerm) ||
park.location?.country?.toLowerCase().includes(searchTerm) || park.location?.country?.toLowerCase().includes(searchTerm) ||
park.location?.state_province?.toLowerCase().includes(searchTerm); park.location?.state_province?.toLowerCase().includes(searchTerm);
if (!matchesSearch) return false; if (!matchesSearch) return false;
} }
@@ -153,7 +153,7 @@ export default function Parks() {
} }
// Country filter // Country filter
if (filters.country.length > 0 && !filters.country.includes(park.location?.country || '')) { if (filters.country.length > 0 && !filters.country.includes(park.location?.country || "")) {
return false; return false;
} }
@@ -215,7 +215,7 @@ export default function Parks() {
// Opening year filter // Opening year filter
if (filters.openingYearStart || filters.openingYearEnd) { if (filters.openingYearStart || filters.openingYearEnd) {
const openingYear = park.opening_date ? parseInt(park.opening_date.split('-')[0]) : null; const openingYear = park.opening_date ? parseInt(park.opening_date.split("-")[0]) : null;
if (openingYear) { if (openingYear) {
if (filters.openingYearStart && openingYear < filters.openingYearStart) return false; if (filters.openingYearStart && openingYear < filters.openingYearStart) return false;
if (filters.openingYearEnd && openingYear > filters.openingYearEnd) return false; if (filters.openingYearEnd && openingYear > filters.openingYearEnd) return false;
@@ -230,29 +230,29 @@ export default function Parks() {
// Apply sorting // Apply sorting
filtered.sort((a, b) => { filtered.sort((a, b) => {
let aValue: any, bValue: any; let aValue: any, bValue: any;
switch (sort.field) { switch (sort.field) {
case 'name': case "name":
aValue = a.name; aValue = a.name;
bValue = b.name; bValue = b.name;
break; break;
case 'rating': case "rating":
aValue = a.average_rating || 0; aValue = a.average_rating || 0;
bValue = b.average_rating || 0; bValue = b.average_rating || 0;
break; break;
case 'rides': case "rides":
aValue = a.ride_count || 0; aValue = a.ride_count || 0;
bValue = b.ride_count || 0; bValue = b.ride_count || 0;
break; break;
case 'coasters': case "coasters":
aValue = a.coaster_count || 0; aValue = a.coaster_count || 0;
bValue = b.coaster_count || 0; bValue = b.coaster_count || 0;
break; break;
case 'reviews': case "reviews":
aValue = a.review_count || 0; aValue = a.review_count || 0;
bValue = b.review_count || 0; bValue = b.review_count || 0;
break; break;
case 'opening': case "opening":
aValue = a.opening_date ? new Date(a.opening_date).getTime() : 0; aValue = a.opening_date ? new Date(a.opening_date).getTime() : 0;
bValue = b.opening_date ? new Date(b.opening_date).getTime() : 0; bValue = b.opening_date ? new Date(b.opening_date).getTime() : 0;
break; break;
@@ -261,39 +261,39 @@ export default function Parks() {
bValue = b.name; bValue = b.name;
} }
if (typeof aValue === 'string' && typeof bValue === 'string') { if (typeof aValue === "string" && typeof bValue === "string") {
const result = aValue.localeCompare(bValue); const result = aValue.localeCompare(bValue);
return sort.direction === 'asc' ? result : -result; return sort.direction === "asc" ? result : -result;
} }
const result = aValue - bValue; const result = aValue - bValue;
return sort.direction === 'asc' ? result : -result; return sort.direction === "asc" ? result : -result;
}); });
return filtered; return filtered;
}, [parks, filters, sort]); }, [parks, filters, sort]);
const generateDescription = () => { const generateDescription = () => {
if (!parks.length) return 'Browse theme parks worldwide on ThrillWiki'; if (!parks.length) return "Browse theme parks worldwide on ThrillWiki";
const activeFilters = []; const activeFilters = [];
if (filters.country.length === 1) activeFilters.push(`in ${filters.country[0]}`); if (filters.country.length === 1) activeFilters.push(`in ${filters.country[0]}`);
if (filters.parkType.length > 0) activeFilters.push(filters.parkType.join(', ')); if (filters.parkType.length > 0) activeFilters.push(filters.parkType.join(", "));
if (filters.status.length > 0) activeFilters.push(filters.status.join(', ')); if (filters.status.length > 0) activeFilters.push(filters.status.join(", "));
if (activeFilters.length > 0) { if (activeFilters.length > 0) {
return `Browse ${filteredAndSortedParks.length} ${activeFilters.join(' ')} theme parks`; return `Browse ${filteredAndSortedParks.length} ${activeFilters.join(" ")} theme parks`;
} }
return `Browse ${parks.length} theme parks worldwide`; return `Browse ${parks.length} theme parks worldwide`;
}; };
useOpenGraph({ useOpenGraph({
title: 'Theme Parks - ThrillWiki', title: "Theme Parks - ThrillWiki",
description: generateDescription(), description: generateDescription(),
imageUrl: filteredAndSortedParks[0]?.banner_image_url, imageUrl: filteredAndSortedParks[0]?.banner_image_url,
imageId: filteredAndSortedParks[0]?.banner_image_id, imageId: filteredAndSortedParks[0]?.banner_image_id,
type: 'website' type: "website",
}); });
const activeFilterCount = useMemo(() => { const activeFilterCount = useMemo(() => {
@@ -334,7 +334,7 @@ export default function Parks() {
const handleParkSubmit = async (parkData: any) => { const handleParkSubmit = async (parkData: any) => {
try { try {
const { submitParkCreation } = await import('@/lib/entitySubmissionHelpers'); const { submitParkCreation } = await import("@/lib/entitySubmissionHelpers");
await submitParkCreation(parkData, user.id); await submitParkCreation(parkData, user.id);
toast({ toast({
@@ -347,7 +347,7 @@ export default function Parks() {
toast({ toast({
title: "Submission Failed", title: "Submission Failed",
description: error instanceof Error ? error.message : "Failed to submit park.", description: error instanceof Error ? error.message : "Failed to submit park.",
variant: "destructive" variant: "destructive",
}); });
} }
}; };
@@ -378,46 +378,51 @@ export default function Parks() {
return ( return (
<div className="min-h-screen bg-background"> <div className="min-h-screen bg-background">
<Header /> <Header />
<main className="container mx-auto px-4 md:px-6 lg:px-8 xl:px-8 2xl:px-10 py-6 xl:py-8"> <main className="container mx-auto px-4 md:px-6 lg:px-8 xl:px-8 2xl:px-10 py-6 xl:py-8">
{/* Page Header */} {/* Page Header */}
<div className="mb-8"> <div className="mb-8">
<div className="flex items-center gap-3 mb-4"> <div className="flex items-center gap-3 mb-4">
<MapPin className="w-8 h-8 text-primary" /> <MapPin className="w-8 h-8 text-primary" />
<h1 className="text-4xl font-bold">Theme Parks</h1> <h1 className="text-4xl font-bold">Parks</h1>
</div> </div>
<p className="text-lg text-muted-foreground mb-4"> <p className="text-lg text-muted-foreground mb-4">
Discover amazing theme parks, amusement parks, and attractions worldwide Discover amazing theme parks, amusement parks, and attractions worldwide
</p> </p>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex flex-wrap items-center gap-1.5 sm:gap-2"> <div className="flex flex-wrap items-center gap-1.5 sm:gap-2">
<Badge variant="secondary" className="flex items-center justify-center text-sm sm:text-base px-2 py-0.5 sm:px-3 sm:py-1 whitespace-nowrap"> <Badge
variant="secondary"
className="flex items-center justify-center text-sm sm:text-base px-2 py-0.5 sm:px-3 sm:py-1 whitespace-nowrap"
>
{filteredAndSortedParks.length} parks {filteredAndSortedParks.length} parks
</Badge> </Badge>
<Badge variant="outline" className="flex items-center justify-center text-xs sm:text-sm px-2 py-0.5 whitespace-nowrap"> <Badge
variant="outline"
className="flex items-center justify-center text-xs sm:text-sm px-2 py-0.5 whitespace-nowrap"
>
{parks.reduce((sum, park) => sum + (park.ride_count || 0), 0)} total rides {parks.reduce((sum, park) => sum + (park.ride_count || 0), 0)} total rides
</Badge> </Badge>
<Badge variant="outline" className="flex items-center justify-center text-xs sm:text-sm px-2 py-0.5 whitespace-nowrap hidden xs:inline-flex sm:inline-flex"> <Badge
variant="outline"
className="flex items-center justify-center text-xs sm:text-sm px-2 py-0.5 whitespace-nowrap hidden xs:inline-flex sm:inline-flex"
>
{parks.reduce((sum, park) => sum + (park.coaster_count || 0), 0)} coasters {parks.reduce((sum, park) => sum + (park.coaster_count || 0), 0)} coasters
</Badge> </Badge>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Button <Button
onClick={() => requireAuth(() => setIsAddParkModalOpen(true), "Sign in to add a new park")} onClick={() => requireAuth(() => setIsAddParkModalOpen(true), "Sign in to add a new park")}
className="gap-2" className="gap-2"
> >
<Plus className="w-4 h-4" /> <Plus className="w-4 h-4" />
Add Park Add Park
</Button> </Button>
{activeFilterCount > 0 && ( {activeFilterCount > 0 && (
<Button <Button variant="outline" onClick={clearAllFilters} className="text-destructive hover:text-destructive">
variant="outline"
onClick={clearAllFilters}
className="text-destructive hover:text-destructive"
>
<X className="w-4 h-4 mr-2" /> <X className="w-4 h-4 mr-2" />
Clear all filters Clear all filters
</Button> </Button>
@@ -436,11 +441,7 @@ export default function Parks() {
className="shrink-0 gap-2 hidden lg:flex" className="shrink-0 gap-2 hidden lg:flex"
title={sidebarCollapsed ? "Show filters" : "Hide filters"} title={sidebarCollapsed ? "Show filters" : "Hide filters"}
> >
{sidebarCollapsed ? ( {sidebarCollapsed ? <PanelLeftOpen className="w-4 h-4" /> : <PanelLeftClose className="w-4 h-4" />}
<PanelLeftOpen className="w-4 h-4" />
) : (
<PanelLeftClose className="w-4 h-4" />
)}
<span>Filters</span> <span>Filters</span>
{activeFilterCount > 0 && ( {activeFilterCount > 0 && (
<Badge variant="secondary" className="ml-1"> <Badge variant="secondary" className="ml-1">
@@ -451,19 +452,13 @@ export default function Parks() {
{/* Search bar takes remaining space */} {/* Search bar takes remaining space */}
<div className="flex-1"> <div className="flex-1">
<ParkSearch <ParkSearch value={filters.search} onChange={(search) => setFilters((prev) => ({ ...prev, search }))} />
value={filters.search}
onChange={(search) => setFilters(prev => ({ ...prev, search }))}
/>
</div> </div>
{/* Sort controls - more compact */} {/* Sort controls - more compact */}
<div className="flex gap-2"> <div className="flex gap-2">
<ParkSortOptions <ParkSortOptions sort={sort} onSortChange={setSort} />
sort={sort}
onSortChange={setSort}
/>
{/* Mobile filter toggle */} {/* Mobile filter toggle */}
<Button <Button
variant={showFilters ? "default" : "outline"} variant={showFilters ? "default" : "outline"}
@@ -472,7 +467,7 @@ export default function Parks() {
> >
<Filter className="w-4 h-4" /> <Filter className="w-4 h-4" />
<span className="hidden sm:inline">Filters</span> <span className="hidden sm:inline">Filters</span>
<ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} /> <ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? "rotate-180" : ""}`} />
{activeFilterCount > 0 && ( {activeFilterCount > 0 && (
<Badge variant="secondary" className="ml-1"> <Badge variant="secondary" className="ml-1">
{activeFilterCount} {activeFilterCount}
@@ -480,7 +475,11 @@ export default function Parks() {
)} )}
</Button> </Button>
<Tabs value={viewMode} onValueChange={(v) => setViewMode(v as 'grid' | 'list')} className="hidden md:inline-flex"> <Tabs
value={viewMode}
onValueChange={(v) => setViewMode(v as "grid" | "list")}
className="hidden md:inline-flex"
>
<TabsList> <TabsList>
<TabsTrigger value="grid"> <TabsTrigger value="grid">
<Grid3X3 className="w-4 h-4" /> <Grid3X3 className="w-4 h-4" />
@@ -499,11 +498,7 @@ export default function Parks() {
<CollapsibleContent> <CollapsibleContent>
<Card> <Card>
<CardContent className="pt-6"> <CardContent className="pt-6">
<ParkFilters <ParkFilters filters={filters} onFiltersChange={setFilters} parks={parks} />
filters={filters}
onFiltersChange={setFilters}
parks={parks}
/>
</CardContent> </CardContent>
</Card> </Card>
</CollapsibleContent> </CollapsibleContent>
@@ -520,21 +515,12 @@ export default function Parks() {
<Card> <Card>
<CardHeader className="flex flex-row items-center justify-between pb-2"> <CardHeader className="flex flex-row items-center justify-between pb-2">
<CardTitle className="text-base">Filters</CardTitle> <CardTitle className="text-base">Filters</CardTitle>
<Button <Button variant="ghost" size="sm" onClick={() => setSidebarCollapsed(true)} title="Hide filters">
variant="ghost"
size="sm"
onClick={() => setSidebarCollapsed(true)}
title="Hide filters"
>
<PanelLeftClose className="w-4 h-4" /> <PanelLeftClose className="w-4 h-4" />
</Button> </Button>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<ParkFilters <ParkFilters filters={filters} onFiltersChange={setFilters} parks={parks} />
filters={filters}
onFiltersChange={setFilters}
parks={parks}
/>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
@@ -545,17 +531,12 @@ export default function Parks() {
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
{filteredAndSortedParks.length > 0 ? ( {filteredAndSortedParks.length > 0 ? (
<div> <div>
{viewMode === 'grid' ? ( {viewMode === "grid" ? (
<ParkGridView <ParkGridView parks={paginatedParks} />
parks={paginatedParks}
/>
) : ( ) : (
<ParkListView <ParkListView parks={paginatedParks} onParkClick={handleParkClick} />
parks={paginatedParks}
onParkClick={handleParkClick}
/>
)} )}
<Pagination <Pagination
currentPage={currentPage} currentPage={currentPage}
totalPages={totalPages} totalPages={totalPages}
@@ -567,9 +548,7 @@ export default function Parks() {
<div className="text-center py-12"> <div className="text-center py-12">
<FerrisWheel className="w-16 h-16 mb-4 opacity-50 mx-auto" /> <FerrisWheel className="w-16 h-16 mb-4 opacity-50 mx-auto" />
<h3 className="text-xl font-semibold mb-2">No parks found</h3> <h3 className="text-xl font-semibold mb-2">No parks found</h3>
<p className="text-muted-foreground mb-4"> <p className="text-muted-foreground mb-4">Try adjusting your search terms or filters</p>
Try adjusting your search terms or filters
</p>
<Button onClick={clearAllFilters} variant="outline"> <Button onClick={clearAllFilters} variant="outline">
Clear all filters Clear all filters
</Button> </Button>
@@ -587,14 +566,10 @@ export default function Parks() {
Add a new park to the database. Your submission will be reviewed before being published. Add a new park to the database. Your submission will be reviewed before being published.
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<ParkForm <ParkForm onSubmit={handleParkSubmit} onCancel={() => setIsAddParkModalOpen(false)} isEditing={false} />
onSubmit={handleParkSubmit}
onCancel={() => setIsAddParkModalOpen(false)}
isEditing={false}
/>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
</main> </main>
</div> </div>
); );
} }