diff --git a/src/components/moderation/ItemReviewCard.tsx b/src/components/moderation/ItemReviewCard.tsx index e1b26265..1f557d9b 100644 --- a/src/components/moderation/ItemReviewCard.tsx +++ b/src/components/moderation/ItemReviewCard.tsx @@ -7,7 +7,7 @@ import { useIsMobile } from '@/hooks/use-mobile'; import { PhotoSubmissionDisplay } from './PhotoSubmissionDisplay'; import { SubmissionChangesDisplay } from './SubmissionChangesDisplay'; import { ValidationSummary } from './ValidationSummary'; -import { useState } from 'react'; +import { useState, useCallback } from 'react'; import { ValidationResult } from '@/lib/entityValidationSchemas'; interface ItemReviewCardProps { @@ -21,6 +21,10 @@ export function ItemReviewCard({ item, onEdit, onStatusChange, submissionId }: I const isMobile = useIsMobile(); const [validationResult, setValidationResult] = useState(null); + const handleValidationChange = useCallback((result: ValidationResult) => { + setValidationResult(result); + }, []); + const getItemIcon = () => { switch (item.item_type) { case 'park': return ; @@ -117,7 +121,7 @@ export function ItemReviewCard({ item, onEdit, onStatusChange, submissionId }: I item_data: item.item_data, id: item.id, }} - onValidationChange={setValidationResult} + onValidationChange={handleValidationChange} compact={false} /> diff --git a/src/components/moderation/QueueItem.tsx b/src/components/moderation/QueueItem.tsx index 8caa906e..dadcd154 100644 --- a/src/components/moderation/QueueItem.tsx +++ b/src/components/moderation/QueueItem.tsx @@ -1,4 +1,4 @@ -import { memo, useState } from 'react'; +import { memo, useState, useCallback } from 'react'; import { CheckCircle, XCircle, Eye, Calendar, MessageSquare, FileText, Image, ListTree, RefreshCw, AlertCircle, Lock, Trash2, AlertTriangle } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Badge } from '@/components/ui/badge'; @@ -99,6 +99,10 @@ export const QueueItem = memo(({ }: QueueItemProps) => { const [validationResult, setValidationResult] = useState(null); + const handleValidationChange = useCallback((result: ValidationResult) => { + setValidationResult(result); + }, []); + return ( )} diff --git a/src/components/moderation/ValidationSummary.tsx b/src/components/moderation/ValidationSummary.tsx index ba1a6917..a3bf3c8e 100644 --- a/src/components/moderation/ValidationSummary.tsx +++ b/src/components/moderation/ValidationSummary.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react'; +import { useEffect, useState, useMemo } from 'react'; import { AlertCircle, CheckCircle, Info, AlertTriangle } from 'lucide-react'; import { Badge } from '@/components/ui/badge'; import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'; @@ -20,22 +20,21 @@ export function ValidationSummary({ item, onValidationChange, compact = false }: const [isLoading, setIsLoading] = useState(true); const [isExpanded, setIsExpanded] = useState(false); + // Create stable reference for item_data to prevent unnecessary re-validations + const itemDataString = useMemo( + () => JSON.stringify(item.item_data), + [item.item_data] + ); + useEffect(() => { async function validate() { setIsLoading(true); try { - console.log('Validating submission:', { - type: item.item_type, - data: item.item_data, - id: item.id - }); - const result = await validateEntityData( item.item_type as any, { ...item.item_data, id: item.id } ); - console.log('Validation result:', result); setValidationResult(result); onValidationChange?.(result); } catch (error) { @@ -53,7 +52,7 @@ export function ValidationSummary({ item, onValidationChange, compact = false }: } validate(); - }, [item.item_type, item.item_data, item.id, onValidationChange]); + }, [item.item_type, itemDataString, item.id]); // Auto-expand when there are blocking errors or warnings useEffect(() => {