pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-22 13:11:16 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix: Simplify moderation queue tab focus reload

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-10-13 19:49:07 +00:00
parent 5588f89606
commit 538846d7e3
2 changed files with 14 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/moderation/ModerationQueue.tsx
View File

@@ -29,31 +29,15 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
const { isAdmin, isSuperuser } = useUserRole(); const { isAdmin, isSuperuser } = useUserRole();
const adminSettings = useAdminSettings(); const adminSettings = useAdminSettings();
// Memoize settings to prevent unnecessary effect re-runs // Memoize settings - call functions inside useMemo to avoid recreating on every render
// 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
const settings = useMemo(() => ({ const settings = useMemo(() => ({
refreshMode, refreshMode: adminSettings.getAdminPanelRefreshMode(),
pollInterval, pollInterval: adminSettings.getAdminPanelPollInterval(),
refreshStrategy, refreshStrategy: adminSettings.getAutoRefreshStrategy(),
preserveInteraction, preserveInteraction: adminSettings.getPreserveInteractionState(),
useRealtimeQueue, useRealtimeQueue: adminSettings.getUseRealtimeQueue(),
refreshOnTabVisible, refreshOnTabVisible: adminSettings.getRefreshOnTabVisible(),
}), [ }), [adminSettings]);
refreshMode,
pollInterval,
refreshStrategy,
preserveInteraction,
useRealtimeQueue,
refreshOnTabVisible,
]);
// Initialize queue manager (replaces all state management, fetchItems, effects) // Initialize queue manager (replaces all state management, fetchItems, effects)
const queueManager = useModerationQueueManager({ const queueManager = useModerationQueueManager({

52
src/hooks/moderation/useModerationQueueManager.ts
View File

@@ -894,67 +894,27 @@ export function useModerationQueueManager(config: ModerationQueueManagerConfig):
}; };
}, [user, settings.refreshMode, settings.pollInterval, loadingState, settings.useRealtimeQueue]); }, [user, settings.refreshMode, settings.pollInterval, loadingState, settings.useRealtimeQueue]);
// Extract the boolean value to prevent effect re-runs when settings object changes // Visibility change handler - SIMPLIFIED
const isRefreshOnTabVisibleEnabled = settings.refreshOnTabVisible === true;
// Visibility change handler
useEffect(() => { useEffect(() => {
console.log("🔍 [VISIBILITY EFFECT] Hard check", { // Don't attach listener if feature is disabled
refreshOnTabVisible: settings.refreshOnTabVisible, if (!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");
};
}
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; return;
} }
const handleVisibilityChange = () => {
if (document.hidden) { if (document.hidden) {
console.log("👁️ [VISIBILITY HANDLER] Tab hidden - pausing fetches");
pauseFetchingRef.current = true; pauseFetchingRef.current = true;
} else { } 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; pauseFetchingRef.current = false;
if (initialFetchCompleteRef.current && !isMountingRef.current && fetchItemsRef.current) { if (initialFetchCompleteRef.current && !isMountingRef.current && fetchItemsRef.current) {
console.error(" ➡️ Calling fetchItems(true) NOW");
fetchItemsRef.current(true); fetchItemsRef.current(true);
} else {
console.log(" ⏭️ Skipping refresh (initial fetch not complete or mounting)");
} }
} }
}; };
document.addEventListener("visibilitychange", handleVisibilityChange); document.addEventListener("visibilitychange", handleVisibilityChange);
return () => { return () => document.removeEventListener("visibilitychange", handleVisibilityChange);
document.removeEventListener("visibilitychange", handleVisibilityChange); }, [settings.refreshOnTabVisible]);
console.log("🧹 Visibility listener removed");
};
}, [isRefreshOnTabVisibleEnabled]);
// Initialize realtime subscriptions // Initialize realtime subscriptions
useRealtimeSubscriptions({ useRealtimeSubscriptions({