Fix: Memoize settings and add defensive checks

This commit is contained in:
gpt-engineer-app[bot]
2025-10-12 23:47:29 +00:00
parent 045419db9a
commit 21c16870ee
2 changed files with 29 additions and 9 deletions

View File

@@ -1,4 +1,4 @@
import { useState, useImperativeHandle, forwardRef } from 'react'; import { useState, useImperativeHandle, forwardRef, useMemo } from 'react';
import { Card, CardContent } from '@/components/ui/card'; import { Card, CardContent } from '@/components/ui/card';
import { useToast } from '@/hooks/use-toast'; import { useToast } from '@/hooks/use-toast';
import { useUserRole } from '@/hooks/useUserRole'; import { useUserRole } from '@/hooks/useUserRole';
@@ -28,20 +28,30 @@ 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
const settings = useMemo(() => ({
refreshMode: adminSettings.getAdminPanelRefreshMode(),
pollInterval: adminSettings.getAdminPanelPollInterval(),
refreshStrategy: adminSettings.getAutoRefreshStrategy(),
preserveInteraction: adminSettings.getPreserveInteractionState(),
useRealtimeQueue: adminSettings.getUseRealtimeQueue(),
refreshOnTabVisible: adminSettings.getRefreshOnTabVisible(),
}), [
adminSettings.getAdminPanelRefreshMode(),
adminSettings.getAdminPanelPollInterval(),
adminSettings.getAutoRefreshStrategy(),
adminSettings.getPreserveInteractionState(),
adminSettings.getUseRealtimeQueue(),
adminSettings.getRefreshOnTabVisible(),
]);
// Initialize queue manager (replaces all state management, fetchItems, effects) // Initialize queue manager (replaces all state management, fetchItems, effects)
const queueManager = useModerationQueueManager({ const queueManager = useModerationQueueManager({
user, user,
isAdmin: isAdmin(), isAdmin: isAdmin(),
isSuperuser: isSuperuser(), isSuperuser: isSuperuser(),
toast, toast,
settings: { settings,
refreshMode: adminSettings.getAdminPanelRefreshMode(),
pollInterval: adminSettings.getAdminPanelPollInterval(),
refreshStrategy: adminSettings.getAutoRefreshStrategy(),
preserveInteraction: adminSettings.getPreserveInteractionState(),
useRealtimeQueue: adminSettings.getUseRealtimeQueue(),
refreshOnTabVisible: adminSettings.getRefreshOnTabVisible(),
}
}); });
// UI-only state // UI-only state

View File

@@ -794,13 +794,23 @@ export function useModerationQueueManager(
// Visibility change handler // Visibility change handler
useEffect(() => { useEffect(() => {
console.log('🔍 Visibility effect running - refreshOnTabVisible:', settings.refreshOnTabVisible);
// Early return if feature is disabled // Early return if feature is disabled
if (!settings.refreshOnTabVisible) { if (!settings.refreshOnTabVisible) {
console.log('⚙️ refreshOnTabVisible is DISABLED - no listener attached'); console.log('⚙️ refreshOnTabVisible is DISABLED - no listener attached');
return; return;
} }
console.log('✅ refreshOnTabVisible is ENABLED - attaching listener');
const handleVisibilityChange = () => { const handleVisibilityChange = () => {
// Double-check setting before doing anything (defensive check)
if (!settings.refreshOnTabVisible) {
console.log('⚠️ Visibility handler called but setting is disabled - ignoring');
return;
}
if (document.hidden) { if (document.hidden) {
console.log('📴 Tab hidden - pausing queue updates'); console.log('📴 Tab hidden - pausing queue updates');
pauseFetchingRef.current = true; pauseFetchingRef.current = true;