Refactor: Implement API and cache improvements

src/components/moderation/ReportButton.tsx

@@ -19,11 +19,8 @@ import {
 } from '@/components/ui/select';
 import { Textarea } from '@/components/ui/textarea';
 import { Label } from '@/components/ui/label';
-import { supabase } from '@/integrations/supabase/client';
 import { useAuth } from '@/hooks/useAuth';
-import { useToast } from '@/hooks/use-toast';
-import { getErrorMessage } from '@/lib/errorHandler';
-import { useQueryInvalidation } from '@/lib/queryInvalidation';
+import { useReportMutation } from '@/hooks/reports/useReportMutation';
 
 interface ReportButtonProps {
   entityType: 'review' | 'profile' | 'content_submission';
@@ -43,49 +40,23 @@ export function ReportButton({ entityType, entityId, className }: ReportButtonPr
   const [open, setOpen] = useState(false);
   const [reportType, setReportType] = useState('');
   const [reason, setReason] = useState('');
-  const [loading, setLoading] = useState(false);
   const { user } = useAuth();
-  const { toast } = useToast();
   
-  // Cache invalidation for moderation queue
-  const { invalidateModerationQueue, invalidateModerationStats } = useQueryInvalidation();
+  const reportMutation = useReportMutation();
 
-  const handleSubmit = async () => {
+  const handleSubmit = () => {
     if (!user || !reportType) return;
 
-    setLoading(true);
-    try {
-      const { error } = await supabase.from('reports').insert({
-        reporter_id: user.id,
-        reported_entity_type: entityType,
-        reported_entity_id: entityId,
-        report_type: reportType,
-        reason: reason.trim() || null,
-      });
-
-      if (error) throw error;
-
-      // Invalidate moderation caches
-      invalidateModerationQueue();
-      invalidateModerationStats();
-
-      toast({
-        title: "Report Submitted",
-        description: "Thank you for your report. We'll review it shortly.",
-      });
-
-      setOpen(false);
-      setReportType('');
-      setReason('');
-    } catch (error: unknown) {
-      toast({
-        title: "Error",
-        description: getErrorMessage(error),
-        variant: "destructive",
-      });
-    } finally {
-      setLoading(false);
-    }
+    reportMutation.mutate(
+      { entityType, entityId, reportType, reason },
+      {
+        onSuccess: () => {
+          setOpen(false);
+          setReportType('');
+          setReason('');
+        },
+      }
+    );
   };
 
   if (!user) return null;
@@ -144,10 +115,10 @@ export function ReportButton({ entityType, entityId, className }: ReportButtonPr
           </Button>
           <Button
             onClick={handleSubmit}
-            disabled={!reportType || loading}
+            disabled={!reportType || reportMutation.isPending}
             variant="destructive"
           >
-            {loading ? 'Submitting...' : 'Submit Report'}
+            {reportMutation.isPending ? 'Submitting...' : 'Submit Report'}
           </Button>
         </DialogFooter>
       </DialogContent>