feat: Implement full Phase 3 API optimizations

src/pages/RideDetail.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, lazy, Suspense } from 'react';
+import { useState, lazy, Suspense, useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { Header } from '@/components/layout/Header';
 import { getBannerUrls } from '@/lib/cloudflareImageUtils';
@@ -45,8 +45,9 @@ import { FormerNames } from '@/components/rides/FormerNames';
 import { RecentPhotosPreview } from '@/components/rides/RecentPhotosPreview';
 import { ParkLocationMap } from '@/components/maps/ParkLocationMap';
 import { Ride } from '@/types/database';
-import { supabase } from '@/integrations/supabase/client';
 import { useAuth } from '@/hooks/useAuth';
+import { useRideDetail } from '@/hooks/rides/useRideDetail';
+import { usePhotoCount } from '@/hooks/photos/usePhotoCount';
 
 // Lazy load admin forms
 const RideForm = lazy(() => import('@/components/admin/RideForm').then(m => ({ default: m.RideForm })));
@@ -70,12 +71,17 @@ export default function RideDetail() {
   const { user } = useAuth();
   const { isModerator } = useUserRole();
   const { requireAuth } = useAuthModal();
-  const [ride, setRide] = useState<RideWithParkId | null>(null);
-  const [loading, setLoading] = useState(true);
   const [activeTab, setActiveTab] = useState("overview");
   const [isEditModalOpen, setIsEditModalOpen] = useState(false);
-  const [photoCount, setPhotoCount] = useState<number>(0);
-  const [statsLoading, setStatsLoading] = useState(true);
+  
+  // Fetch ride data with caching
+  const { data: rideData, isLoading: loading } = useRideDetail(parkSlug, rideSlug);
+  
+  // Cast to RideWithParkId to include currentParkId
+  const ride = rideData as RideWithParkId | null;
+  
+  // Fetch photo count with caching
+  const { data: photoCount = 0, isLoading: statsLoading } = usePhotoCount('ride', ride?.id, !!ride?.id);
   
   // Update document title when ride changes
   useDocumentTitle(ride?.name || 'Ride Details');
@@ -90,12 +96,6 @@ export default function RideDetail() {
     enabled: !!ride
   });
 
-  useEffect(() => {
-    if (parkSlug && rideSlug) {
-      fetchRideData();
-    }
-  }, [parkSlug, rideSlug]);
-
   // Track page view when ride is loaded
   useEffect(() => {
     if (ride?.id) {
@@ -103,66 +103,6 @@ export default function RideDetail() {
     }
   }, [ride?.id]);
 
-  const fetchRideData = async () => {
-    try {
-      // First get park to find park_id
-      const { data: parkData } = await supabase
-        .from('parks')
-        .select('id')
-        .eq('slug', parkSlug)
-        .maybeSingle();
-
-      if (parkData) {
-        // Then get ride details with park_id stored separately
-        const { data: rideData } = await supabase
-          .from('rides')
-          .select(`
-            *, 
-            park:parks!inner(id, name, slug, location:locations(*)),
-            manufacturer:companies!rides_manufacturer_id_fkey(*),
-            designer:companies!rides_designer_id_fkey(*)
-          `)
-          .eq('park_id', parkData.id)
-          .eq('slug', rideSlug)
-          .maybeSingle();
-
-        if (rideData) {
-          // Store park_id for easier access
-          const extendedRide: RideWithParkId = {
-            ...rideData,
-            currentParkId: parkData.id
-          };
-          setRide(extendedRide);
-          fetchPhotoCount(rideData.id);
-        } else {
-          setRide(null);
-        }
-      }
-    } catch (error) {
-      console.error('Error fetching ride data:', error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const fetchPhotoCount = async (rideId: string) => {
-    try {
-      const { count, error } = await supabase
-        .from('photos')
-        .select('id', { count: 'exact', head: true })
-        .eq('entity_type', 'ride')
-        .eq('entity_id', rideId);
-
-      if (error) throw error;
-      setPhotoCount(count || 0);
-    } catch (error) {
-      console.error('Error fetching photo count:', error);
-      setPhotoCount(0);
-    } finally {
-      setStatsLoading(false);
-    }
-  };
-
   const getStatusColor = (status: string) => {
     switch (status) {
       case 'operating': return 'bg-green-500/20 text-green-400 border-green-500/30';