feat: Implement admin component optimizations

src/components/moderation/PhotoSubmissionDisplay.tsx

@@ -1,78 +1,28 @@
-import { useState, useEffect } from 'react';
-import { supabase } from '@/integrations/supabase/client';
 import { PhotoGrid } from '@/components/common/PhotoGrid';
-import type { PhotoSubmissionItem } from '@/types/photo-submissions';
-import type { PhotoItem } from '@/types/photos';
-import { getErrorMessage } from '@/lib/errorHandler';
+import { usePhotoSubmission } from '@/hooks/moderation/usePhotoSubmission';
 
 interface PhotoSubmissionDisplayProps {
   submissionId: string;
 }
 
 export function PhotoSubmissionDisplay({ submissionId }: PhotoSubmissionDisplayProps) {
-  const [photos, setPhotos] = useState<PhotoSubmissionItem[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
+  const { data: photos, isLoading, error } = usePhotoSubmission(submissionId);
 
-  useEffect(() => {
-    fetchPhotos();
-  }, [submissionId]);
-
-  const fetchPhotos = async () => {
-    try {
-      // Step 1: Get photo_submission_id from submission_id
-      const { data: photoSubmission, error: photoSubmissionError } = await supabase
-        .from('photo_submissions')
-        .select('id, entity_type, title')
-        .eq('submission_id', submissionId)
-        .maybeSingle();
-
-      if (photoSubmissionError) {
-        throw photoSubmissionError;
-      }
-      
-      if (!photoSubmission) {
-        setPhotos([]);
-        setLoading(false);
-        return;
-      }
-
-      // Step 2: Get photo items using photo_submission_id
-      const { data, error } = await supabase
-        .from('photo_submission_items')
-        .select('*')
-        .eq('photo_submission_id', photoSubmission.id)
-        .order('order_index');
-
-      if (error) {
-        throw error;
-      }
-      
-      setPhotos(data || []);
-    } catch (error: unknown) {
-      const errorMsg = getErrorMessage(error);
-      setPhotos([]);
-      setError(errorMsg);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  if (loading) {
+  if (isLoading) {
     return <div className="text-sm text-muted-foreground">Loading photos...</div>;
   }
 
   if (error) {
     return (
       <div className="text-sm text-destructive">
-        Error loading photos: {error}
+        Error loading photos: {error.message}
         <br />
         <span className="text-xs">Submission ID: {submissionId}</span>
       </div>
     );
   }
 
-  if (photos.length === 0) {
+  if (!photos || photos.length === 0) {
     return (
       <div className="text-sm text-muted-foreground">
         No photos found for this submission
@@ -82,15 +32,5 @@ export function PhotoSubmissionDisplay({ submissionId }: PhotoSubmissionDisplayP
     );
   }
 
-  // Convert PhotoSubmissionItem[] to PhotoItem[] for PhotoGrid
-  const photoItems: PhotoItem[] = photos.map(photo => ({
-    id: photo.id,
-    url: photo.cloudflare_image_url,
-    filename: photo.filename || `Photo ${photo.order_index + 1}`,
-    caption: photo.caption,
-    title: photo.title,
-    date_taken: photo.date_taken,
-  }));
-
-  return <PhotoGrid photos={photoItems} />;
+  return <PhotoGrid photos={photos} />;
 }

src/components/moderation/RecentActivity.tsx

@@ -1,171 +1,20 @@
-import { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
-import { supabase } from '@/integrations/supabase/client';
-import { useAuth } from '@/hooks/useAuth';
-import { handleError } from '@/lib/errorHandler';
+import { forwardRef, useImperativeHandle } from 'react';
+import { useRecentActivity } from '@/hooks/moderation/useRecentActivity';
 import { ActivityCard } from './ActivityCard';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Activity as ActivityIcon } from 'lucide-react';
-import { smartMergeArray } from '@/lib/smartStateUpdate';
-import { useAdminSettings } from '@/hooks/useAdminSettings';
-
-interface ActivityItem {
-  id: string;
-  type: 'submission' | 'report' | 'review';
-  action: 'approved' | 'rejected' | 'reviewed' | 'dismissed' | 'flagged';
-  entity_type?: string;
-  entity_name?: string;
-  timestamp: string;
-  moderator_id?: string;
-  moderator?: {
-    username: string;
-    display_name?: string;
-    avatar_url?: string;
-  };
-}
 
 export interface RecentActivityRef {
   refresh: () => void;
 }
 
 export const RecentActivity = forwardRef<RecentActivityRef>((props, ref) => {
-  const [activities, setActivities] = useState<ActivityItem[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [isSilentRefresh, setIsSilentRefresh] = useState(false);
-  const { user } = useAuth();
-  const { getAutoRefreshStrategy } = useAdminSettings();
-  const refreshStrategy = getAutoRefreshStrategy();
+  const { data: activities = [], isLoading: loading, refetch } = useRecentActivity();
 
   useImperativeHandle(ref, () => ({
-    refresh: () => fetchRecentActivity(false)
+    refresh: refetch
   }));
 
-  const fetchRecentActivity = async (silent = false) => {
-    if (!user) return;
-
-    try {
-      if (!silent) {
-        setLoading(true);
-      } else {
-        setIsSilentRefresh(true);
-      }
-
-      // Fetch recent approved/rejected submissions
-      const { data: submissions, error: submissionsError } = await supabase
-        .from('content_submissions')
-        .select('id, status, reviewed_at, reviewer_id, submission_type')
-        .in('status', ['approved', 'rejected'])
-        .not('reviewed_at', 'is', null)
-        .order('reviewed_at', { ascending: false })
-        .limit(15);
-
-      if (submissionsError) throw submissionsError;
-
-      // Fetch recent report resolutions
-      const { data: reports, error: reportsError } = await supabase
-        .from('reports')
-        .select('id, status, reviewed_at, reviewed_by, reported_entity_type')
-        .in('status', ['reviewed', 'dismissed'])
-        .not('reviewed_at', 'is', null)
-        .order('reviewed_at', { ascending: false })
-        .limit(15);
-
-      if (reportsError) throw reportsError;
-
-      // Fetch recent review moderations
-      const { data: reviews, error: reviewsError } = await supabase
-        .from('reviews')
-        .select('id, moderation_status, moderated_at, moderated_by, park_id, ride_id')
-        .in('moderation_status', ['approved', 'rejected', 'flagged'])
-        .not('moderated_at', 'is', null)
-        .order('moderated_at', { ascending: false })
-        .limit(15);
-
-      if (reviewsError) throw reviewsError;
-
-      // Get unique moderator IDs
-      const moderatorIds = [
-        ...(submissions?.map(s => s.reviewer_id).filter(Boolean) || []),
-        ...(reports?.map(r => r.reviewed_by).filter(Boolean) || []),
-        ...(reviews?.map(r => r.moderated_by).filter(Boolean) || []),
-      ].filter((id, index, arr) => id && arr.indexOf(id) === index);
-
-      // Fetch moderator profiles
-      const { data: profiles } = await supabase
-        .from('profiles')
-        .select('user_id, username, display_name, avatar_url')
-        .in('user_id', moderatorIds);
-
-      const profileMap = new Map(profiles?.map(p => [p.user_id, p]) || []);
-
-      // Combine all activities
-      const allActivities: ActivityItem[] = [
-        ...(submissions?.map(s => ({
-          id: s.id,
-          type: 'submission' as const,
-          action: s.status as 'approved' | 'rejected',
-          entity_type: s.submission_type,
-          timestamp: s.reviewed_at!,
-          moderator_id: s.reviewer_id,
-          moderator: s.reviewer_id ? profileMap.get(s.reviewer_id) : undefined,
-        })) || []),
-        ...(reports?.map(r => ({
-          id: r.id,
-          type: 'report' as const,
-          action: r.status as 'reviewed' | 'dismissed',
-          entity_type: r.reported_entity_type,
-          timestamp: r.reviewed_at!,
-          moderator_id: r.reviewed_by,
-          moderator: r.reviewed_by ? profileMap.get(r.reviewed_by) : undefined,
-        })) || []),
-        ...(reviews?.map(r => ({
-          id: r.id,
-          type: 'review' as const,
-          action: r.moderation_status as 'approved' | 'rejected' | 'flagged',
-          timestamp: r.moderated_at!,
-          moderator_id: r.moderated_by,
-          moderator: r.moderated_by ? profileMap.get(r.moderated_by) : undefined,
-        })) || []),
-      ];
-
-      // Sort by timestamp (newest first)
-      allActivities.sort((a, b) => 
-        new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
-      );
-
-      const recentActivities = allActivities.slice(0, 20); // Keep top 20 most recent
-
-      // Use smart merging for silent refreshes if strategy is 'merge'
-      if (silent && refreshStrategy === 'merge') {
-        const mergeResult = smartMergeArray(activities, recentActivities, {
-          compareFields: ['timestamp', 'action'],
-          preserveOrder: false,
-          addToTop: true,
-        });
-
-        if (mergeResult.hasChanges) {
-          setActivities(mergeResult.items);
-        }
-      } else {
-        // Full replacement for non-silent refreshes or 'replace' strategy
-        setActivities(recentActivities);
-      }
-    } catch (error: unknown) {
-      handleError(error, {
-        action: 'Load Recent Activity',
-        userId: user?.id
-      });
-    } finally {
-      if (!silent) {
-        setLoading(false);
-      }
-      setIsSilentRefresh(false);
-    }
-  };
-
-  useEffect(() => {
-    fetchRecentActivity(false);
-  }, [user]);
-
   if (loading) {
     return (
       <div className="space-y-4">