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

Fix moderation queue tab switch reload

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-10-11 17:20:35 +00:00
parent f9e12596c7
commit 10950a4034
3 changed files with 42 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -157,13 +157,15 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
getAdminPanelPollInterval,
getAutoRefreshStrategy,
getPreserveInteractionState,
getUseRealtimeQueue
getUseRealtimeQueue,
getRefreshOnTabVisible
} = useAdminSettings();
const refreshMode = getAdminPanelRefreshMode();
const pollInterval = getAdminPanelPollInterval();
const refreshStrategy = getAutoRefreshStrategy();
const preserveInteraction = getPreserveInteractionState();
const useRealtimeQueue = getUseRealtimeQueue();
const refreshOnTabVisible = getRefreshOnTabVisible();
// Track recently removed items to prevent realtime override of optimistic updates
const recentlyRemovedRef = useRef<Set<string>>(new Set());
@@ -172,6 +174,8 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
// Store admin settings and stable refs to avoid triggering fetchItems recreation
const refreshStrategyRef = useRef(refreshStrategy);
const preserveInteractionRef = useRef(preserveInteraction);
const refreshOnTabVisibleRef = useRef(refreshOnTabVisible);
const activeTabRef = useRef<QueueTab>(activeTab);
const userRef = useRef(user);
const toastRef = useRef(toast);
const isAdminRef = useRef(isAdmin);
@@ -180,11 +184,17 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
useEffect(() => {
refreshStrategyRef.current = refreshStrategy;
preserveInteractionRef.current = preserveInteraction;
refreshOnTabVisibleRef.current = refreshOnTabVisible;
userRef.current = user;
toastRef.current = toast;
isAdminRef.current = isAdmin;
isSuperuserRef.current = isSuperuser;
}, [refreshStrategy, preserveInteraction, user, toast, isAdmin, isSuperuser]);
}, [refreshStrategy, preserveInteraction, refreshOnTabVisible, user, toast, isAdmin, isSuperuser]);
// Sync activeTab with ref
useEffect(() => {
activeTabRef.current = activeTab;
}, [activeTab]);
// Persist sort configuration
useEffect(() => {
@@ -1165,7 +1175,7 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
};
}, [user, useRealtimeQueue, debouncedRealtimeUpdate]);
// Visibility change handler - pause queue updates when tab is hidden
// Visibility change handler - smart tab switching behavior
useEffect(() => {
const handleVisibilityChange = () => {
if (document.hidden) {
@@ -1174,17 +1184,23 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
} else {
console.log('📱 Tab visible - resuming queue updates');
pauseFetchingRef.current = false;
// Optional: trigger single refresh when tab becomes visible
if (initialFetchCompleteRef.current && !isMountingRef.current) {
console.log('🔄 Tab became visible - triggering refresh');
fetchItems(filtersRef.current.entityFilter, filtersRef.current.statusFilter, true, activeTab);
// Check admin setting for auto-refresh behavior
const shouldRefresh = refreshOnTabVisibleRef.current;
if (shouldRefresh && initialFetchCompleteRef.current && !isMountingRef.current) {
console.log('🔄 Tab became visible - triggering refresh (admin setting enabled)');
fetchItems(filtersRef.current.entityFilter, filtersRef.current.statusFilter, true, activeTabRef.current);
} else {
console.log('✅ Tab became visible - resuming without refresh');
// Realtime subscriptions will handle updates naturally
}
}
};
document.addEventListener('visibilitychange', handleVisibilityChange);
return () => document.removeEventListener('visibilitychange', handleVisibilityChange);
}, [fetchItems, activeTab]);
}, []); // Empty deps - all values come from refs
const handleResetToPending = async (item: ModerationItem) => {
setActionLoading(item.id);