feat: Implement enhanced realtime subscriptions

src/hooks/useRealtimeSubmissions.ts

@@ -1,6 +1,5 @@
-import { useEffect, useState, useRef } from 'react';
-import { supabase } from '@/integrations/supabase/client';
-import { RealtimeChannel } from '@supabase/supabase-js';
+import { useEffect, useRef } from 'react';
+import { useEnhancedRealtime, ConnectionState } from './useEnhancedRealtime';
 
 interface UseRealtimeSubmissionsOptions {
   onInsert?: (payload: any) => void;
@@ -11,7 +10,6 @@ interface UseRealtimeSubmissionsOptions {
 
 export const useRealtimeSubmissions = (options: UseRealtimeSubmissionsOptions = {}) => {
   const { onInsert, onUpdate, onDelete, enabled = true } = options;
-  const [channel, setChannel] = useState<RealtimeChannel | null>(null);
   
   // Use refs to store latest callbacks without triggering re-subscriptions
   const onInsertRef = useRef(onInsert);
@@ -25,11 +23,16 @@ export const useRealtimeSubmissions = (options: UseRealtimeSubmissionsOptions =
     onDeleteRef.current = onDelete;
   }, [onInsert, onUpdate, onDelete]);
 
-  useEffect(() => {
-    if (!enabled) return;
+  const { channel, connectionState, reconnect } = useEnhancedRealtime({
+    enabled,
+    channelName: 'content-submissions-changes',
+    debug: true,
+  });
 
-    const realtimeChannel = supabase
-      .channel('content-submissions-changes')
+  useEffect(() => {
+    if (!channel) return;
+
+    channel
       .on(
         'postgres_changes',
         {
@@ -65,18 +68,8 @@ export const useRealtimeSubmissions = (options: UseRealtimeSubmissionsOptions =
           console.log('Submission deleted:', payload);
           onDeleteRef.current?.(payload);
         }
-      )
-      .subscribe((status) => {
-        console.log('Submissions realtime status:', status);
-      });
+      );
+  }, [channel]);
 
-    setChannel(realtimeChannel);
-
-    return () => {
-      console.log('Cleaning up submissions realtime subscription');
-      supabase.removeChannel(realtimeChannel);
-    };
-  }, [enabled]);
-
-  return { channel };
+  return { channel, connectionState, reconnect };
 };