Refactor: Complete Photo System Refactor

src/components/moderation/PhotoSubmissionDisplay.tsx

@@ -0,0 +1,64 @@
+import { useState, useEffect } from 'react';
+import { supabase } from '@/integrations/supabase/client';
+import { useIsMobile } from '@/hooks/use-mobile';
+import type { PhotoSubmissionItem } from '@/types/photo-submissions';
+
+interface PhotoSubmissionDisplayProps {
+  submissionId: string;
+}
+
+export function PhotoSubmissionDisplay({ submissionId }: PhotoSubmissionDisplayProps) {
+  const isMobile = useIsMobile();
+  const [photos, setPhotos] = useState<PhotoSubmissionItem[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetchPhotos();
+  }, [submissionId]);
+
+  const fetchPhotos = async () => {
+    try {
+      const { data, error } = await supabase
+        .from('photo_submission_items')
+        .select(`
+          *,
+          photo_submission:photo_submissions!inner(submission_id)
+        `)
+        .eq('photo_submission.submission_id', submissionId)
+        .order('order_index');
+
+      if (error) throw error;
+      setPhotos(data || []);
+    } catch (error) {
+      console.error('Error fetching photo submission items:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (loading) {
+    return <div className="text-sm text-muted-foreground">Loading photos...</div>;
+  }
+
+  if (photos.length === 0) {
+    return <div className="text-sm text-muted-foreground">No photos found</div>;
+  }
+
+  return (
+    <div className={`grid gap-2 ${isMobile ? 'grid-cols-2' : 'grid-cols-3'}`}>
+      {photos.slice(0, isMobile ? 2 : 3).map((photo) => (
+        <img
+          key={photo.id}
+          src={photo.cloudflare_image_url}
+          alt={photo.title || photo.caption || 'Submitted photo'}
+          className="w-full h-32 object-cover rounded-md"
+        />
+      ))}
+      {photos.length > (isMobile ? 2 : 3) && (
+        <div className="text-sm text-muted-foreground flex items-center justify-center bg-muted rounded-md">
+          +{photos.length - (isMobile ? 2 : 3)} more
+        </div>
+      )}
+    </div>
+  );
+}