Fix 406 errors and realtime auth

src/components/moderation/SubmissionItemsList.tsx

@@ -41,19 +41,18 @@ export function SubmissionItemsList({
 
       if (itemsError) throw itemsError;
 
-      // Check for photo submissions
+      // Check for photo submissions (using array query to avoid 406)
       const { data: photoData, error: photoError } = await supabase
         .from('photo_submissions')
         .select('id')
-        .eq('submission_id', submissionId)
-        .single();
+        .eq('submission_id', submissionId);
 
-      if (photoError && photoError.code !== 'PGRST116') {
+      if (photoError) {
         console.warn('Error checking photo submissions:', photoError);
       }
 
       setItems((itemsData || []) as SubmissionItemData[]);
-      setHasPhotos(!!photoData);
+      setHasPhotos(photoData && photoData.length > 0);
     } catch (err) {
       console.error('Error fetching submission items:', err);
       setError('Failed to load submission details');

src/hooks/useRealtimeModerationStats.ts

@@ -1,6 +1,7 @@
 import { useEffect, useState, useRef, useCallback } from 'react';
 import { supabase } from '@/integrations/supabase/client';
 import { useEnhancedRealtime, ConnectionState } from './useEnhancedRealtime';
+import { useUserRole } from './useUserRole';
 
 interface ModerationStats {
   pendingSubmissions: number;
@@ -16,6 +17,7 @@ interface UseRealtimeModerationStatsOptions {
 
 export const useRealtimeModerationStats = (options: UseRealtimeModerationStatsOptions = {}) => {
   const { onStatsChange, enabled = true, debounceMs = 1000 } = options;
+  const { isModerator, loading: roleLoading } = useUserRole();
   const [stats, setStats] = useState<ModerationStats>({
     pendingSubmissions: 0,
     openReports: 0,
@@ -24,6 +26,9 @@ export const useRealtimeModerationStats = (options: UseRealtimeModerationStatsOp
   const updateTimerRef = useRef<NodeJS.Timeout | null>(null);
   const onStatsChangeRef = useRef(onStatsChange);
   
+  // Only enable realtime when user is confirmed as moderator
+  const realtimeEnabled = enabled && !roleLoading && isModerator();
+  
   // Update ref when callback changes
   useEffect(() => {
     onStatsChangeRef.current = onStatsChange;
@@ -67,7 +72,7 @@ export const useRealtimeModerationStats = (options: UseRealtimeModerationStatsOp
   }, [fetchStats, debounceMs]);
 
   const { channel, connectionState, reconnect } = useEnhancedRealtime({
-    enabled,
+    enabled: realtimeEnabled,
     channelName: 'moderation-stats-changes',
     debug: true,
     onConnectionChange: (state: ConnectionState) => {

src/hooks/useRealtimeSubmissions.ts

@@ -1,5 +1,6 @@
 import { useEffect, useRef } from 'react';
 import { useEnhancedRealtime, ConnectionState } from './useEnhancedRealtime';
+import { useUserRole } from './useUserRole';
 
 interface UseRealtimeSubmissionsOptions {
   onInsert?: (payload: any) => void;
@@ -10,6 +11,10 @@ interface UseRealtimeSubmissionsOptions {
 
 export const useRealtimeSubmissions = (options: UseRealtimeSubmissionsOptions = {}) => {
   const { onInsert, onUpdate, onDelete, enabled = true } = options;
+  const { isModerator, loading: roleLoading } = useUserRole();
+  
+  // Only enable realtime when user is confirmed as moderator
+  const realtimeEnabled = enabled && !roleLoading && isModerator();
   
   // Use refs to store latest callbacks without triggering re-subscriptions
   const onInsertRef = useRef(onInsert);
@@ -24,7 +29,7 @@ export const useRealtimeSubmissions = (options: UseRealtimeSubmissionsOptions =
   }, [onInsert, onUpdate, onDelete]);
 
   const { channel, connectionState, reconnect } = useEnhancedRealtime({
-    enabled,
+    enabled: realtimeEnabled,
     channelName: 'content-submissions-changes',
     debug: true,
   });