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);

src/components/moderation/SubmissionReviewManager.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { useToast } from '@/hooks/use-toast';
 import { useUserRole } from '@/hooks/useUserRole';
 import { useAuth } from '@/hooks/useAuth';
+import { useRealtimeSubmissionItems } from '@/hooks/useRealtimeSubmissionItems';
 import { 
   fetchSubmissionItems, 
   buildDependencyTree, 
@@ -59,6 +60,20 @@ export function SubmissionReviewManager({
   const isMobile = useIsMobile();
   const Container = isMobile ? Sheet : Dialog;
 
+  // Set up realtime subscription for submission items
+  useRealtimeSubmissionItems({
+    submissionId,
+    onUpdate: (payload) => {
+      console.log('Submission item updated in real-time:', payload);
+      toast({
+        title: 'Item Updated',
+        description: 'A submission item was updated by another moderator',
+      });
+      loadSubmissionItems();
+    },
+    enabled: open && !!submissionId,
+  });
+
   useEffect(() => {
     if (open && submissionId) {
       loadSubmissionItems();