feat: Implement Modern React Patterns

src/hooks/moderation/useRealtimeSubscriptions.ts

@@ -6,6 +6,7 @@
  */
 
 import { useEffect, useRef, useState, useCallback } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
 import { supabase } from '@/integrations/supabase/client';
 import type { RealtimeChannel } from '@supabase/supabase-js';
 import type { ModerationItem, EntityFilter, StatusFilter } from '@/types/moderation';
@@ -85,6 +86,8 @@ export interface UseRealtimeSubscriptionsReturn {
 export function useRealtimeSubscriptions(
   config: RealtimeSubscriptionConfig
 ): UseRealtimeSubscriptionsReturn {
+  const queryClient = useQueryClient();
+  
   const {
     enabled,
     filters,
@@ -268,21 +271,22 @@ export function useRealtimeSubscriptions(
       return;
     }
     
-    console.log('✅ NEW submission matches filters:', newSubmission.id);
+    console.log('✅ NEW submission matches filters, invalidating query:', newSubmission.id);
     
-    // Fetch full submission details
+    // Invalidate the query to trigger background refetch
+    await queryClient.invalidateQueries({ queryKey: ['moderation-queue'] });
+    
+    // Call legacy callback for new item notification
+    // (This maintains compatibility with NewItemsAlert component)
     try {
       const submission = await fetchSubmissionDetails(newSubmission.id);
       if (!submission) return;
       
-      // Fetch user profile
       const profile = await profileCache.bulkFetch([submission.user_id]);
       const userProfile = profile[0];
       
-      // Resolve entity names
       const { entityName, parkName } = await resolveEntityNames(submission);
       
-      // Build full ModerationItem
       const fullItem = buildModerationItem(
         submission,
         userProfile,
@@ -290,17 +294,15 @@ export function useRealtimeSubscriptions(
         parkName
       );
       
-      // Trigger callback
       onNewItem(fullItem);
-      
-      console.log('🎉 New submission added to queue:', fullItem.id);
     } catch (error) {
-      console.error('Error processing new submission:', error);
+      console.error('Error building new item notification:', error);
     }
   }, [
     filters,
     pauseWhenHidden,
     recentlyRemovedIds,
+    queryClient,
     fetchSubmissionDetails,
     profileCache,
     resolveEntityNames,
@@ -335,56 +337,18 @@ export function useRealtimeSubscriptions(
     
     // Debounce the update
     debouncedUpdate(updatedSubmission.id, async () => {
-      // Check if submission matches current filters
+      console.log('🔄 Invalidating query due to UPDATE:', updatedSubmission.id);
+      
+      // Simply invalidate the query - TanStack Query handles the rest
+      await queryClient.invalidateQueries({ queryKey: ['moderation-queue'] });
+      
+      // Legacy callback for compatibility
       const matchesEntity = matchesEntityFilter(updatedSubmission, filters.entityFilter);
       const matchesStatus = matchesStatusFilter(updatedSubmission, filters.statusFilter);
-      
-      const wasInQueue = currentItemsRef.current.some(i => i.id === updatedSubmission.id);
       const shouldBeInQueue = matchesEntity && matchesStatus;
       
-      if (wasInQueue && !shouldBeInQueue) {
-        // Submission moved out of current filter (e.g., pending → approved)
-        console.log('❌ Submission moved out of queue:', updatedSubmission.id);
-        onItemRemoved(updatedSubmission.id);
-        return;
-      }
-      
       if (!shouldBeInQueue) {
-        // Item doesn't belong in queue at all
-        return;
-      }
-      
-      // Fetch full details
-      try {
-        const submission = await fetchSubmissionDetails(updatedSubmission.id);
-        if (!submission) return;
-        
-        // Get user profile
-        const profiles = await profileCache.bulkFetch([submission.user_id]);
-        const profile = profiles[0];
-        
-        // Resolve entity name (simplified for updates)
-        const content = submission.content as any;
-        const entityName = content?.name || 'Unknown';
-        
-        const fullItem = buildModerationItem(
-          submission,
-          profile,
-          entityName,
-          undefined
-        );
-        
-        // Check if item actually changed
-        const currentItem = currentItemsRef.current.find(i => i.id === fullItem.id);
-        if (currentItem && !hasItemChanged(currentItem, fullItem)) {
-          console.log('✅ Realtime UPDATE: No changes detected for', fullItem.id);
-          return;
-        }
-        
-        console.log('🔄 Realtime UPDATE: Changes detected for', fullItem.id);
-        onUpdateItem(fullItem, false);
-      } catch (error) {
-        console.error('Error processing updated submission:', error);
+        onItemRemoved(updatedSubmission.id);
       }
     });
   }, [
@@ -393,9 +357,7 @@ export function useRealtimeSubscriptions(
     recentlyRemovedIds,
     interactingWithIds,
     debouncedUpdate,
-    fetchSubmissionDetails,
-    profileCache,
-    onUpdateItem,
+    queryClient,
     onItemRemoved,
   ]);