From 4960caa41ae0a4d3ee6dbd0e738c5f5adb374f4d Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Fri, 10 Oct 2025 14:52:49 +0000
Subject: [PATCH] Fix: Update stale ref in realtime handler

---
 src/components/moderation/ModerationQueue.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/moderation/ModerationQueue.tsx b/src/components/moderation/ModerationQueue.tsx
index c761540c..83304dc8 100644
--- a/src/components/moderation/ModerationQueue.tsx
+++ b/src/components/moderation/ModerationQueue.tsx
@@ -502,8 +502,9 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
             });
             
             if (mergeResult.hasChanges) {
+              // Update ref BEFORE setState to prevent race conditions
+              itemsRef.current = mergeResult.items;
               setItems(mergeResult.items);
-              itemsRef.current = mergeResult.items; // Update ref immediately to prevent stale comparisons
               console.log('🔄 Queue updated (replace mode):', {
                 added: mergeResult.changes.added.length,
                 removed: mergeResult.changes.removed.length,
@@ -526,6 +527,8 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
       } else {
         // Manual refresh: Use smart comparison even for non-silent refreshes
         console.log('🔄 Manual refresh - checking for changes');
+        console.log('📊 Before merge - itemsRef.current has', itemsRef.current.length, 'items');
+        console.log('📊 New data from DB has', moderationItems.length, 'items');
         
         const mergeResult = smartMergeArray(itemsRef.current, moderationItems, {
           compareFields: ['status', 'content', 'reviewed_at', 'reviewed_by', 'reviewer_notes', 'assigned_to', 'locked_until'],
@@ -533,9 +536,18 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
           addToTop: false,
         });
         
+        console.log('📊 Merge result:', {
+          hasChanges: mergeResult.hasChanges,
+          added: mergeResult.changes.added.length,
+          removed: mergeResult.changes.removed.length,
+          updated: mergeResult.changes.updated.length,
+          finalCount: mergeResult.items.length,
+        });
+        
         if (mergeResult.hasChanges) {
+          // Update ref BEFORE setState to prevent race conditions
+          itemsRef.current = mergeResult.items;
           setItems(mergeResult.items);
-          itemsRef.current = mergeResult.items; // Update ref immediately to prevent stale comparisons
           console.log('🔄 Queue updated (manual refresh):', {
             added: mergeResult.changes.added.length,
             removed: mergeResult.changes.removed.length,