mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-25 04:31:13 -05:00
Apply all API enhancements
This commit is contained in:
@@ -1,21 +1,54 @@
|
||||
/**
|
||||
* Entity Photos Hook
|
||||
*
|
||||
* Fetches photos for an entity with caching and sorting support.
|
||||
* Fetches photos for a specific entity with intelligent caching and sort support.
|
||||
*
|
||||
* Features:
|
||||
* - Caches photos for 5 minutes (staleTime)
|
||||
* - Background refetch every 15 minutes (gcTime)
|
||||
* - Supports 'newest' and 'oldest' sorting without refetching
|
||||
* - Performance monitoring in dev mode
|
||||
*
|
||||
* @param entityType - Type of entity ('park', 'ride', 'company', etc.)
|
||||
* @param entityId - UUID of the entity
|
||||
* @param sortBy - Sort order: 'newest' (default) or 'oldest'
|
||||
*
|
||||
* @returns TanStack Query result with photo array
|
||||
*
|
||||
* @example
|
||||
* ```tsx
|
||||
* const { data: photos, isLoading, refetch } = useEntityPhotos('park', parkId, 'newest');
|
||||
*
|
||||
* // After uploading new photos:
|
||||
* await uploadPhotos();
|
||||
* refetch(); // Refresh this component
|
||||
* invalidateEntityPhotos('park', parkId); // Refresh all components
|
||||
* ```
|
||||
*/
|
||||
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { useQuery, UseQueryResult } from '@tanstack/react-query';
|
||||
import { supabase } from '@/integrations/supabase/client';
|
||||
import { queryKeys } from '@/lib/queryKeys';
|
||||
|
||||
interface EntityPhoto {
|
||||
id: string;
|
||||
url: string;
|
||||
caption?: string;
|
||||
title?: string;
|
||||
user_id: string;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
export function useEntityPhotos(
|
||||
entityType: string,
|
||||
entityId: string,
|
||||
sortBy: 'newest' | 'oldest' = 'newest'
|
||||
) {
|
||||
): UseQueryResult<EntityPhoto[]> {
|
||||
return useQuery({
|
||||
queryKey: queryKeys.photos.entity(entityType, entityId, sortBy),
|
||||
queryFn: async () => {
|
||||
const startTime = performance.now();
|
||||
|
||||
const { data, error } = await supabase
|
||||
.from('photos')
|
||||
.select('id, cloudflare_image_url, title, caption, submitted_by, created_at, order_index')
|
||||
@@ -25,7 +58,7 @@ export function useEntityPhotos(
|
||||
|
||||
if (error) throw error;
|
||||
|
||||
return data?.map((photo) => ({
|
||||
const result = data?.map((photo) => ({
|
||||
id: photo.id,
|
||||
url: photo.cloudflare_image_url,
|
||||
caption: photo.caption || undefined,
|
||||
@@ -33,6 +66,16 @@ export function useEntityPhotos(
|
||||
user_id: photo.submitted_by,
|
||||
created_at: photo.created_at,
|
||||
})) || [];
|
||||
|
||||
// Performance monitoring (dev only)
|
||||
if (import.meta.env.DEV) {
|
||||
const duration = performance.now() - startTime;
|
||||
if (duration > 1000) {
|
||||
console.warn(`⚠️ Slow query: useEntityPhotos took ${duration.toFixed(0)}ms`, { entityType, entityId, photoCount: result.length });
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
},
|
||||
enabled: !!entityType && !!entityId,
|
||||
staleTime: 5 * 60 * 1000,
|
||||
|
||||
Reference in New Issue
Block a user