Refactor: Simplify Realtime channel creation

src/hooks/useRealtimeSubmissions.ts

@@ -1,7 +1,10 @@
-import { useEffect, useRef } from 'react';
-import { useEnhancedRealtime, ConnectionState } from './useEnhancedRealtime';
+import { useEffect, useRef, useState, useCallback } from 'react';
+import { supabase } from '@/integrations/supabase/client';
+import { RealtimeChannel } from '@supabase/supabase-js';
 import { useUserRole } from './useUserRole';
 
+type ConnectionState = 'connecting' | 'connected' | 'disconnected' | 'error';
+
 interface UseRealtimeSubmissionsOptions {
   onInsert?: (payload: any) => void;
   onUpdate?: (payload: any) => void;
@@ -13,6 +16,9 @@ export const useRealtimeSubmissions = (options: UseRealtimeSubmissionsOptions =
   const { onInsert, onUpdate, onDelete, enabled = true } = options;
   const { isModerator, loading: roleLoading } = useUserRole();
   
+  const [channel, setChannel] = useState<RealtimeChannel | null>(null);
+  const [connectionState, setConnectionState] = useState<ConnectionState>('disconnected');
+  
   // Only enable realtime when user is confirmed as moderator
   const realtimeEnabled = enabled && !roleLoading && isModerator();
   
@@ -28,16 +34,24 @@ export const useRealtimeSubmissions = (options: UseRealtimeSubmissionsOptions =
     onDeleteRef.current = onDelete;
   }, [onInsert, onUpdate, onDelete]);
 
-  const { channel, connectionState, reconnect } = useEnhancedRealtime({
-    enabled: realtimeEnabled,
-    channelName: 'content-submissions-changes',
-    debug: true,
-  });
+  const reconnect = useCallback(() => {
+    if (channel) {
+      supabase.removeChannel(channel);
+    }
+    setConnectionState('connecting');
+  }, [channel]);
 
   useEffect(() => {
-    if (!channel) return;
+    if (!realtimeEnabled) {
+      console.log('[Realtime:content-submissions-changes] Realtime disabled');
+      return;
+    }
 
-    channel
+    console.log('[Realtime:content-submissions-changes] Creating new channel');
+    setConnectionState('connecting');
+
+    const newChannel = supabase
+      .channel('content-submissions-changes')
       .on(
         'postgres_changes',
         {
@@ -73,8 +87,28 @@ export const useRealtimeSubmissions = (options: UseRealtimeSubmissionsOptions =
           console.log('Submission deleted:', payload);
           onDeleteRef.current?.(payload);
         }
-      );
-  }, [channel]);
+      )
+      .subscribe((status) => {
+        console.log('[Realtime:content-submissions-changes] Subscription status:', status);
+        
+        if (status === 'SUBSCRIBED') {
+          setConnectionState('connected');
+        } else if (status === 'CHANNEL_ERROR') {
+          setConnectionState('error');
+        } else if (status === 'TIMED_OUT') {
+          setConnectionState('disconnected');
+        } else if (status === 'CLOSED') {
+          setConnectionState('disconnected');
+        }
+      });
+
+    setChannel(newChannel);
+
+    return () => {
+      console.log('[Realtime:content-submissions-changes] Cleaning up channel');
+      supabase.removeChannel(newChannel);
+    };
+  }, [realtimeEnabled]);
 
   return { channel, connectionState, reconnect };
 };