Refactor moderation queues

src/components/moderation/ReportsQueue.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
 import { CheckCircle, XCircle, ExternalLink, Calendar, User, Flag } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
@@ -8,6 +8,8 @@ import { Label } from '@/components/ui/label';
 import { supabase } from '@/integrations/supabase/client';
 import { useToast } from '@/hooks/use-toast';
 import { format } from 'date-fns';
+import { useAdminSettings } from '@/hooks/useAdminSettings';
+import { useAuth } from '@/hooks/useAuth';
 
 interface Report {
   id: string;
@@ -38,11 +40,26 @@ const STATUS_COLORS = {
   dismissed: 'outline',
 } as const;
 
-export function ReportsQueue() {
+export interface ReportsQueueRef {
+  refresh: () => void;
+}
+
+export const ReportsQueue = forwardRef<ReportsQueueRef>((props, ref) => {
   const [reports, setReports] = useState<Report[]>([]);
   const [loading, setLoading] = useState(true);
   const [actionLoading, setActionLoading] = useState<string | null>(null);
   const { toast } = useToast();
+  const { user } = useAuth();
+
+  // Get admin settings for polling configuration
+  const { getAdminPanelRefreshMode, getAdminPanelPollInterval } = useAdminSettings();
+  const refreshMode = getAdminPanelRefreshMode();
+  const pollInterval = getAdminPanelPollInterval();
+
+  // Expose refresh method via ref
+  useImperativeHandle(ref, () => ({
+    refresh: fetchReports
+  }), []);
 
   const fetchReports = async () => {
     try {
@@ -110,9 +127,25 @@ export function ReportsQueue() {
     }
   };
 
+  // Initial fetch on mount
   useEffect(() => {
-    fetchReports();
-  }, []);
+    if (user) {
+      fetchReports();
+    }
+  }, [user]);
+
+  // Polling for auto-refresh
+  useEffect(() => {
+    if (!user || refreshMode !== 'auto') return;
+
+    const interval = setInterval(() => {
+      fetchReports();
+    }, pollInterval);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [user, refreshMode, pollInterval]);
 
   const handleReportAction = async (reportId: string, action: 'reviewed' | 'dismissed') => {
     setActionLoading(reportId);
@@ -258,4 +291,4 @@ export function ReportsQueue() {
       ))}
     </div>
   );
-}
+});