diff --git a/src/hooks/moderation/useModerationQueueManager.ts b/src/hooks/moderation/useModerationQueueManager.ts index 90d97235..e533d03b 100644 --- a/src/hooks/moderation/useModerationQueueManager.ts +++ b/src/hooks/moderation/useModerationQueueManager.ts @@ -152,8 +152,8 @@ export function useModerationQueueManager(config: ModerationQueueManagerConfig): pauseFetchingRef: pauseFetchingRef.current, documentHidden: document.hidden, caller: callerLine, - sortField: sort.config.field, - sortDirection: sort.config.direction, + sortField: sort.debouncedConfig.field, + sortDirection: sort.debouncedConfig.direction, timestamp: new Date().toISOString(), }); @@ -183,8 +183,8 @@ export function useModerationQueueManager(config: ModerationQueueManagerConfig): console.log("🔍 fetchItems called:", { entityFilter: filters.debouncedEntityFilter, statusFilter: filters.debouncedStatusFilter, - sortField: sort.config.field, - sortDirection: sort.config.direction, + sortField: sort.debouncedConfig.field, + sortDirection: sort.debouncedConfig.direction, silent, timestamp: new Date().toISOString(), }); @@ -227,14 +227,14 @@ export function useModerationQueueManager(config: ModerationQueueManagerConfig): // Level 1: Always sort by escalated first (descending) submissionsQuery = submissionsQuery.order('escalated', { ascending: false }); - // Level 2: Apply user-selected sort - submissionsQuery = submissionsQuery.order( - sort.config.field, - { ascending: sort.config.direction === 'asc' } - ); + // Level 2: Apply user-selected sort (use debounced config) + submissionsQuery = submissionsQuery.order( + sort.debouncedConfig.field, + { ascending: sort.debouncedConfig.direction === 'asc' } + ); - // Level 3: Tertiary sort by created_at (if not already primary) - if (sort.config.field !== 'created_at') { + // Level 3: Tertiary sort by created_at (if not already primary) + if (sort.debouncedConfig.field !== 'created_at') { submissionsQuery = submissionsQuery.order('created_at', { ascending: true }); } @@ -475,8 +475,8 @@ export function useModerationQueueManager(config: ModerationQueueManagerConfig): pagination.setTotalCount, pagination.startIndex, pagination.endIndex, - sort.config.field, - sort.config.direction, + sort.debouncedConfig.field, + sort.debouncedConfig.direction, profileCache, entityCache, toast @@ -812,9 +812,11 @@ export function useModerationQueueManager(config: ModerationQueueManagerConfig): useEffect(() => { if (!user || !initialFetchCompleteRef.current || isMountingRef.current) return; - console.log('🔄 [SORT CHANGE] Detected sort config change:', { - field: sort.config.field, - direction: sort.config.direction, + console.log('🔄 [SORT/FILTER CHANGE] Detected change:', { + entityFilter: filters.debouncedEntityFilter, + statusFilter: filters.debouncedStatusFilter, + sortField: sort.debouncedConfig.field, + sortDirection: sort.debouncedConfig.direction, timestamp: new Date().toISOString() }); @@ -823,8 +825,8 @@ export function useModerationQueueManager(config: ModerationQueueManagerConfig): }, [ filters.debouncedEntityFilter, filters.debouncedStatusFilter, - sort.config.field, - sort.config.direction, + sort.debouncedConfig.field, + sort.debouncedConfig.direction, fetchItems, pagination.reset, user diff --git a/src/hooks/moderation/useModerationSort.ts b/src/hooks/moderation/useModerationSort.ts index 6b01aef8..4c70d8cc 100644 --- a/src/hooks/moderation/useModerationSort.ts +++ b/src/hooks/moderation/useModerationSort.ts @@ -1,7 +1,9 @@ import { useState, useCallback, useEffect } from 'react'; +import { useDebounce } from '@/hooks/useDebounce'; import type { SortConfig, SortField } from '@/types/moderation'; const STORAGE_KEY = 'moderationQueue_sortConfig'; +const SORT_DEBOUNCE_MS = 300; /** * Default sort configuration @@ -43,8 +45,10 @@ function saveSortConfig(config: SortConfig): void { } export interface UseModerationSortReturn { - /** Current sort configuration */ + /** Current sort configuration (immediate) */ config: SortConfig; + /** Debounced sort configuration (use this for queries) */ + debouncedConfig: SortConfig; /** Update the sort configuration */ setConfig: (config: SortConfig) => void; /** Sort by a specific field, toggling direction if already sorting by that field */ @@ -63,6 +67,9 @@ export interface UseModerationSortReturn { */ export function useModerationSort(): UseModerationSortReturn { const [config, setConfigState] = useState(loadSortConfig); + + // Debounce the config to prevent rapid-fire fetches + const debouncedConfig = useDebounce(config, SORT_DEBOUNCE_MS); // Persist to localStorage whenever config changes useEffect(() => { @@ -70,6 +77,7 @@ export function useModerationSort(): UseModerationSortReturn { }, [config]); const setConfig = useCallback((newConfig: SortConfig) => { + console.log('📝 [SORT] setConfig called:', newConfig); setConfigState(newConfig); }, []); @@ -96,6 +104,7 @@ export function useModerationSort(): UseModerationSortReturn { return { config, + debouncedConfig, setConfig, sortBy, toggleDirection,