mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-25 15:11:15 -05:00
Refactor code structure and remove redundant changes
This commit is contained in:
pacnpal
409
src-old/pages/ManufacturerDetail.tsx
Normal file
409
src-old/pages/ManufacturerDetail.tsx
Normal file
@@ -0,0 +1,409 @@
|
||||
import { useState, useEffect, lazy, Suspense } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import { Header } from '@/components/layout/Header';
|
||||
import { trackPageView } from '@/lib/viewTracking';
|
||||
import { getBannerUrls } from '@/lib/cloudflareImageUtils';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import { Dialog, DialogContent } from '@/components/ui/dialog';
|
||||
import { AdminFormSkeleton } from '@/components/loading/PageSkeletons';
|
||||
import { ArrowLeft, MapPin, Star, Globe, Calendar, Edit, Factory, FerrisWheel } from 'lucide-react';
|
||||
import { Company } from '@/types/database';
|
||||
import { supabase } from '@/lib/supabaseClient';
|
||||
import { ManufacturerPhotoGallery } from '@/components/companies/ManufacturerPhotoGallery';
|
||||
import { handleNonCriticalError } from '@/lib/errorHandler';
|
||||
|
||||
// Lazy load admin form
|
||||
const ManufacturerForm = lazy(() => import('@/components/admin/ManufacturerForm').then(m => ({ default: m.ManufacturerForm })));
|
||||
import { useAuth } from '@/hooks/useAuth';
|
||||
import { useUserRole } from '@/hooks/useUserRole';
|
||||
import { toast } from '@/hooks/use-toast';
|
||||
import { getErrorMessage } from '@/lib/errorHandler';
|
||||
import { submitCompanyUpdate } from '@/lib/companyHelpers';
|
||||
import { VersionIndicator } from '@/components/versioning/VersionIndicator';
|
||||
import { EntityHistoryTabs } from '@/components/history/EntityHistoryTabs';
|
||||
import { useAuthModal } from '@/hooks/useAuthModal';
|
||||
import { MetaTags } from '@/components/seo';
|
||||
|
||||
export default function ManufacturerDetail() {
|
||||
const { slug } = useParams<{ slug: string }>();
|
||||
const navigate = useNavigate();
|
||||
const [manufacturer, setManufacturer] = useState<Company | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [isEditModalOpen, setIsEditModalOpen] = useState(false);
|
||||
const [totalRides, setTotalRides] = useState<number>(0);
|
||||
const [totalModels, setTotalModels] = useState<number>(0);
|
||||
const [totalPhotos, setTotalPhotos] = useState<number>(0);
|
||||
const [statsLoading, setStatsLoading] = useState(true);
|
||||
const { user } = useAuth();
|
||||
const { isModerator } = useUserRole();
|
||||
const { requireAuth } = useAuthModal();
|
||||
|
||||
useEffect(() => {
|
||||
if (slug) {
|
||||
fetchManufacturerData();
|
||||
}
|
||||
}, [slug]);
|
||||
|
||||
// Track page view when manufacturer is loaded
|
||||
useEffect(() => {
|
||||
if (manufacturer?.id) {
|
||||
trackPageView('company', manufacturer.id);
|
||||
}
|
||||
}, [manufacturer?.id]);
|
||||
|
||||
const fetchManufacturerData = async () => {
|
||||
try {
|
||||
const { data, error } = await supabase
|
||||
.from('companies')
|
||||
.select('*')
|
||||
.eq('slug', slug || '')
|
||||
.eq('company_type', 'manufacturer')
|
||||
.maybeSingle();
|
||||
|
||||
if (error) throw error;
|
||||
setManufacturer(data);
|
||||
if (data) {
|
||||
fetchStatistics(data.id);
|
||||
}
|
||||
} catch (error) {
|
||||
handleNonCriticalError(error, {
|
||||
action: 'Fetch manufacturer',
|
||||
metadata: { slug }
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchStatistics = async (manufacturerId: string) => {
|
||||
try {
|
||||
// Count rides
|
||||
const { count: ridesCount, error: ridesError } = await supabase
|
||||
.from('rides')
|
||||
.select('id', { count: 'exact', head: true })
|
||||
.eq('manufacturer_id', manufacturerId);
|
||||
|
||||
if (ridesError) throw ridesError;
|
||||
setTotalRides(ridesCount || 0);
|
||||
|
||||
// Count models
|
||||
const { count: modelsCount, error: modelsError } = await supabase
|
||||
.from('ride_models')
|
||||
.select('id', { count: 'exact', head: true })
|
||||
.eq('manufacturer_id', manufacturerId);
|
||||
|
||||
if (modelsError) throw modelsError;
|
||||
setTotalModels(modelsCount || 0);
|
||||
|
||||
// Count photos
|
||||
const { count: photosCount, error: photosError } = await supabase
|
||||
.from('photos')
|
||||
.select('id', { count: 'exact', head: true })
|
||||
.eq('entity_type', 'manufacturer')
|
||||
.eq('entity_id', manufacturerId);
|
||||
|
||||
if (photosError) throw photosError;
|
||||
setTotalPhotos(photosCount || 0);
|
||||
} catch (error) {
|
||||
handleNonCriticalError(error, {
|
||||
action: 'Fetch manufacturer statistics',
|
||||
metadata: { manufacturerId }
|
||||
});
|
||||
} finally {
|
||||
setStatsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditSubmit = async (data: any) => {
|
||||
try {
|
||||
await submitCompanyUpdate(
|
||||
manufacturer!.id,
|
||||
data,
|
||||
user!.id
|
||||
);
|
||||
|
||||
toast({
|
||||
title: "Edit Submitted",
|
||||
description: "Your edit has been submitted for review."
|
||||
});
|
||||
|
||||
setIsEditModalOpen(false);
|
||||
} catch (error) {
|
||||
const errorMsg = getErrorMessage(error);
|
||||
toast({
|
||||
title: "Error",
|
||||
description: errorMsg,
|
||||
variant: "destructive"
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<Header />
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<div className="animate-pulse space-y-6">
|
||||
<div className="h-64 bg-muted rounded-lg"></div>
|
||||
<div className="h-8 bg-muted rounded w-1/2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!manufacturer) {
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<Header />
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<div className="text-center py-12">
|
||||
<h1 className="text-2xl font-bold mb-4">Manufacturer Not Found</h1>
|
||||
<Button onClick={() => navigate('/manufacturers')}>
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Back to Manufacturers
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<MetaTags entityType="company" entitySlug={slug} />
|
||||
<Header />
|
||||
|
||||
<main className="container mx-auto px-4 py-8 max-w-7xl">
|
||||
{/* Back Button and Edit Button */}
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<Button variant="ghost" onClick={() => navigate('/manufacturers')}>
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
<span className="md:hidden">Back</span>
|
||||
<span className="hidden md:inline">Back to Manufacturers</span>
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => requireAuth(() => setIsEditModalOpen(true), "Sign in to edit this manufacturer")}
|
||||
>
|
||||
<Edit className="w-4 h-4 mr-2" />
|
||||
<span className="md:hidden">Edit</span>
|
||||
<span className="hidden md:inline">Edit Manufacturer</span>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Hero Section */}
|
||||
<div className="relative mb-4 md:mb-8">
|
||||
<div className="aspect-[16/9] md:aspect-[21/9] bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 rounded-lg overflow-hidden relative">
|
||||
{(manufacturer.banner_image_url || manufacturer.banner_image_id) ? (
|
||||
<picture>
|
||||
<source
|
||||
media="(max-width: 768px)"
|
||||
srcSet={(getBannerUrls(manufacturer.banner_image_id ?? undefined).mobile || manufacturer.banner_image_url) ?? undefined}
|
||||
/>
|
||||
<img
|
||||
src={(getBannerUrls(manufacturer.banner_image_id ?? undefined).desktop || manufacturer.banner_image_url) ?? undefined}
|
||||
alt={manufacturer.name}
|
||||
className="w-full h-full object-cover"
|
||||
loading="eager"
|
||||
/>
|
||||
</picture>
|
||||
) : manufacturer.logo_url ? (
|
||||
<div className="flex items-center justify-center h-full bg-background/90">
|
||||
<img
|
||||
src={manufacturer.logo_url}
|
||||
alt={manufacturer.name}
|
||||
className="max-h-48 object-contain"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<Factory className="w-24 h-24 opacity-50" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="absolute bottom-0 left-0 right-0 p-6 pb-12 md:p-8 bg-gradient-to-t from-black/60 to-transparent">
|
||||
<div className="flex items-end justify-between">
|
||||
<div>
|
||||
<Badge variant="outline" className="bg-black/20 text-white border-white/20 mb-2">
|
||||
Manufacturer
|
||||
</Badge>
|
||||
<h1 className="text-2xl md:text-4xl lg:text-6xl font-bold text-white mb-2">
|
||||
{manufacturer.name}
|
||||
</h1>
|
||||
{manufacturer.headquarters_location && (
|
||||
<div className="flex items-center text-white/90 text-sm md:text-lg">
|
||||
<MapPin className="w-5 h-5 mr-2" />
|
||||
{manufacturer.headquarters_location}
|
||||
</div>
|
||||
)}
|
||||
<div className="mt-3">
|
||||
<VersionIndicator
|
||||
entityType="company"
|
||||
entityId={manufacturer.id}
|
||||
entityName={manufacturer.name}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{(manufacturer.average_rating ?? 0) > 0 && (
|
||||
<div className="bg-black/30 backdrop-blur-md rounded-lg p-6 text-center">
|
||||
<div className="flex items-center gap-2 text-white mb-2">
|
||||
<Star className="w-6 h-6 fill-yellow-400 text-yellow-400" />
|
||||
<span className="text-3xl font-bold">
|
||||
{(manufacturer.average_rating ?? 0).toFixed(1)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-white/90 text-sm">
|
||||
{manufacturer.review_count} {manufacturer.review_count === 1 ? "review" : "reviews"}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Company Info */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 mb-8 max-w-4xl mx-auto">
|
||||
{manufacturer.founded_year && (
|
||||
<Card>
|
||||
<CardContent className="p-3 md:p-4 text-center">
|
||||
<Calendar className="w-6 h-6 text-primary mx-auto mb-2" />
|
||||
<div className="text-2xl font-bold">{manufacturer.founded_year}</div>
|
||||
<div className="text-sm text-muted-foreground">Founded</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
{manufacturer.website_url && (
|
||||
<Card>
|
||||
<CardContent className="p-3 md:p-4 text-center">
|
||||
<Globe className="w-6 h-6 text-primary mx-auto mb-2" />
|
||||
<a
|
||||
href={manufacturer.website_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-primary hover:underline break-all"
|
||||
>
|
||||
Visit Website
|
||||
</a>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<Tabs defaultValue="overview" className="w-full">
|
||||
<TabsList className="grid w-full grid-cols-2 md:grid-cols-5">
|
||||
<TabsTrigger value="overview">Overview</TabsTrigger>
|
||||
<TabsTrigger value="rides">
|
||||
Rides {!statsLoading && totalRides > 0 && `(${totalRides})`}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="models">
|
||||
Models {!statsLoading && totalModels > 0 && `(${totalModels})`}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="photos">
|
||||
Photos {!statsLoading && totalPhotos > 0 && `(${totalPhotos})`}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="history">History</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="overview" className="space-y-6">
|
||||
{manufacturer.description && (
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<h2 className="text-2xl font-bold mb-4">About</h2>
|
||||
<p className="text-muted-foreground whitespace-pre-wrap">
|
||||
{manufacturer.description}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="rides">
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-2xl font-bold">Rides</h2>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => navigate(`/manufacturers/${manufacturer.slug}/rides`)}
|
||||
>
|
||||
View All Rides
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-muted-foreground">
|
||||
View all rides manufactured by {manufacturer.name}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="models">
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-2xl font-bold">Models</h2>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => navigate(`/manufacturers/${manufacturer.slug}/models`)}
|
||||
>
|
||||
View All Models
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-muted-foreground">
|
||||
View all ride models by {manufacturer.name}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="photos">
|
||||
<ManufacturerPhotoGallery
|
||||
manufacturerId={manufacturer.id}
|
||||
manufacturerName={manufacturer.name}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="history" className="mt-6">
|
||||
<EntityHistoryTabs
|
||||
entityType="company"
|
||||
entityId={manufacturer.id}
|
||||
entityName={manufacturer.name}
|
||||
/>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</main>
|
||||
|
||||
{/* Edit Modal */}
|
||||
<Dialog open={isEditModalOpen} onOpenChange={setIsEditModalOpen}>
|
||||
<DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
|
||||
<Suspense fallback={<AdminFormSkeleton />}>
|
||||
<ManufacturerForm
|
||||
initialData={{
|
||||
id: manufacturer.id,
|
||||
name: manufacturer.name,
|
||||
slug: manufacturer.slug,
|
||||
description: manufacturer.description ?? undefined,
|
||||
company_type: 'manufacturer',
|
||||
person_type: (manufacturer.person_type || 'company') as 'company' | 'individual' | 'firm' | 'organization',
|
||||
website_url: manufacturer.website_url ?? undefined,
|
||||
founded_year: manufacturer.founded_year ?? undefined,
|
||||
headquarters_location: manufacturer.headquarters_location ?? undefined,
|
||||
banner_image_url: manufacturer.banner_image_url ?? undefined,
|
||||
card_image_url: manufacturer.card_image_url ?? undefined
|
||||
}}
|
||||
onSubmit={handleEditSubmit}
|
||||
onCancel={() => setIsEditModalOpen(false)}
|
||||
/>
|
||||
</Suspense>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user