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((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((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((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,