mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-20 12:31:26 -05:00
feat: Implement Phase 4 cleanup and polish
This commit is contained in:
@@ -190,7 +190,7 @@ export function EntityPhotoGallery({
|
|||||||
entityType={entityType}
|
entityType={entityType}
|
||||||
open={showManagement}
|
open={showManagement}
|
||||||
onOpenChange={setShowManagement}
|
onOpenChange={setShowManagement}
|
||||||
onUpdate={fetchPhotos}
|
onUpdate={() => refetch()}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* Photo Grid */}
|
{/* Photo Grid */}
|
||||||
|
|||||||
32
src/hooks/companies/useCompanyDetail.ts
Normal file
32
src/hooks/companies/useCompanyDetail.ts
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
/**
|
||||||
|
* Company Detail Hook
|
||||||
|
*
|
||||||
|
* Fetches company details with caching for efficient data access.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { useQuery } from '@tanstack/react-query';
|
||||||
|
import { supabase } from '@/integrations/supabase/client';
|
||||||
|
import { queryKeys } from '@/lib/queryKeys';
|
||||||
|
|
||||||
|
export function useCompanyDetail(slug: string | undefined, companyType: string) {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: queryKeys.companies.detail(slug || '', companyType),
|
||||||
|
queryFn: async () => {
|
||||||
|
if (!slug) return null;
|
||||||
|
|
||||||
|
const { data, error } = await supabase
|
||||||
|
.from('companies')
|
||||||
|
.select('*')
|
||||||
|
.eq('slug', slug)
|
||||||
|
.eq('company_type', companyType)
|
||||||
|
.maybeSingle();
|
||||||
|
|
||||||
|
if (error) throw error;
|
||||||
|
return data;
|
||||||
|
},
|
||||||
|
enabled: !!slug,
|
||||||
|
staleTime: 5 * 60 * 1000, // 5 minutes
|
||||||
|
gcTime: 15 * 60 * 1000,
|
||||||
|
refetchOnWindowFocus: false,
|
||||||
|
});
|
||||||
|
}
|
||||||
38
src/hooks/companies/useCompanyParks.ts
Normal file
38
src/hooks/companies/useCompanyParks.ts
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
/**
|
||||||
|
* Company Parks Hook
|
||||||
|
*
|
||||||
|
* Fetches parks operated/owned by a company with caching.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { useQuery } from '@tanstack/react-query';
|
||||||
|
import { supabase } from '@/integrations/supabase/client';
|
||||||
|
import { queryKeys } from '@/lib/queryKeys';
|
||||||
|
|
||||||
|
export function useCompanyParks(
|
||||||
|
companyId: string | undefined,
|
||||||
|
companyType: 'operator' | 'property_owner',
|
||||||
|
limit = 6
|
||||||
|
) {
|
||||||
|
const field = companyType === 'operator' ? 'operator_id' : 'property_owner_id';
|
||||||
|
|
||||||
|
return useQuery({
|
||||||
|
queryKey: queryKeys.companies.parks(companyId || '', companyType, limit),
|
||||||
|
queryFn: async () => {
|
||||||
|
if (!companyId) return [];
|
||||||
|
|
||||||
|
const { data, error } = await supabase
|
||||||
|
.from('parks')
|
||||||
|
.select('*, location:locations(*)')
|
||||||
|
.eq(field, companyId)
|
||||||
|
.order('name')
|
||||||
|
.limit(limit);
|
||||||
|
|
||||||
|
if (error) throw error;
|
||||||
|
return data || [];
|
||||||
|
},
|
||||||
|
enabled: !!companyId,
|
||||||
|
staleTime: 5 * 60 * 1000,
|
||||||
|
gcTime: 15 * 60 * 1000,
|
||||||
|
refetchOnWindowFocus: false,
|
||||||
|
});
|
||||||
|
}
|
||||||
78
src/hooks/companies/useCompanyStatistics.ts
Normal file
78
src/hooks/companies/useCompanyStatistics.ts
Normal file
@@ -0,0 +1,78 @@
|
|||||||
|
/**
|
||||||
|
* Company Statistics Hook
|
||||||
|
*
|
||||||
|
* Fetches company statistics (rides, models, photos, parks) with parallel queries.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { useQuery } from '@tanstack/react-query';
|
||||||
|
import { supabase } from '@/integrations/supabase/client';
|
||||||
|
import { queryKeys } from '@/lib/queryKeys';
|
||||||
|
|
||||||
|
export function useCompanyStatistics(companyId: string | undefined, companyType: string) {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: queryKeys.companies.statistics(companyId || '', companyType),
|
||||||
|
queryFn: async () => {
|
||||||
|
if (!companyId) return null;
|
||||||
|
|
||||||
|
// Batch fetch all statistics in parallel
|
||||||
|
const statsPromises: Promise<any>[] = [];
|
||||||
|
|
||||||
|
if (companyType === 'manufacturer') {
|
||||||
|
const [ridesRes, modelsRes, photosRes] = await Promise.all([
|
||||||
|
supabase.from('rides').select('id', { count: 'exact', head: true }).eq('manufacturer_id', companyId),
|
||||||
|
supabase.from('ride_models').select('id', { count: 'exact', head: true }).eq('manufacturer_id', companyId),
|
||||||
|
supabase.from('photos').select('id', { count: 'exact', head: true }).eq('entity_type', 'manufacturer').eq('entity_id', companyId)
|
||||||
|
]);
|
||||||
|
|
||||||
|
return {
|
||||||
|
ridesCount: ridesRes.count || 0,
|
||||||
|
modelsCount: modelsRes.count || 0,
|
||||||
|
photosCount: photosRes.count || 0,
|
||||||
|
};
|
||||||
|
} else if (companyType === 'designer') {
|
||||||
|
const [ridesRes, photosRes] = await Promise.all([
|
||||||
|
supabase.from('rides').select('id', { count: 'exact', head: true }).eq('designer_id', companyId),
|
||||||
|
supabase.from('photos').select('id', { count: 'exact', head: true }).eq('entity_type', 'designer').eq('entity_id', companyId)
|
||||||
|
]);
|
||||||
|
|
||||||
|
return {
|
||||||
|
ridesCount: ridesRes.count || 0,
|
||||||
|
photosCount: photosRes.count || 0,
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
// operator or property_owner
|
||||||
|
const parkField = companyType === 'operator' ? 'operator_id' : 'property_owner_id';
|
||||||
|
const filterField = `parks.${parkField}`;
|
||||||
|
|
||||||
|
const [parksRes, ridesRes, photosRes] = await Promise.all([
|
||||||
|
supabase.from('parks').select('id', { count: 'exact', head: true }).eq(parkField, companyId),
|
||||||
|
supabase.from('rides').select('id').eq('status', 'operating'),
|
||||||
|
supabase.from('photos').select('id', { count: 'exact', head: true }).eq('entity_type', companyType).eq('entity_id', companyId)
|
||||||
|
]);
|
||||||
|
|
||||||
|
// Filter rides data manually to avoid deep type instantiation
|
||||||
|
const allRidesIds = ridesRes.data?.map(r => r.id) || [];
|
||||||
|
const { data: ridesWithPark } = await supabase
|
||||||
|
.from('rides')
|
||||||
|
.select('id, park_id, parks!inner(operator_id, property_owner_id)')
|
||||||
|
.in('id', allRidesIds);
|
||||||
|
|
||||||
|
const operatingRides = ridesWithPark?.filter((r: any) => {
|
||||||
|
return companyType === 'operator'
|
||||||
|
? r.parks?.operator_id === companyId
|
||||||
|
: r.parks?.property_owner_id === companyId;
|
||||||
|
}) || [];
|
||||||
|
|
||||||
|
return {
|
||||||
|
parksCount: parksRes.count || 0,
|
||||||
|
operatingRidesCount: operatingRides.length,
|
||||||
|
photosCount: photosRes.count || 0,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
enabled: !!companyId,
|
||||||
|
staleTime: 10 * 60 * 1000, // 10 minutes - stats change rarely
|
||||||
|
gcTime: 20 * 60 * 1000,
|
||||||
|
refetchOnWindowFocus: false,
|
||||||
|
});
|
||||||
|
}
|
||||||
42
src/hooks/photos/useEntityPhotos.ts
Normal file
42
src/hooks/photos/useEntityPhotos.ts
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
/**
|
||||||
|
* Entity Photos Hook
|
||||||
|
*
|
||||||
|
* Fetches photos for an entity with caching and sorting support.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { useQuery } from '@tanstack/react-query';
|
||||||
|
import { supabase } from '@/integrations/supabase/client';
|
||||||
|
import { queryKeys } from '@/lib/queryKeys';
|
||||||
|
|
||||||
|
export function useEntityPhotos(
|
||||||
|
entityType: string,
|
||||||
|
entityId: string,
|
||||||
|
sortBy: 'newest' | 'oldest' = 'newest'
|
||||||
|
) {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: queryKeys.photos.entity(entityType, entityId, sortBy),
|
||||||
|
queryFn: async () => {
|
||||||
|
const { data, error } = await supabase
|
||||||
|
.from('photos')
|
||||||
|
.select('id, cloudflare_image_url, title, caption, submitted_by, created_at, order_index')
|
||||||
|
.eq('entity_type', entityType)
|
||||||
|
.eq('entity_id', entityId)
|
||||||
|
.order('created_at', { ascending: sortBy === 'oldest' });
|
||||||
|
|
||||||
|
if (error) throw error;
|
||||||
|
|
||||||
|
return data?.map((photo) => ({
|
||||||
|
id: photo.id,
|
||||||
|
url: photo.cloudflare_image_url,
|
||||||
|
caption: photo.caption || undefined,
|
||||||
|
title: photo.title || undefined,
|
||||||
|
user_id: photo.submitted_by,
|
||||||
|
created_at: photo.created_at,
|
||||||
|
})) || [];
|
||||||
|
},
|
||||||
|
enabled: !!entityType && !!entityId,
|
||||||
|
staleTime: 5 * 60 * 1000,
|
||||||
|
gcTime: 15 * 60 * 1000,
|
||||||
|
refetchOnWindowFocus: false,
|
||||||
|
});
|
||||||
|
}
|
||||||
158
src/hooks/profile/useProfileActivity.ts
Normal file
158
src/hooks/profile/useProfileActivity.ts
Normal file
@@ -0,0 +1,158 @@
|
|||||||
|
/**
|
||||||
|
* Profile Activity Hook
|
||||||
|
*
|
||||||
|
* Fetches user activity feed with privacy checks and batch optimization.
|
||||||
|
* Eliminates N+1 queries for photo submissions.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { useQuery } from '@tanstack/react-query';
|
||||||
|
import { supabase } from '@/integrations/supabase/client';
|
||||||
|
import { queryKeys } from '@/lib/queryKeys';
|
||||||
|
|
||||||
|
export function useProfileActivity(
|
||||||
|
userId: string | undefined,
|
||||||
|
isOwnProfile: boolean,
|
||||||
|
isModerator: boolean
|
||||||
|
) {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: queryKeys.profile.activity(userId || '', isOwnProfile, isModerator),
|
||||||
|
queryFn: async () => {
|
||||||
|
if (!userId) return [];
|
||||||
|
|
||||||
|
// Check privacy settings first
|
||||||
|
const { data: preferences } = await supabase
|
||||||
|
.from('user_preferences')
|
||||||
|
.select('privacy_settings')
|
||||||
|
.eq('user_id', userId)
|
||||||
|
.single();
|
||||||
|
|
||||||
|
const privacySettings = preferences?.privacy_settings as { activity_visibility?: string } | null;
|
||||||
|
const activityVisibility = privacySettings?.activity_visibility || 'public';
|
||||||
|
|
||||||
|
if (activityVisibility !== 'public' && !isOwnProfile && !isModerator) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fetch all activity types in parallel
|
||||||
|
const [reviews, credits, submissions, rankings] = await Promise.all([
|
||||||
|
// Reviews query
|
||||||
|
supabase.from('reviews')
|
||||||
|
.select('id, rating, title, created_at, moderation_status, park_id, ride_id, parks(name, slug), rides(name, slug, parks(name, slug))')
|
||||||
|
.eq('user_id', userId)
|
||||||
|
.eq('moderation_status', isOwnProfile || isModerator ? undefined : 'approved')
|
||||||
|
.order('created_at', { ascending: false })
|
||||||
|
.limit(10)
|
||||||
|
.then(res => res.data || []),
|
||||||
|
|
||||||
|
// Credits query
|
||||||
|
supabase.from('user_ride_credits')
|
||||||
|
.select('id, ride_count, first_ride_date, created_at, rides(name, slug, parks(name, slug))')
|
||||||
|
.eq('user_id', userId)
|
||||||
|
.order('created_at', { ascending: false })
|
||||||
|
.limit(10)
|
||||||
|
.then(res => res.data || []),
|
||||||
|
|
||||||
|
// Submissions query
|
||||||
|
supabase.from('content_submissions')
|
||||||
|
.select('id, submission_type, content, status, created_at')
|
||||||
|
.eq('user_id', userId)
|
||||||
|
.eq('status', isOwnProfile || isModerator ? undefined : 'approved')
|
||||||
|
.order('created_at', { ascending: false })
|
||||||
|
.limit(10)
|
||||||
|
.then(res => res.data || []),
|
||||||
|
|
||||||
|
// Rankings query
|
||||||
|
supabase.from('user_top_lists')
|
||||||
|
.select('id, title, description, list_type, created_at')
|
||||||
|
.eq('user_id', userId)
|
||||||
|
.eq('is_public', isOwnProfile ? undefined : true)
|
||||||
|
.order('created_at', { ascending: false })
|
||||||
|
.limit(10)
|
||||||
|
.then(res => res.data || [])
|
||||||
|
]);
|
||||||
|
|
||||||
|
// Enrich photo submissions in batch
|
||||||
|
const photoSubmissions = submissions.filter(s => s.submission_type === 'photo');
|
||||||
|
const photoSubmissionIds = photoSubmissions.map(s => s.id);
|
||||||
|
|
||||||
|
if (photoSubmissionIds.length > 0) {
|
||||||
|
// Batch fetch photo submission data
|
||||||
|
const { data: photoSubs } = await supabase
|
||||||
|
.from('photo_submissions')
|
||||||
|
.select('id, submission_id, entity_type, entity_id')
|
||||||
|
.in('submission_id', photoSubmissionIds);
|
||||||
|
|
||||||
|
if (photoSubs) {
|
||||||
|
// Batch fetch photo items
|
||||||
|
const photoSubIds = photoSubs.map(ps => ps.id);
|
||||||
|
const { data: photoItems } = await supabase
|
||||||
|
.from('photo_submission_items')
|
||||||
|
.select('photo_submission_id, cloudflare_image_url')
|
||||||
|
.in('photo_submission_id', photoSubIds)
|
||||||
|
.order('order_index', { ascending: true });
|
||||||
|
|
||||||
|
// Group entity IDs by type for batch fetching
|
||||||
|
const parkIds = photoSubs.filter(ps => ps.entity_type === 'park').map(ps => ps.entity_id);
|
||||||
|
const rideIds = photoSubs.filter(ps => ps.entity_type === 'ride').map(ps => ps.entity_id);
|
||||||
|
|
||||||
|
// Batch fetch entities
|
||||||
|
const [parks, rides] = await Promise.all([
|
||||||
|
parkIds.length ? supabase.from('parks').select('id, name, slug').in('id', parkIds).then(r => r.data || []) : [],
|
||||||
|
rideIds.length ? supabase.from('rides').select('id, name, slug, parks!inner(name, slug)').in('id', rideIds).then(r => r.data || []) : []
|
||||||
|
]);
|
||||||
|
|
||||||
|
// Create lookup maps
|
||||||
|
const photoSubMap = new Map(photoSubs.map(ps => [ps.submission_id, ps]));
|
||||||
|
const photoItemsMap = new Map<string, any[]>();
|
||||||
|
photoItems?.forEach(item => {
|
||||||
|
if (!photoItemsMap.has(item.photo_submission_id)) {
|
||||||
|
photoItemsMap.set(item.photo_submission_id, []);
|
||||||
|
}
|
||||||
|
photoItemsMap.get(item.photo_submission_id)!.push(item);
|
||||||
|
});
|
||||||
|
const entityMap = new Map<string, any>([
|
||||||
|
...parks.map((p: any) => [p.id, p] as [string, any]),
|
||||||
|
...rides.map((r: any) => [r.id, r] as [string, any])
|
||||||
|
]);
|
||||||
|
|
||||||
|
// Enrich submissions
|
||||||
|
photoSubmissions.forEach((sub: any) => {
|
||||||
|
const photoSub = photoSubMap.get(sub.id);
|
||||||
|
if (photoSub) {
|
||||||
|
const items = photoItemsMap.get(photoSub.id) || [];
|
||||||
|
sub.photo_count = items.length;
|
||||||
|
sub.photo_preview = items[0]?.cloudflare_image_url;
|
||||||
|
sub.entity_type = photoSub.entity_type;
|
||||||
|
sub.entity_id = photoSub.entity_id;
|
||||||
|
|
||||||
|
const entity = entityMap.get(photoSub.entity_id);
|
||||||
|
if (entity) {
|
||||||
|
sub.content = {
|
||||||
|
...(typeof sub.content === 'object' ? sub.content : {}),
|
||||||
|
entity_name: entity.name,
|
||||||
|
entity_slug: entity.slug,
|
||||||
|
...(entity.parks && { park_name: entity.parks.name, park_slug: entity.parks.slug })
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Combine and sort
|
||||||
|
const combined = [
|
||||||
|
...reviews.map(r => ({ ...r, type: 'review' as const })),
|
||||||
|
...credits.map(c => ({ ...c, type: 'credit' as const })),
|
||||||
|
...submissions.map(s => ({ ...s, type: 'submission' as const })),
|
||||||
|
...rankings.map(r => ({ ...r, type: 'ranking' as const }))
|
||||||
|
].sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
|
||||||
|
.slice(0, 15);
|
||||||
|
|
||||||
|
return combined;
|
||||||
|
},
|
||||||
|
enabled: !!userId,
|
||||||
|
staleTime: 3 * 60 * 1000, // 3 minutes - activity updates frequently
|
||||||
|
gcTime: 10 * 60 * 1000,
|
||||||
|
refetchOnWindowFocus: false,
|
||||||
|
});
|
||||||
|
}
|
||||||
37
src/hooks/profile/useProfileStats.ts
Normal file
37
src/hooks/profile/useProfileStats.ts
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
/**
|
||||||
|
* Profile Stats Hook
|
||||||
|
*
|
||||||
|
* Fetches calculated user statistics (rides, coasters, parks).
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { useQuery } from '@tanstack/react-query';
|
||||||
|
import { supabase } from '@/integrations/supabase/client';
|
||||||
|
import { queryKeys } from '@/lib/queryKeys';
|
||||||
|
|
||||||
|
export function useProfileStats(userId: string | undefined) {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: queryKeys.profile.stats(userId || ''),
|
||||||
|
queryFn: async () => {
|
||||||
|
if (!userId) return { rideCount: 0, coasterCount: 0, parkCount: 0 };
|
||||||
|
|
||||||
|
const { data: ridesData } = await supabase
|
||||||
|
.from('user_ride_credits')
|
||||||
|
.select('ride_count, rides!inner(category, park_id)')
|
||||||
|
.eq('user_id', userId);
|
||||||
|
|
||||||
|
const totalRides = ridesData?.reduce((sum, credit) => sum + (credit.ride_count || 0), 0) || 0;
|
||||||
|
const coasterRides = ridesData?.filter(credit => credit.rides?.category === 'roller_coaster') || [];
|
||||||
|
const uniqueCoasters = new Set(coasterRides.map(credit => credit.rides));
|
||||||
|
const coasterCount = uniqueCoasters.size;
|
||||||
|
const parkRides = ridesData?.map(credit => credit.rides?.park_id).filter(Boolean) || [];
|
||||||
|
const uniqueParks = new Set(parkRides);
|
||||||
|
const parkCount = uniqueParks.size;
|
||||||
|
|
||||||
|
return { rideCount: totalRides, coasterCount, parkCount };
|
||||||
|
},
|
||||||
|
enabled: !!userId,
|
||||||
|
staleTime: 5 * 60 * 1000, // 5 minutes
|
||||||
|
gcTime: 15 * 60 * 1000,
|
||||||
|
refetchOnWindowFocus: false,
|
||||||
|
});
|
||||||
|
}
|
||||||
39
src/hooks/rideModels/useModelRides.ts
Normal file
39
src/hooks/rideModels/useModelRides.ts
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
/**
|
||||||
|
* Model Rides Hook
|
||||||
|
*
|
||||||
|
* Fetches rides using a specific ride model with caching.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { useQuery } from '@tanstack/react-query';
|
||||||
|
import { supabase } from '@/integrations/supabase/client';
|
||||||
|
import { queryKeys } from '@/lib/queryKeys';
|
||||||
|
|
||||||
|
export function useModelRides(modelId: string | undefined, limit?: number) {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: queryKeys.rideModels.rides(modelId || '', limit),
|
||||||
|
queryFn: async () => {
|
||||||
|
if (!modelId) return [];
|
||||||
|
|
||||||
|
let query = supabase
|
||||||
|
.from('rides')
|
||||||
|
.select(`
|
||||||
|
*,
|
||||||
|
park:parks!inner(name, slug, location:locations(*)),
|
||||||
|
manufacturer:companies!rides_manufacturer_id_fkey(*),
|
||||||
|
ride_model:ride_models(id, name, slug, manufacturer_id, category)
|
||||||
|
`)
|
||||||
|
.eq('ride_model_id', modelId)
|
||||||
|
.order('name');
|
||||||
|
|
||||||
|
if (limit) query = query.limit(limit);
|
||||||
|
|
||||||
|
const { data, error } = await query;
|
||||||
|
if (error) throw error;
|
||||||
|
return data || [];
|
||||||
|
},
|
||||||
|
enabled: !!modelId,
|
||||||
|
staleTime: 5 * 60 * 1000,
|
||||||
|
gcTime: 15 * 60 * 1000,
|
||||||
|
refetchOnWindowFocus: false,
|
||||||
|
});
|
||||||
|
}
|
||||||
32
src/hooks/rideModels/useModelStatistics.ts
Normal file
32
src/hooks/rideModels/useModelStatistics.ts
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
/**
|
||||||
|
* Model Statistics Hook
|
||||||
|
*
|
||||||
|
* Fetches ride model statistics (ride count, photo count) with parallel queries.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { useQuery } from '@tanstack/react-query';
|
||||||
|
import { supabase } from '@/integrations/supabase/client';
|
||||||
|
import { queryKeys } from '@/lib/queryKeys';
|
||||||
|
|
||||||
|
export function useModelStatistics(modelId: string | undefined) {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: queryKeys.rideModels.statistics(modelId || ''),
|
||||||
|
queryFn: async () => {
|
||||||
|
if (!modelId) return { rideCount: 0, photoCount: 0 };
|
||||||
|
|
||||||
|
const [ridesResult, photosResult] = await Promise.all([
|
||||||
|
supabase.from('rides').select('id', { count: 'exact', head: true }).eq('ride_model_id', modelId),
|
||||||
|
supabase.from('photos').select('id', { count: 'exact', head: true }).eq('entity_type', 'ride_model').eq('entity_id', modelId)
|
||||||
|
]);
|
||||||
|
|
||||||
|
return {
|
||||||
|
rideCount: ridesResult.count || 0,
|
||||||
|
photoCount: photosResult.count || 0
|
||||||
|
};
|
||||||
|
},
|
||||||
|
enabled: !!modelId,
|
||||||
|
staleTime: 10 * 60 * 1000,
|
||||||
|
gcTime: 20 * 60 * 1000,
|
||||||
|
refetchOnWindowFocus: false,
|
||||||
|
});
|
||||||
|
}
|
||||||
48
src/hooks/rideModels/useRideModelDetail.ts
Normal file
48
src/hooks/rideModels/useRideModelDetail.ts
Normal file
@@ -0,0 +1,48 @@
|
|||||||
|
/**
|
||||||
|
* Ride Model Detail Hook
|
||||||
|
*
|
||||||
|
* Fetches ride model and manufacturer data with caching.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { useQuery } from '@tanstack/react-query';
|
||||||
|
import { supabase } from '@/integrations/supabase/client';
|
||||||
|
import { queryKeys } from '@/lib/queryKeys';
|
||||||
|
|
||||||
|
export function useRideModelDetail(
|
||||||
|
manufacturerSlug: string | undefined,
|
||||||
|
modelSlug: string | undefined
|
||||||
|
) {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: queryKeys.rideModels.detail(manufacturerSlug || '', modelSlug || ''),
|
||||||
|
queryFn: async () => {
|
||||||
|
if (!manufacturerSlug || !modelSlug) return null;
|
||||||
|
|
||||||
|
// Fetch manufacturer first
|
||||||
|
const { data: manufacturer, error: mfgError } = await supabase
|
||||||
|
.from('companies')
|
||||||
|
.select('*')
|
||||||
|
.eq('slug', manufacturerSlug)
|
||||||
|
.eq('company_type', 'manufacturer')
|
||||||
|
.maybeSingle();
|
||||||
|
|
||||||
|
if (mfgError) throw mfgError;
|
||||||
|
if (!manufacturer) return null;
|
||||||
|
|
||||||
|
// Fetch ride model
|
||||||
|
const { data: model, error: modelError } = await supabase
|
||||||
|
.from('ride_models')
|
||||||
|
.select('*')
|
||||||
|
.eq('slug', modelSlug)
|
||||||
|
.eq('manufacturer_id', manufacturer.id)
|
||||||
|
.maybeSingle();
|
||||||
|
|
||||||
|
if (modelError) throw modelError;
|
||||||
|
|
||||||
|
return model ? { model, manufacturer } : null;
|
||||||
|
},
|
||||||
|
enabled: !!manufacturerSlug && !!modelSlug,
|
||||||
|
staleTime: 5 * 60 * 1000,
|
||||||
|
gcTime: 15 * 60 * 1000,
|
||||||
|
refetchOnWindowFocus: false,
|
||||||
|
});
|
||||||
|
}
|
||||||
@@ -186,5 +186,69 @@ export function useQueryInvalidation() {
|
|||||||
queryKey: ['homepage', 'featured-parks']
|
queryKey: ['homepage', 'featured-parks']
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Invalidate company detail cache
|
||||||
|
* Call this after updating a company
|
||||||
|
*/
|
||||||
|
invalidateCompanyDetail: (slug: string, type: string) => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: queryKeys.companies.detail(slug, type) });
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Invalidate company statistics cache
|
||||||
|
* Call this after changes affecting company stats
|
||||||
|
*/
|
||||||
|
invalidateCompanyStatistics: (id: string, type: string) => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: queryKeys.companies.statistics(id, type) });
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Invalidate company parks cache
|
||||||
|
* Call this after park changes
|
||||||
|
*/
|
||||||
|
invalidateCompanyParks: (id: string, type: 'operator' | 'property_owner') => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['companies', 'parks', id, type] });
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Invalidate profile activity cache
|
||||||
|
* Call this after user activity changes
|
||||||
|
*/
|
||||||
|
invalidateProfileActivity: (userId: string) => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['profile', 'activity', userId] });
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Invalidate profile stats cache
|
||||||
|
* Call this after user stats changes
|
||||||
|
*/
|
||||||
|
invalidateProfileStats: (userId: string) => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: queryKeys.profile.stats(userId) });
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Invalidate ride model detail cache
|
||||||
|
* Call this after updating a ride model
|
||||||
|
*/
|
||||||
|
invalidateRideModelDetail: (manufacturerSlug: string, modelSlug: string) => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: queryKeys.rideModels.detail(manufacturerSlug, modelSlug) });
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Invalidate ride model statistics cache
|
||||||
|
* Call this after changes affecting model stats
|
||||||
|
*/
|
||||||
|
invalidateRideModelStatistics: (modelId: string) => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: queryKeys.rideModels.statistics(modelId) });
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Invalidate model rides cache
|
||||||
|
* Call this after ride changes
|
||||||
|
*/
|
||||||
|
invalidateModelRides: (modelId: string) => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['ride-models', 'rides', modelId] });
|
||||||
|
},
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -62,8 +62,8 @@ export const queryKeys = {
|
|||||||
|
|
||||||
// Photos queries
|
// Photos queries
|
||||||
photos: {
|
photos: {
|
||||||
entity: (entityType: string, entityId: string) =>
|
entity: (entityType: string, entityId: string, sortBy?: string) =>
|
||||||
['photos', entityType, entityId] as const,
|
['photos', entityType, entityId, sortBy] as const,
|
||||||
count: (entityType: string, entityId: string) =>
|
count: (entityType: string, entityId: string) =>
|
||||||
['photos', 'count', entityType, entityId] as const,
|
['photos', 'count', entityType, entityId] as const,
|
||||||
},
|
},
|
||||||
@@ -77,4 +77,30 @@ export const queryKeys = {
|
|||||||
lists: {
|
lists: {
|
||||||
items: (listId: string) => ['list-items', listId] as const,
|
items: (listId: string) => ['list-items', listId] as const,
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// Company queries
|
||||||
|
companies: {
|
||||||
|
all: (type: string) => ['companies', 'all', type] as const,
|
||||||
|
detail: (slug: string, type: string) => ['companies', 'detail', slug, type] as const,
|
||||||
|
statistics: (id: string, type: string) => ['companies', 'statistics', id, type] as const,
|
||||||
|
parks: (id: string, type: string, limit: number) => ['companies', 'parks', id, type, limit] as const,
|
||||||
|
},
|
||||||
|
|
||||||
|
// Profile queries
|
||||||
|
profile: {
|
||||||
|
detail: (userId: string) => ['profile', userId] as const,
|
||||||
|
activity: (userId: string, isOwn: boolean, isMod: boolean) =>
|
||||||
|
['profile', 'activity', userId, isOwn, isMod] as const,
|
||||||
|
stats: (userId: string) => ['profile', 'stats', userId] as const,
|
||||||
|
},
|
||||||
|
|
||||||
|
// Ride Models queries
|
||||||
|
rideModels: {
|
||||||
|
all: (manufacturerId: string) => ['ride-models', 'all', manufacturerId] as const,
|
||||||
|
detail: (manufacturerSlug: string, modelSlug: string) =>
|
||||||
|
['ride-models', 'detail', manufacturerSlug, modelSlug] as const,
|
||||||
|
rides: (modelId: string, limit?: number) =>
|
||||||
|
['ride-models', 'rides', modelId, limit] as const,
|
||||||
|
statistics: (modelId: string) => ['ride-models', 'statistics', modelId] as const,
|
||||||
|
},
|
||||||
} as const;
|
} as const;
|
||||||
|
|||||||
@@ -26,20 +26,21 @@ import { trackPageView } from '@/lib/viewTracking';
|
|||||||
import { useAuthModal } from '@/hooks/useAuthModal';
|
import { useAuthModal } from '@/hooks/useAuthModal';
|
||||||
import { useDocumentTitle } from '@/hooks/useDocumentTitle';
|
import { useDocumentTitle } from '@/hooks/useDocumentTitle';
|
||||||
import { useOpenGraph } from '@/hooks/useOpenGraph';
|
import { useOpenGraph } from '@/hooks/useOpenGraph';
|
||||||
|
import { useCompanyDetail } from '@/hooks/companies/useCompanyDetail';
|
||||||
|
import { useCompanyStatistics } from '@/hooks/companies/useCompanyStatistics';
|
||||||
|
|
||||||
export default function DesignerDetail() {
|
export default function DesignerDetail() {
|
||||||
const { slug } = useParams<{ slug: string }>();
|
const { slug } = useParams<{ slug: string }>();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const [designer, setDesigner] = useState<Company | null>(null);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [isEditModalOpen, setIsEditModalOpen] = useState(false);
|
const [isEditModalOpen, setIsEditModalOpen] = useState(false);
|
||||||
const [totalRides, setTotalRides] = useState<number>(0);
|
|
||||||
const [totalPhotos, setTotalPhotos] = useState<number>(0);
|
|
||||||
const [statsLoading, setStatsLoading] = useState(true);
|
|
||||||
const { user } = useAuth();
|
const { user } = useAuth();
|
||||||
const { isModerator } = useUserRole();
|
const { isModerator } = useUserRole();
|
||||||
const { requireAuth } = useAuthModal();
|
const { requireAuth } = useAuthModal();
|
||||||
|
|
||||||
|
// Use custom hooks for data fetching
|
||||||
|
const { data: designer, isLoading: loading } = useCompanyDetail(slug, 'designer');
|
||||||
|
const { data: statistics, isLoading: statsLoading } = useCompanyStatistics(designer?.id, 'designer');
|
||||||
|
|
||||||
// Update document title when designer changes
|
// Update document title when designer changes
|
||||||
useDocumentTitle(designer?.name || 'Designer Details');
|
useDocumentTitle(designer?.name || 'Designer Details');
|
||||||
|
|
||||||
@@ -53,12 +54,6 @@ export default function DesignerDetail() {
|
|||||||
enabled: !!designer
|
enabled: !!designer
|
||||||
});
|
});
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (slug) {
|
|
||||||
fetchDesignerData();
|
|
||||||
}
|
|
||||||
}, [slug]);
|
|
||||||
|
|
||||||
// Track page view when designer is loaded
|
// Track page view when designer is loaded
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (designer?.id) {
|
if (designer?.id) {
|
||||||
@@ -66,54 +61,6 @@ export default function DesignerDetail() {
|
|||||||
}
|
}
|
||||||
}, [designer?.id]);
|
}, [designer?.id]);
|
||||||
|
|
||||||
const fetchDesignerData = async () => {
|
|
||||||
try {
|
|
||||||
const { data, error } = await supabase
|
|
||||||
.from('companies')
|
|
||||||
.select('*')
|
|
||||||
.eq('slug', slug)
|
|
||||||
.eq('company_type', 'designer')
|
|
||||||
.maybeSingle();
|
|
||||||
|
|
||||||
if (error) throw error;
|
|
||||||
setDesigner(data);
|
|
||||||
if (data) {
|
|
||||||
fetchStatistics(data.id);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error fetching designer:', error);
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const fetchStatistics = async (designerId: string) => {
|
|
||||||
try {
|
|
||||||
// Count rides
|
|
||||||
const { count: ridesCount, error: ridesError } = await supabase
|
|
||||||
.from('rides')
|
|
||||||
.select('id', { count: 'exact', head: true })
|
|
||||||
.eq('designer_id', designerId);
|
|
||||||
|
|
||||||
if (ridesError) throw ridesError;
|
|
||||||
setTotalRides(ridesCount || 0);
|
|
||||||
|
|
||||||
// Count photos
|
|
||||||
const { count: photosCount, error: photosError } = await supabase
|
|
||||||
.from('photos')
|
|
||||||
.select('id', { count: 'exact', head: true })
|
|
||||||
.eq('entity_type', 'designer')
|
|
||||||
.eq('entity_id', designerId);
|
|
||||||
|
|
||||||
if (photosError) throw photosError;
|
|
||||||
setTotalPhotos(photosCount || 0);
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error fetching statistics:', error);
|
|
||||||
} finally {
|
|
||||||
setStatsLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleEditSubmit = async (data: any) => {
|
const handleEditSubmit = async (data: any) => {
|
||||||
try {
|
try {
|
||||||
await submitCompanyUpdate(
|
await submitCompanyUpdate(
|
||||||
@@ -295,10 +242,10 @@ export default function DesignerDetail() {
|
|||||||
<TabsList className="grid w-full grid-cols-2 md:grid-cols-4">
|
<TabsList className="grid w-full grid-cols-2 md:grid-cols-4">
|
||||||
<TabsTrigger value="overview">Overview</TabsTrigger>
|
<TabsTrigger value="overview">Overview</TabsTrigger>
|
||||||
<TabsTrigger value="rides">
|
<TabsTrigger value="rides">
|
||||||
Rides {!statsLoading && totalRides > 0 && `(${totalRides})`}
|
Rides {!statsLoading && statistics?.ridesCount ? `(${statistics.ridesCount})` : ''}
|
||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
<TabsTrigger value="photos">
|
<TabsTrigger value="photos">
|
||||||
Photos {!statsLoading && totalPhotos > 0 && `(${totalPhotos})`}
|
Photos {!statsLoading && statistics?.photosCount ? `(${statistics.photosCount})` : ''}
|
||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
<TabsTrigger value="history">History</TabsTrigger>
|
<TabsTrigger value="history">History</TabsTrigger>
|
||||||
</TabsList>
|
</TabsList>
|
||||||
|
|||||||
@@ -26,21 +26,21 @@ import { EntityHistoryTabs } from '@/components/history/EntityHistoryTabs';
|
|||||||
import { useAuthModal } from '@/hooks/useAuthModal';
|
import { useAuthModal } from '@/hooks/useAuthModal';
|
||||||
import { useDocumentTitle } from '@/hooks/useDocumentTitle';
|
import { useDocumentTitle } from '@/hooks/useDocumentTitle';
|
||||||
import { useOpenGraph } from '@/hooks/useOpenGraph';
|
import { useOpenGraph } from '@/hooks/useOpenGraph';
|
||||||
|
import { useCompanyDetail } from '@/hooks/companies/useCompanyDetail';
|
||||||
|
import { useCompanyStatistics } from '@/hooks/companies/useCompanyStatistics';
|
||||||
|
|
||||||
export default function ManufacturerDetail() {
|
export default function ManufacturerDetail() {
|
||||||
const { slug } = useParams<{ slug: string }>();
|
const { slug } = useParams<{ slug: string }>();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const [manufacturer, setManufacturer] = useState<Company | null>(null);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [isEditModalOpen, setIsEditModalOpen] = useState(false);
|
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 { user } = useAuth();
|
||||||
const { isModerator } = useUserRole();
|
const { isModerator } = useUserRole();
|
||||||
const { requireAuth } = useAuthModal();
|
const { requireAuth } = useAuthModal();
|
||||||
|
|
||||||
|
// Use custom hooks for data fetching
|
||||||
|
const { data: manufacturer, isLoading: loading } = useCompanyDetail(slug, 'manufacturer');
|
||||||
|
const { data: statistics, isLoading: statsLoading } = useCompanyStatistics(manufacturer?.id, 'manufacturer');
|
||||||
|
|
||||||
// Update document title when manufacturer changes
|
// Update document title when manufacturer changes
|
||||||
useDocumentTitle(manufacturer?.name || 'Manufacturer Details');
|
useDocumentTitle(manufacturer?.name || 'Manufacturer Details');
|
||||||
|
|
||||||
@@ -54,12 +54,6 @@ export default function ManufacturerDetail() {
|
|||||||
enabled: !!manufacturer
|
enabled: !!manufacturer
|
||||||
});
|
});
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (slug) {
|
|
||||||
fetchManufacturerData();
|
|
||||||
}
|
|
||||||
}, [slug]);
|
|
||||||
|
|
||||||
// Track page view when manufacturer is loaded
|
// Track page view when manufacturer is loaded
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (manufacturer?.id) {
|
if (manufacturer?.id) {
|
||||||
@@ -67,63 +61,6 @@ export default function ManufacturerDetail() {
|
|||||||
}
|
}
|
||||||
}, [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) {
|
|
||||||
console.error('Error fetching manufacturer:', error);
|
|
||||||
} 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) {
|
|
||||||
console.error('Error fetching statistics:', error);
|
|
||||||
} finally {
|
|
||||||
setStatsLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleEditSubmit = async (data: any) => {
|
const handleEditSubmit = async (data: any) => {
|
||||||
try {
|
try {
|
||||||
await submitCompanyUpdate(
|
await submitCompanyUpdate(
|
||||||
@@ -307,13 +244,13 @@ export default function ManufacturerDetail() {
|
|||||||
<TabsList className="grid w-full grid-cols-2 md:grid-cols-5">
|
<TabsList className="grid w-full grid-cols-2 md:grid-cols-5">
|
||||||
<TabsTrigger value="overview">Overview</TabsTrigger>
|
<TabsTrigger value="overview">Overview</TabsTrigger>
|
||||||
<TabsTrigger value="rides">
|
<TabsTrigger value="rides">
|
||||||
Rides {!statsLoading && totalRides > 0 && `(${totalRides})`}
|
Rides {!statsLoading && statistics?.ridesCount ? `(${statistics.ridesCount})` : ''}
|
||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
<TabsTrigger value="models">
|
<TabsTrigger value="models">
|
||||||
Models {!statsLoading && totalModels > 0 && `(${totalModels})`}
|
Models {!statsLoading && statistics?.modelsCount ? `(${statistics.modelsCount})` : ''}
|
||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
<TabsTrigger value="photos">
|
<TabsTrigger value="photos">
|
||||||
Photos {!statsLoading && totalPhotos > 0 && `(${totalPhotos})`}
|
Photos {!statsLoading && statistics?.photosCount ? `(${statistics.photosCount})` : ''}
|
||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
<TabsTrigger value="history">History</TabsTrigger>
|
<TabsTrigger value="history">History</TabsTrigger>
|
||||||
</TabsList>
|
</TabsList>
|
||||||
|
|||||||
@@ -27,23 +27,23 @@ import { EntityHistoryTabs } from '@/components/history/EntityHistoryTabs';
|
|||||||
import { useAuthModal } from '@/hooks/useAuthModal';
|
import { useAuthModal } from '@/hooks/useAuthModal';
|
||||||
import { useDocumentTitle } from '@/hooks/useDocumentTitle';
|
import { useDocumentTitle } from '@/hooks/useDocumentTitle';
|
||||||
import { useOpenGraph } from '@/hooks/useOpenGraph';
|
import { useOpenGraph } from '@/hooks/useOpenGraph';
|
||||||
|
import { useCompanyDetail } from '@/hooks/companies/useCompanyDetail';
|
||||||
|
import { useCompanyStatistics } from '@/hooks/companies/useCompanyStatistics';
|
||||||
|
import { useCompanyParks } from '@/hooks/companies/useCompanyParks';
|
||||||
|
|
||||||
export default function OperatorDetail() {
|
export default function OperatorDetail() {
|
||||||
const { slug } = useParams<{ slug: string }>();
|
const { slug } = useParams<{ slug: string }>();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const [operator, setOperator] = useState<Company | null>(null);
|
|
||||||
const [parks, setParks] = useState<Park[]>([]);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [parksLoading, setParksLoading] = useState(true);
|
|
||||||
const [isEditModalOpen, setIsEditModalOpen] = useState(false);
|
const [isEditModalOpen, setIsEditModalOpen] = useState(false);
|
||||||
const [totalParks, setTotalParks] = useState<number>(0);
|
|
||||||
const [operatingRides, setOperatingRides] = useState<number>(0);
|
|
||||||
const [statsLoading, setStatsLoading] = useState(true);
|
|
||||||
const [totalPhotos, setTotalPhotos] = useState<number>(0);
|
|
||||||
const { user } = useAuth();
|
const { user } = useAuth();
|
||||||
const { isModerator } = useUserRole();
|
const { isModerator } = useUserRole();
|
||||||
const { requireAuth } = useAuthModal();
|
const { requireAuth } = useAuthModal();
|
||||||
|
|
||||||
|
// Use custom hooks for data fetching
|
||||||
|
const { data: operator, isLoading: loading } = useCompanyDetail(slug, 'operator');
|
||||||
|
const { data: statistics, isLoading: statsLoading } = useCompanyStatistics(operator?.id, 'operator');
|
||||||
|
const { data: parks = [], isLoading: parksLoading } = useCompanyParks(operator?.id, 'operator', 6);
|
||||||
|
|
||||||
// Update document title when operator changes
|
// Update document title when operator changes
|
||||||
useDocumentTitle(operator?.name || 'Operator Details');
|
useDocumentTitle(operator?.name || 'Operator Details');
|
||||||
|
|
||||||
@@ -57,12 +57,6 @@ export default function OperatorDetail() {
|
|||||||
enabled: !!operator
|
enabled: !!operator
|
||||||
});
|
});
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (slug) {
|
|
||||||
fetchOperatorData();
|
|
||||||
}
|
|
||||||
}, [slug]);
|
|
||||||
|
|
||||||
// Track page view when operator is loaded
|
// Track page view when operator is loaded
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (operator?.id) {
|
if (operator?.id) {
|
||||||
@@ -70,95 +64,6 @@ export default function OperatorDetail() {
|
|||||||
}
|
}
|
||||||
}, [operator?.id]);
|
}, [operator?.id]);
|
||||||
|
|
||||||
const fetchOperatorData = async () => {
|
|
||||||
try {
|
|
||||||
const { data, error } = await supabase
|
|
||||||
.from('companies')
|
|
||||||
.select('*')
|
|
||||||
.eq('slug', slug)
|
|
||||||
.eq('company_type', 'operator')
|
|
||||||
.maybeSingle();
|
|
||||||
|
|
||||||
if (error) throw error;
|
|
||||||
setOperator(data);
|
|
||||||
|
|
||||||
// Fetch parks operated by this operator
|
|
||||||
if (data) {
|
|
||||||
fetchParks(data.id);
|
|
||||||
fetchStatistics(data.id);
|
|
||||||
fetchPhotoCount(data.id);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error fetching operator:', error);
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const fetchParks = async (operatorId: string) => {
|
|
||||||
try {
|
|
||||||
const { data, error } = await supabase
|
|
||||||
.from('parks')
|
|
||||||
.select(`
|
|
||||||
*,
|
|
||||||
location:locations(*)
|
|
||||||
`)
|
|
||||||
.eq('operator_id', operatorId)
|
|
||||||
.order('name')
|
|
||||||
.limit(6);
|
|
||||||
|
|
||||||
if (error) throw error;
|
|
||||||
setParks(data || []);
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error fetching parks:', error);
|
|
||||||
} finally {
|
|
||||||
setParksLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const fetchStatistics = async (operatorId: string) => {
|
|
||||||
try {
|
|
||||||
// Get total parks count
|
|
||||||
const { count: parksCount, error: parksError } = await supabase
|
|
||||||
.from('parks')
|
|
||||||
.select('id', { count: 'exact', head: true })
|
|
||||||
.eq('operator_id', operatorId);
|
|
||||||
|
|
||||||
if (parksError) throw parksError;
|
|
||||||
setTotalParks(parksCount || 0);
|
|
||||||
|
|
||||||
// Get operating rides count across all parks
|
|
||||||
const { data: ridesData, error: ridesError } = await supabase
|
|
||||||
.from('rides')
|
|
||||||
.select('id, parks!inner(operator_id)')
|
|
||||||
.eq('parks.operator_id', operatorId)
|
|
||||||
.eq('status', 'operating');
|
|
||||||
|
|
||||||
if (ridesError) throw ridesError;
|
|
||||||
setOperatingRides(ridesData?.length || 0);
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error fetching statistics:', error);
|
|
||||||
} finally {
|
|
||||||
setStatsLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const fetchPhotoCount = async (operatorId: string) => {
|
|
||||||
try {
|
|
||||||
const { count, error } = await supabase
|
|
||||||
.from('photos')
|
|
||||||
.select('id', { count: 'exact', head: true })
|
|
||||||
.eq('entity_type', 'operator')
|
|
||||||
.eq('entity_id', operatorId);
|
|
||||||
|
|
||||||
if (error) throw error;
|
|
||||||
setTotalPhotos(count || 0);
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error fetching photo count:', error);
|
|
||||||
setTotalPhotos(0);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleEditSubmit = async (data: any) => {
|
const handleEditSubmit = async (data: any) => {
|
||||||
try {
|
try {
|
||||||
await submitCompanyUpdate(
|
await submitCompanyUpdate(
|
||||||
@@ -309,29 +214,29 @@ export default function OperatorDetail() {
|
|||||||
|
|
||||||
{/* Company Info */}
|
{/* Company Info */}
|
||||||
<div className="flex flex-wrap justify-center gap-4 mb-8">
|
<div className="flex flex-wrap justify-center gap-4 mb-8">
|
||||||
{!statsLoading && totalParks > 0 && (
|
{!statsLoading && statistics?.parksCount ? (
|
||||||
<Card>
|
<Card>
|
||||||
<CardContent className="p-4 text-center">
|
<CardContent className="p-4 text-center">
|
||||||
<FerrisWheel className="w-6 h-6 text-primary mx-auto mb-2" />
|
<FerrisWheel className="w-6 h-6 text-primary mx-auto mb-2" />
|
||||||
<div className="text-2xl font-bold">{totalParks}</div>
|
<div className="text-2xl font-bold">{statistics.parksCount}</div>
|
||||||
<div className="text-sm text-muted-foreground">
|
<div className="text-sm text-muted-foreground">
|
||||||
{totalParks === 1 ? 'Park Operated' : 'Parks Operated'}
|
{statistics.parksCount === 1 ? 'Park Operated' : 'Parks Operated'}
|
||||||
</div>
|
</div>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
)}
|
) : null}
|
||||||
|
|
||||||
{!statsLoading && operatingRides > 0 && (
|
{!statsLoading && statistics?.operatingRidesCount ? (
|
||||||
<Card>
|
<Card>
|
||||||
<CardContent className="p-4 text-center">
|
<CardContent className="p-4 text-center">
|
||||||
<Gauge className="w-6 h-6 text-accent mx-auto mb-2" />
|
<Gauge className="w-6 h-6 text-accent mx-auto mb-2" />
|
||||||
<div className="text-2xl font-bold">{operatingRides}</div>
|
<div className="text-2xl font-bold">{statistics.operatingRidesCount}</div>
|
||||||
<div className="text-sm text-muted-foreground">
|
<div className="text-sm text-muted-foreground">
|
||||||
Operating {operatingRides === 1 ? 'Ride' : 'Rides'}
|
Operating {statistics.operatingRidesCount === 1 ? 'Ride' : 'Rides'}
|
||||||
</div>
|
</div>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
)}
|
) : null}
|
||||||
|
|
||||||
{operator.founded_year && (
|
{operator.founded_year && (
|
||||||
<Card>
|
<Card>
|
||||||
@@ -365,10 +270,10 @@ export default function OperatorDetail() {
|
|||||||
<TabsList className="grid w-full grid-cols-2 md:grid-cols-4">
|
<TabsList className="grid w-full grid-cols-2 md:grid-cols-4">
|
||||||
<TabsTrigger value="overview">Overview</TabsTrigger>
|
<TabsTrigger value="overview">Overview</TabsTrigger>
|
||||||
<TabsTrigger value="parks">
|
<TabsTrigger value="parks">
|
||||||
Parks {!statsLoading && totalParks > 0 && `(${totalParks})`}
|
Parks {!statsLoading && statistics?.parksCount ? `(${statistics.parksCount})` : ''}
|
||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
<TabsTrigger value="photos">
|
<TabsTrigger value="photos">
|
||||||
Photos {!statsLoading && totalPhotos > 0 && `(${totalPhotos})`}
|
Photos {!statsLoading && statistics?.photosCount ? `(${statistics.photosCount})` : ''}
|
||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
<TabsTrigger value="history">History</TabsTrigger>
|
<TabsTrigger value="history">History</TabsTrigger>
|
||||||
</TabsList>
|
</TabsList>
|
||||||
|
|||||||
@@ -27,23 +27,23 @@ import { EntityHistoryTabs } from '@/components/history/EntityHistoryTabs';
|
|||||||
import { useAuthModal } from '@/hooks/useAuthModal';
|
import { useAuthModal } from '@/hooks/useAuthModal';
|
||||||
import { useDocumentTitle } from '@/hooks/useDocumentTitle';
|
import { useDocumentTitle } from '@/hooks/useDocumentTitle';
|
||||||
import { useOpenGraph } from '@/hooks/useOpenGraph';
|
import { useOpenGraph } from '@/hooks/useOpenGraph';
|
||||||
|
import { useCompanyDetail } from '@/hooks/companies/useCompanyDetail';
|
||||||
|
import { useCompanyStatistics } from '@/hooks/companies/useCompanyStatistics';
|
||||||
|
import { useCompanyParks } from '@/hooks/companies/useCompanyParks';
|
||||||
|
|
||||||
export default function PropertyOwnerDetail() {
|
export default function PropertyOwnerDetail() {
|
||||||
const { slug } = useParams<{ slug: string }>();
|
const { slug } = useParams<{ slug: string }>();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const [owner, setOwner] = useState<Company | null>(null);
|
|
||||||
const [parks, setParks] = useState<Park[]>([]);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [parksLoading, setParksLoading] = useState(true);
|
|
||||||
const [isEditModalOpen, setIsEditModalOpen] = useState(false);
|
const [isEditModalOpen, setIsEditModalOpen] = useState(false);
|
||||||
const [totalParks, setTotalParks] = useState<number>(0);
|
|
||||||
const [operatingRides, setOperatingRides] = useState<number>(0);
|
|
||||||
const [statsLoading, setStatsLoading] = useState(true);
|
|
||||||
const [totalPhotos, setTotalPhotos] = useState<number>(0);
|
|
||||||
const { user } = useAuth();
|
const { user } = useAuth();
|
||||||
const { isModerator } = useUserRole();
|
const { isModerator } = useUserRole();
|
||||||
const { requireAuth } = useAuthModal();
|
const { requireAuth } = useAuthModal();
|
||||||
|
|
||||||
|
// Use custom hooks for data fetching
|
||||||
|
const { data: owner, isLoading: loading } = useCompanyDetail(slug, 'property_owner');
|
||||||
|
const { data: statistics, isLoading: statsLoading } = useCompanyStatistics(owner?.id, 'property_owner');
|
||||||
|
const { data: parks = [], isLoading: parksLoading } = useCompanyParks(owner?.id, 'property_owner', 6);
|
||||||
|
|
||||||
// Update document title when owner changes
|
// Update document title when owner changes
|
||||||
useDocumentTitle(owner?.name || 'Property Owner Details');
|
useDocumentTitle(owner?.name || 'Property Owner Details');
|
||||||
|
|
||||||
@@ -57,12 +57,6 @@ export default function PropertyOwnerDetail() {
|
|||||||
enabled: !!owner
|
enabled: !!owner
|
||||||
});
|
});
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (slug) {
|
|
||||||
fetchOwnerData();
|
|
||||||
}
|
|
||||||
}, [slug]);
|
|
||||||
|
|
||||||
// Track page view when property owner is loaded
|
// Track page view when property owner is loaded
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (owner?.id) {
|
if (owner?.id) {
|
||||||
@@ -70,95 +64,6 @@ export default function PropertyOwnerDetail() {
|
|||||||
}
|
}
|
||||||
}, [owner?.id]);
|
}, [owner?.id]);
|
||||||
|
|
||||||
const fetchOwnerData = async () => {
|
|
||||||
try {
|
|
||||||
const { data, error } = await supabase
|
|
||||||
.from('companies')
|
|
||||||
.select('*')
|
|
||||||
.eq('slug', slug)
|
|
||||||
.eq('company_type', 'property_owner')
|
|
||||||
.maybeSingle();
|
|
||||||
|
|
||||||
if (error) throw error;
|
|
||||||
setOwner(data);
|
|
||||||
|
|
||||||
// Fetch parks owned by this property owner
|
|
||||||
if (data) {
|
|
||||||
fetchParks(data.id);
|
|
||||||
fetchStatistics(data.id);
|
|
||||||
fetchPhotoCount(data.id);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error fetching property owner:', error);
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const fetchParks = async (ownerId: string) => {
|
|
||||||
try {
|
|
||||||
const { data, error } = await supabase
|
|
||||||
.from('parks')
|
|
||||||
.select(`
|
|
||||||
*,
|
|
||||||
location:locations(*)
|
|
||||||
`)
|
|
||||||
.eq('property_owner_id', ownerId)
|
|
||||||
.order('name')
|
|
||||||
.limit(6);
|
|
||||||
|
|
||||||
if (error) throw error;
|
|
||||||
setParks(data || []);
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error fetching parks:', error);
|
|
||||||
} finally {
|
|
||||||
setParksLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const fetchStatistics = async (ownerId: string) => {
|
|
||||||
try {
|
|
||||||
// Get total parks count
|
|
||||||
const { count: parksCount, error: parksError } = await supabase
|
|
||||||
.from('parks')
|
|
||||||
.select('id', { count: 'exact', head: true })
|
|
||||||
.eq('property_owner_id', ownerId);
|
|
||||||
|
|
||||||
if (parksError) throw parksError;
|
|
||||||
setTotalParks(parksCount || 0);
|
|
||||||
|
|
||||||
// Get operating rides count across all owned parks
|
|
||||||
const { data: ridesData, error: ridesError } = await supabase
|
|
||||||
.from('rides')
|
|
||||||
.select('id, parks!inner(property_owner_id)')
|
|
||||||
.eq('parks.property_owner_id', ownerId)
|
|
||||||
.eq('status', 'operating');
|
|
||||||
|
|
||||||
if (ridesError) throw ridesError;
|
|
||||||
setOperatingRides(ridesData?.length || 0);
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error fetching statistics:', error);
|
|
||||||
} finally {
|
|
||||||
setStatsLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const fetchPhotoCount = async (ownerId: string) => {
|
|
||||||
try {
|
|
||||||
const { count, error } = await supabase
|
|
||||||
.from('photos')
|
|
||||||
.select('id', { count: 'exact', head: true })
|
|
||||||
.eq('entity_type', 'property_owner')
|
|
||||||
.eq('entity_id', ownerId);
|
|
||||||
|
|
||||||
if (error) throw error;
|
|
||||||
setTotalPhotos(count || 0);
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error fetching photo count:', error);
|
|
||||||
setTotalPhotos(0);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleEditSubmit = async (data: any) => {
|
const handleEditSubmit = async (data: any) => {
|
||||||
try {
|
try {
|
||||||
await submitCompanyUpdate(
|
await submitCompanyUpdate(
|
||||||
@@ -309,29 +214,29 @@ export default function PropertyOwnerDetail() {
|
|||||||
|
|
||||||
{/* Company Info */}
|
{/* Company Info */}
|
||||||
<div className="flex flex-wrap justify-center gap-4 mb-8">
|
<div className="flex flex-wrap justify-center gap-4 mb-8">
|
||||||
{!statsLoading && totalParks > 0 && (
|
{!statsLoading && statistics?.parksCount ? (
|
||||||
<Card>
|
<Card>
|
||||||
<CardContent className="p-4 text-center">
|
<CardContent className="p-4 text-center">
|
||||||
<Building2 className="w-6 h-6 text-primary mx-auto mb-2" />
|
<Building2 className="w-6 h-6 text-primary mx-auto mb-2" />
|
||||||
<div className="text-2xl font-bold">{totalParks}</div>
|
<div className="text-2xl font-bold">{statistics.parksCount}</div>
|
||||||
<div className="text-sm text-muted-foreground">
|
<div className="text-sm text-muted-foreground">
|
||||||
{totalParks === 1 ? 'Park Owned' : 'Parks Owned'}
|
{statistics.parksCount === 1 ? 'Park Owned' : 'Parks Owned'}
|
||||||
</div>
|
</div>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
)}
|
) : null}
|
||||||
|
|
||||||
{!statsLoading && operatingRides > 0 && (
|
{!statsLoading && statistics?.operatingRidesCount ? (
|
||||||
<Card>
|
<Card>
|
||||||
<CardContent className="p-4 text-center">
|
<CardContent className="p-4 text-center">
|
||||||
<Gauge className="w-6 h-6 text-accent mx-auto mb-2" />
|
<Gauge className="w-6 h-6 text-accent mx-auto mb-2" />
|
||||||
<div className="text-2xl font-bold">{operatingRides}</div>
|
<div className="text-2xl font-bold">{statistics.operatingRidesCount}</div>
|
||||||
<div className="text-sm text-muted-foreground">
|
<div className="text-sm text-muted-foreground">
|
||||||
Operating {operatingRides === 1 ? 'Ride' : 'Rides'}
|
Operating {statistics.operatingRidesCount === 1 ? 'Ride' : 'Rides'}
|
||||||
</div>
|
</div>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
)}
|
) : null}
|
||||||
|
|
||||||
{owner.founded_year && (
|
{owner.founded_year && (
|
||||||
<Card>
|
<Card>
|
||||||
@@ -365,10 +270,10 @@ export default function PropertyOwnerDetail() {
|
|||||||
<TabsList className="grid w-full grid-cols-2 md:grid-cols-4">
|
<TabsList className="grid w-full grid-cols-2 md:grid-cols-4">
|
||||||
<TabsTrigger value="overview">Overview</TabsTrigger>
|
<TabsTrigger value="overview">Overview</TabsTrigger>
|
||||||
<TabsTrigger value="parks">
|
<TabsTrigger value="parks">
|
||||||
Parks {!statsLoading && totalParks > 0 && `(${totalParks})`}
|
Parks {!statsLoading && statistics?.parksCount ? `(${statistics.parksCount})` : ''}
|
||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
<TabsTrigger value="photos">
|
<TabsTrigger value="photos">
|
||||||
Photos {!statsLoading && totalPhotos > 0 && `(${totalPhotos})`}
|
Photos {!statsLoading && statistics?.photosCount ? `(${statistics.photosCount})` : ''}
|
||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
<TabsTrigger value="history">History</TabsTrigger>
|
<TabsTrigger value="history">History</TabsTrigger>
|
||||||
</TabsList>
|
</TabsList>
|
||||||
|
|||||||
@@ -24,18 +24,24 @@ import { VersionIndicator } from '@/components/versioning/VersionIndicator';
|
|||||||
import { EntityVersionHistory } from '@/components/versioning/EntityVersionHistory';
|
import { EntityVersionHistory } from '@/components/versioning/EntityVersionHistory';
|
||||||
import { useDocumentTitle } from '@/hooks/useDocumentTitle';
|
import { useDocumentTitle } from '@/hooks/useDocumentTitle';
|
||||||
import { useOpenGraph } from '@/hooks/useOpenGraph';
|
import { useOpenGraph } from '@/hooks/useOpenGraph';
|
||||||
|
import { useRideModelDetail } from '@/hooks/rideModels/useRideModelDetail';
|
||||||
|
import { useModelRides } from '@/hooks/rideModels/useModelRides';
|
||||||
|
import { useModelStatistics } from '@/hooks/rideModels/useModelStatistics';
|
||||||
|
|
||||||
export default function RideModelDetail() {
|
export default function RideModelDetail() {
|
||||||
const { manufacturerSlug, modelSlug } = useParams<{ manufacturerSlug: string; modelSlug: string }>();
|
const { manufacturerSlug, modelSlug } = useParams<{ manufacturerSlug: string; modelSlug: string }>();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const { user } = useAuth();
|
const { user } = useAuth();
|
||||||
const { requireAuth } = useAuthModal();
|
const { requireAuth } = useAuthModal();
|
||||||
const [model, setModel] = useState<RideModel | null>(null);
|
|
||||||
const [manufacturer, setManufacturer] = useState<Company | null>(null);
|
|
||||||
const [rides, setRides] = useState<Ride[]>([]);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [isEditModalOpen, setIsEditModalOpen] = useState(false);
|
const [isEditModalOpen, setIsEditModalOpen] = useState(false);
|
||||||
|
|
||||||
|
// Use custom hooks for data fetching
|
||||||
|
const { data: modelData, isLoading: loading } = useRideModelDetail(manufacturerSlug, modelSlug);
|
||||||
|
const model = modelData?.model;
|
||||||
|
const manufacturer = modelData?.manufacturer;
|
||||||
|
const { data: rides = [] } = useModelRides(model?.id);
|
||||||
|
const { data: statistics = { rideCount: 0, photoCount: 0 } } = useModelStatistics(model?.id);
|
||||||
|
|
||||||
// Update document title when model changes
|
// Update document title when model changes
|
||||||
useDocumentTitle(model?.name || 'Ride Model Details');
|
useDocumentTitle(model?.name || 'Ride Model Details');
|
||||||
|
|
||||||
@@ -48,78 +54,10 @@ export default function RideModelDetail() {
|
|||||||
type: 'website',
|
type: 'website',
|
||||||
enabled: !!model
|
enabled: !!model
|
||||||
});
|
});
|
||||||
const [statistics, setStatistics] = useState({ rideCount: 0, photoCount: 0 });
|
|
||||||
|
|
||||||
// Fetch technical specifications from relational table
|
// Fetch technical specifications from relational table
|
||||||
const { data: technicalSpecs } = useTechnicalSpecifications('ride_model', model?.id);
|
const { data: technicalSpecs } = useTechnicalSpecifications('ride_model', model?.id);
|
||||||
|
|
||||||
const fetchData = useCallback(async () => {
|
|
||||||
try {
|
|
||||||
// Fetch manufacturer
|
|
||||||
const { data: manufacturerData, error: manufacturerError } = await supabase
|
|
||||||
.from('companies')
|
|
||||||
.select('*')
|
|
||||||
.eq('slug', manufacturerSlug)
|
|
||||||
.eq('company_type', 'manufacturer')
|
|
||||||
.maybeSingle();
|
|
||||||
|
|
||||||
if (manufacturerError) throw manufacturerError;
|
|
||||||
setManufacturer(manufacturerData);
|
|
||||||
|
|
||||||
if (manufacturerData) {
|
|
||||||
// Fetch ride model
|
|
||||||
const { data: modelData, error: modelError } = await supabase
|
|
||||||
.from('ride_models')
|
|
||||||
.select('*')
|
|
||||||
.eq('slug', modelSlug)
|
|
||||||
.eq('manufacturer_id', manufacturerData.id)
|
|
||||||
.maybeSingle();
|
|
||||||
|
|
||||||
if (modelError) throw modelError;
|
|
||||||
setModel(modelData as RideModel);
|
|
||||||
|
|
||||||
if (modelData) {
|
|
||||||
// Fetch rides using this model with proper joins
|
|
||||||
const { data: ridesData, error: ridesError } = await supabase
|
|
||||||
.from('rides')
|
|
||||||
.select(`
|
|
||||||
*,
|
|
||||||
park:parks!inner(name, slug, location:locations(*)),
|
|
||||||
manufacturer:companies!rides_manufacturer_id_fkey(*),
|
|
||||||
ride_model:ride_models(id, name, slug, manufacturer_id, category)
|
|
||||||
`)
|
|
||||||
.eq('ride_model_id', modelData.id)
|
|
||||||
.order('name');
|
|
||||||
|
|
||||||
if (ridesError) throw ridesError;
|
|
||||||
setRides(ridesData as Ride[] || []);
|
|
||||||
|
|
||||||
// Fetch statistics
|
|
||||||
const { count: photoCount } = await supabase
|
|
||||||
.from('photos')
|
|
||||||
.select('*', { count: 'exact', head: true })
|
|
||||||
.eq('entity_type', 'ride_model')
|
|
||||||
.eq('entity_id', modelData.id);
|
|
||||||
|
|
||||||
setStatistics({
|
|
||||||
rideCount: ridesData?.length || 0,
|
|
||||||
photoCount: photoCount || 0
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error fetching data:', error);
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
}, [manufacturerSlug, modelSlug]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (manufacturerSlug && modelSlug) {
|
|
||||||
fetchData();
|
|
||||||
}
|
|
||||||
}, [manufacturerSlug, modelSlug, fetchData]);
|
|
||||||
|
|
||||||
const handleEditSubmit = async (data: any) => {
|
const handleEditSubmit = async (data: any) => {
|
||||||
try {
|
try {
|
||||||
if (!user || !model) return;
|
if (!user || !model) return;
|
||||||
@@ -138,7 +76,6 @@ export default function RideModelDetail() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
setIsEditModalOpen(false);
|
setIsEditModalOpen(false);
|
||||||
fetchData();
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
const errorMsg = getErrorMessage(error);
|
const errorMsg = getErrorMessage(error);
|
||||||
toast({
|
toast({
|
||||||
|
|||||||
Reference in New Issue
Block a user