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>

src/components/parks/ParkCard.tsx

@@ -19,36 +19,42 @@ export function ParkCard({ park }: ParkCardProps) {
     navigate(`/parks/${park.slug}`);
   };
   
-  // Prefetch park detail data on hover
+  // Smart prefetch - only if not already cached
   const handleMouseEnter = () => {
-    // Prefetch park detail page data
-    queryClient.prefetchQuery({
-      queryKey: queryKeys.parks.detail(park.slug),
-      queryFn: async () => {
-        const { data } = await supabase
-          .from('parks')
-          .select('*')
-          .eq('slug', park.slug)
-          .single();
-        return data;
-      },
-      staleTime: 5 * 60 * 1000,
-    });
+    // Check if already cached before prefetching
+    const detailCached = queryClient.getQueryData(queryKeys.parks.detail(park.slug));
+    const photosCached = queryClient.getQueryData(queryKeys.photos.entity('park', park.id));
     
-    // Prefetch park photos (first 10)
-    queryClient.prefetchQuery({
-      queryKey: queryKeys.photos.entity('park', park.id),
-      queryFn: async () => {
-        const { data } = await supabase
-          .from('photos')
-          .select('*')
-          .eq('entity_type', 'park')
-          .eq('entity_id', park.id)
-          .limit(10);
-        return data;
-      },
-      staleTime: 5 * 60 * 1000,
-    });
+    if (!detailCached) {
+      queryClient.prefetchQuery({
+        queryKey: queryKeys.parks.detail(park.slug),
+        queryFn: async () => {
+          const { data } = await supabase
+            .from('parks')
+            .select('*')
+            .eq('slug', park.slug)
+            .single();
+          return data;
+        },
+        staleTime: 5 * 60 * 1000,
+      });
+    }
+    
+    if (!photosCached) {
+      queryClient.prefetchQuery({
+        queryKey: queryKeys.photos.entity('park', park.id),
+        queryFn: async () => {
+          const { data } = await supabase
+            .from('photos')
+            .select('*')
+            .eq('entity_type', 'park')
+            .eq('entity_id', park.id)
+            .limit(10);
+          return data;
+        },
+        staleTime: 5 * 60 * 1000,
+      });
+    }
   };
   const getStatusColor = (status: string) => {
     switch (status) {