/** * Homepage Recent Changes Hook * * Fetches recent entity changes (parks, rides, companies) for homepage display. * Uses optimized RPC function for single-query fetch of all data. * * Features: * - Fetches up to 24 recent changes * - Includes entity details, change metadata, and user info * - Single database query via RPC * - 5 minute cache for homepage performance * - Performance monitoring * * @param enabled - Whether the query should run (default: true) * @returns Array of recent changes with full entity context * * @example * ```tsx * const { data: changes, isLoading } = useHomepageRecentChanges(); * * changes?.forEach(change => { * console.log(`${change.name} was ${change.changeType} by ${change.changedBy?.username}`); * }); * ``` */ import { useQuery, UseQueryResult } from '@tanstack/react-query'; import { supabase } from '@/integrations/supabase/client'; import { queryKeys } from '@/lib/queryKeys'; interface RecentChange { id: string; name: string; type: 'park' | 'ride' | 'company'; slug: string; parkSlug?: string; imageUrl?: string; changeType: string; changedAt: string; changedBy?: { username: string; avatarUrl?: string; }; changeReason?: string; } export function useHomepageRecentChanges( enabled = true ): UseQueryResult { return useQuery({ queryKey: queryKeys.homepage.recentChanges(), queryFn: async () => { const startTime = performance.now(); // Use the new database function to get all changes in a single query const { data, error } = await supabase.rpc('get_recent_changes', { limit_count: 24 }); if (error) throw error; // Transform the database response to match our interface const result: RecentChange[] = (data || []).map((item: any) => ({ id: item.entity_id, name: item.entity_name, type: item.entity_type as 'park' | 'ride' | 'company', slug: item.entity_slug, parkSlug: item.park_slug || undefined, imageUrl: item.image_url || undefined, changeType: item.change_type, changedAt: item.changed_at, changedBy: item.changed_by_username ? { username: item.changed_by_username, avatarUrl: item.changed_by_avatar || undefined } : undefined, changeReason: item.change_reason || undefined })); // Performance monitoring (dev only) if (import.meta.env.DEV) { const duration = performance.now() - startTime; if (duration > 500) { console.warn(`⚠️ Slow query: useHomepageRecentChanges took ${duration.toFixed(0)}ms`, { changeCount: result.length }); } } return result; }, enabled, staleTime: 5 * 60 * 1000, gcTime: 15 * 60 * 1000, refetchOnWindowFocus: false, }); }