Fix Phase 4 API optimization

src/components/upload/EntityPhotoGallery.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { Camera, Upload, LogIn, Settings, ArrowUpDown } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
@@ -14,11 +14,9 @@ import { useNavigate } from 'react-router-dom';
 import { UppyPhotoSubmissionUpload } from '@/components/upload/UppyPhotoSubmissionUpload';
 import { PhotoManagementDialog } from '@/components/upload/PhotoManagementDialog';
 import { PhotoModal } from '@/components/moderation/PhotoModal';
-import { supabase } from '@/integrations/supabase/client';
 import { EntityPhotoGalleryProps } from '@/types/submissions';
 import { useUserRole } from '@/hooks/useUserRole';
-import { getErrorMessage } from '@/lib/errorHandler';
-import { logger } from '@/lib/logger';
+import { useEntityPhotos } from '@/hooks/photos/useEntityPhotos';
 
 interface Photo {
   id: string;
@@ -38,47 +36,18 @@ export function EntityPhotoGallery({
   const { user } = useAuth();
   const navigate = useNavigate();
   const { isModerator } = useUserRole();
-  const [photos, setPhotos] = useState<Photo[]>([]);
   const [showUpload, setShowUpload] = useState(false);
   const [showManagement, setShowManagement] = useState(false);
-  const [loading, setLoading] = useState(true);
   const [selectedPhotoIndex, setSelectedPhotoIndex] = useState<number | null>(null);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [sortBy, setSortBy] = useState<'newest' | 'oldest'>('newest');
 
-  useEffect(() => {
-    fetchPhotos();
-  }, [entityId, entityType, sortBy]);
-
-  const fetchPhotos = async () => {
-    try {
-      // Fetch photos directly from the photos table
-      const { data: photoData, 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;
-
-      // Map to Photo interface
-      const mappedPhotos: Photo[] = photoData?.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,
-      })) || [];
-
-      setPhotos(mappedPhotos);
-    } catch (error: unknown) {
-      logger.error('Failed to fetch photos', { error: getErrorMessage(error), entityId, entityType });
-    } finally {
-      setLoading(false);
-    }
-  };
+  // Use optimized photos hook with caching
+  const { data: photos = [], isLoading: loading, refetch } = useEntityPhotos(
+    entityType,
+    entityId,
+    sortBy
+  );
 
   const handleUploadClick = () => {
     if (!user) {
@@ -90,7 +59,7 @@ export function EntityPhotoGallery({
 
   const handleSubmissionComplete = () => {
     setShowUpload(false);
-    fetchPhotos(); // Refresh photos after submission
+    refetch(); // Refresh photos after submission
   };
 
   const handlePhotoClick = (index: number) => {