From 538846d7e3fad517cc5c56b2d2070d6b6537f632 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Mon, 13 Oct 2025 19:49:07 +0000
Subject: [PATCH] Fix: Simplify moderation queue tab focus reload

---
 src/components/moderation/ModerationQueue.tsx | 32 +++---------
 .../moderation/useModerationQueueManager.ts   | 52 +++----------------
 2 files changed, 14 insertions(+), 70 deletions(-)

diff --git a/src/components/moderation/ModerationQueue.tsx b/src/components/moderation/ModerationQueue.tsx
index 60ec8673..b865d557 100644
--- a/src/components/moderation/ModerationQueue.tsx
+++ b/src/components/moderation/ModerationQueue.tsx
@@ -29,31 +29,15 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
   const { isAdmin, isSuperuser } = useUserRole();
   const adminSettings = useAdminSettings();
   
-  // Memoize settings to prevent unnecessary effect re-runs
-  // Get actual values from admin settings
-  const refreshMode = adminSettings.getAdminPanelRefreshMode();
-  const pollInterval = adminSettings.getAdminPanelPollInterval();
-  const refreshStrategy = adminSettings.getAutoRefreshStrategy();
-  const preserveInteraction = adminSettings.getPreserveInteractionState();
-  const useRealtimeQueue = adminSettings.getUseRealtimeQueue();
-  const refreshOnTabVisible = adminSettings.getRefreshOnTabVisible();
-
-  // Memoize settings object based on actual values, not function references
+  // Memoize settings - call functions inside useMemo to avoid recreating on every render
   const settings = useMemo(() => ({
-    refreshMode,
-    pollInterval,
-    refreshStrategy,
-    preserveInteraction,
-    useRealtimeQueue,
-    refreshOnTabVisible,
-  }), [
-    refreshMode,
-    pollInterval,
-    refreshStrategy,
-    preserveInteraction,
-    useRealtimeQueue,
-    refreshOnTabVisible,
-  ]);
+    refreshMode: adminSettings.getAdminPanelRefreshMode(),
+    pollInterval: adminSettings.getAdminPanelPollInterval(),
+    refreshStrategy: adminSettings.getAutoRefreshStrategy(),
+    preserveInteraction: adminSettings.getPreserveInteractionState(),
+    useRealtimeQueue: adminSettings.getUseRealtimeQueue(),
+    refreshOnTabVisible: adminSettings.getRefreshOnTabVisible(),
+  }), [adminSettings]);
   
   // Initialize queue manager (replaces all state management, fetchItems, effects)
   const queueManager = useModerationQueueManager({
diff --git a/src/hooks/moderation/useModerationQueueManager.ts b/src/hooks/moderation/useModerationQueueManager.ts
index 772f2cd6..669f12d4 100644
--- a/src/hooks/moderation/useModerationQueueManager.ts
+++ b/src/hooks/moderation/useModerationQueueManager.ts
@@ -894,67 +894,27 @@ export function useModerationQueueManager(config: ModerationQueueManagerConfig):
     };
   }, [user, settings.refreshMode, settings.pollInterval, loadingState, settings.useRealtimeQueue]);
 
-  // Extract the boolean value to prevent effect re-runs when settings object changes
-  const isRefreshOnTabVisibleEnabled = settings.refreshOnTabVisible === true;
-
-  // Visibility change handler
+  // Visibility change handler - SIMPLIFIED
   useEffect(() => {
-    console.log("🔍 [VISIBILITY EFFECT] Hard check", {
-      refreshOnTabVisible: settings.refreshOnTabVisible,
-      typeOf: typeof settings.refreshOnTabVisible,
-      isRefreshOnTabVisibleEnabled,
-      willAttachListener: isRefreshOnTabVisibleEnabled,
-      timestamp: new Date().toISOString(),
-    });
-
-    // Early return if feature is disabled
-    if (!isRefreshOnTabVisibleEnabled) {
-      console.log("   ✅ Feature DISABLED - skipping all visibility logic");
-      console.log("   ✅ Tab focus will NOT trigger refreshes");
-
-      // Cleanup: ensure no lingering handlers
-      return () => {
-        console.log("   🧹 Cleanup: Ensuring no visibility listeners exist");
-      };
+    // Don't attach listener if feature is disabled
+    if (!settings.refreshOnTabVisible) {
+      return;
     }
 
-    console.error("   ❌ Setting is TRUE - listener WILL be attached");
-    console.error("   ❌ THIS MEANS TAB FOCUS **WILL** TRIGGER REFRESHES");
-    console.error("   ⚠️  If you disabled this setting, it is NOT working properly");
-
     const handleVisibilityChange = () => {
-      // Double-check setting before doing anything (defensive check)
-      if (!isRefreshOnTabVisibleEnabled) {
-        console.log("⚠️ Visibility handler called but setting is disabled - ignoring");
-        return;
-      }
-
       if (document.hidden) {
-        console.log("👁️ [VISIBILITY HANDLER] Tab hidden - pausing fetches");
         pauseFetchingRef.current = true;
       } else {
-        console.error("👁️ [VISIBILITY HANDLER] Tab visible - THIS IS WHERE THE REFRESH HAPPENS");
-        console.error("   🔴 TAB FOCUS REFRESH TRIGGERED HERE");
-        console.error("   📍 Stack trace below:");
-        console.trace();
-
         pauseFetchingRef.current = false;
-
         if (initialFetchCompleteRef.current && !isMountingRef.current && fetchItemsRef.current) {
-          console.error("   ➡️  Calling fetchItems(true) NOW");
           fetchItemsRef.current(true);
-        } else {
-          console.log("   ⏭️ Skipping refresh (initial fetch not complete or mounting)");
         }
       }
     };
 
     document.addEventListener("visibilitychange", handleVisibilityChange);
-    return () => {
-      document.removeEventListener("visibilitychange", handleVisibilityChange);
-      console.log("🧹 Visibility listener removed");
-    };
-  }, [isRefreshOnTabVisibleEnabled]);
+    return () => document.removeEventListener("visibilitychange", handleVisibilityChange);
+  }, [settings.refreshOnTabVisible]);
 
   // Initialize realtime subscriptions
   useRealtimeSubscriptions({