Implement real-time features

src/components/moderation/ModerationQueue.tsx

@@ -14,6 +14,7 @@ import { useAuth } from '@/hooks/useAuth';
 import { format } from 'date-fns';
 import { PhotoModal } from './PhotoModal';
 import { SubmissionReviewManager } from './SubmissionReviewManager';
+import { useRealtimeSubmissions } from '@/hooks/useRealtimeSubmissions';
 
 interface ModerationItem {
   id: string;
@@ -339,6 +340,36 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
     }
   };
 
+  // Set up realtime subscriptions
+  useRealtimeSubmissions({
+    onInsert: (payload) => {
+      console.log('New submission received');
+      toast({
+        title: 'New Submission',
+        description: 'A new content submission has been added',
+      });
+      fetchItems(activeEntityFilter, activeStatusFilter);
+    },
+    onUpdate: (payload) => {
+      console.log('Submission updated');
+      // Update items state directly for better UX
+      setItems(prevItems => 
+        prevItems.map(item => 
+          item.id === payload.new.id && item.type === 'content_submission'
+            ? { ...item, status: payload.new.status, content: { ...item.content, ...payload.new } }
+            : item
+        )
+      );
+    },
+    onDelete: (payload) => {
+      console.log('Submission deleted');
+      setItems(prevItems => 
+        prevItems.filter(item => !(item.id === payload.old.id && item.type === 'content_submission'))
+      );
+    },
+    enabled: !!user,
+  });
+
   useEffect(() => {
     if (user) {
       fetchItems(activeEntityFilter, activeStatusFilter);