Fix authentication race condition

src/components/moderation/ModerationQueue.tsx

@@ -10,6 +10,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import { supabase } from '@/integrations/supabase/client';
 import { useToast } from '@/hooks/use-toast';
 import { useUserRole } from '@/hooks/useUserRole';
+import { useAuth } from '@/hooks/useAuth';
 import { format } from 'date-fns';
 import { PhotoModal } from './PhotoModal';
 
@@ -57,6 +58,7 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
   const [selectedPhotoIndex, setSelectedPhotoIndex] = useState(0);
   const { toast } = useToast();
   const { isAdmin, isSuperuser } = useUserRole();
+  const { user } = useAuth();
 
   // Expose refresh method via ref
   useImperativeHandle(ref, () => ({
@@ -66,6 +68,11 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
   }), [activeEntityFilter, activeStatusFilter]);
 
   const fetchItems = async (entityFilter: EntityFilter = 'all', statusFilter: StatusFilter = 'pending') => {
+    if (!user) {
+      console.log('Skipping fetch - user not authenticated');
+      return;
+    }
+    
     try {
       setLoading(true);
       
@@ -312,11 +319,16 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
       console.log('Photo submissions:', formattedItems.filter(item => item.submission_type === 'photo'));
       
       setItems(formattedItems);
-    } catch (error) {
+    } catch (error: any) {
       console.error('Error fetching moderation items:', error);
+      console.error('Error details:', {
+        message: error.message,
+        code: error.code,
+        details: error.details
+      });
       toast({
         title: "Error",
-        description: "Failed to load moderation queue",
+        description: error.message || "Failed to load moderation queue",
         variant: "destructive",
       });
     } finally {
@@ -325,8 +337,10 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
   };
 
   useEffect(() => {
-    fetchItems(activeEntityFilter, activeStatusFilter);
-  }, [activeEntityFilter, activeStatusFilter]);
+    if (user) {
+      fetchItems(activeEntityFilter, activeStatusFilter);
+    }
+  }, [activeEntityFilter, activeStatusFilter, user]);
 
   const handleModerationAction = async (
     item: ModerationItem,