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