Implement real-time features

src/hooks/useRealtimeSubmissions.ts

@@ -0,0 +1,70 @@
+import { useEffect, useState } from 'react';
+import { supabase } from '@/integrations/supabase/client';
+import { RealtimeChannel } from '@supabase/supabase-js';
+
+interface UseRealtimeSubmissionsOptions {
+  onInsert?: (payload: any) => void;
+  onUpdate?: (payload: any) => void;
+  onDelete?: (payload: any) => void;
+  enabled?: boolean;
+}
+
+export const useRealtimeSubmissions = (options: UseRealtimeSubmissionsOptions = {}) => {
+  const { onInsert, onUpdate, onDelete, enabled = true } = options;
+  const [channel, setChannel] = useState<RealtimeChannel | null>(null);
+
+  useEffect(() => {
+    if (!enabled) return;
+
+    const realtimeChannel = supabase
+      .channel('content-submissions-changes')
+      .on(
+        'postgres_changes',
+        {
+          event: 'INSERT',
+          schema: 'public',
+          table: 'content_submissions',
+        },
+        (payload) => {
+          console.log('Submission inserted:', payload);
+          onInsert?.(payload);
+        }
+      )
+      .on(
+        'postgres_changes',
+        {
+          event: 'UPDATE',
+          schema: 'public',
+          table: 'content_submissions',
+        },
+        (payload) => {
+          console.log('Submission updated:', payload);
+          onUpdate?.(payload);
+        }
+      )
+      .on(
+        'postgres_changes',
+        {
+          event: 'DELETE',
+          schema: 'public',
+          table: 'content_submissions',
+        },
+        (payload) => {
+          console.log('Submission deleted:', payload);
+          onDelete?.(payload);
+        }
+      )
+      .subscribe((status) => {
+        console.log('Submissions realtime status:', status);
+      });
+
+    setChannel(realtimeChannel);
+
+    return () => {
+      console.log('Cleaning up submissions realtime subscription');
+      supabase.removeChannel(realtimeChannel);
+    };
+  }, [enabled, onInsert, onUpdate, onDelete]);
+
+  return { channel };
+};