mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-21 23:51:13 -05:00
Refactor code structure and remove redundant changes
This commit is contained in:
pacnpal
307
src-old/components/moderation/ValidationSummary.tsx
Normal file
307
src-old/components/moderation/ValidationSummary.tsx
Normal file
@@ -0,0 +1,307 @@
|
||||
import { useEffect, useState, useMemo } from 'react';
|
||||
import { AlertCircle, CheckCircle, Info, AlertTriangle } from 'lucide-react';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { RefreshButton } from '@/components/ui/refresh-button';
|
||||
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
|
||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
|
||||
import { validateEntityData, ValidationResult } from '@/lib/entityValidationSchemas';
|
||||
import { handleNonCriticalError } from '@/lib/errorHandler';
|
||||
|
||||
import type { SubmissionItemData } from '@/types/moderation';
|
||||
|
||||
interface ValidationSummaryProps {
|
||||
item: {
|
||||
item_type: string;
|
||||
item_data: SubmissionItemData;
|
||||
id?: string;
|
||||
};
|
||||
onValidationChange?: (result: ValidationResult) => void;
|
||||
compact?: boolean;
|
||||
validationKey?: number;
|
||||
}
|
||||
|
||||
export function ValidationSummary({ item, onValidationChange, compact = false, validationKey }: ValidationSummaryProps) {
|
||||
const [validationResult, setValidationResult] = useState<ValidationResult | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isExpanded, setIsExpanded] = useState(false);
|
||||
const [manualTriggerCount, setManualTriggerCount] = useState(0);
|
||||
const [isRevalidating, setIsRevalidating] = useState(false);
|
||||
|
||||
// Helper to extract the correct entity ID based on entity type
|
||||
const getEntityId = (
|
||||
itemType: string,
|
||||
itemData: SubmissionItemData | null | undefined,
|
||||
fallbackId?: string
|
||||
): string | undefined => {
|
||||
// Guard against null/undefined itemData
|
||||
if (!itemData) return fallbackId;
|
||||
|
||||
// Try entity-specific ID fields first
|
||||
const entityIdField = `${itemType}_id`;
|
||||
const typedData = itemData as unknown as Record<string, unknown>;
|
||||
|
||||
if (typeof typedData[entityIdField] === 'string') {
|
||||
return typedData[entityIdField] as string;
|
||||
}
|
||||
|
||||
// For companies, check company_id
|
||||
if (['manufacturer', 'designer', 'operator', 'property_owner'].includes(itemType) &&
|
||||
typeof typedData.company_id === 'string') {
|
||||
return typedData.company_id;
|
||||
}
|
||||
|
||||
// Fall back to generic id field or provided fallback
|
||||
if (typeof typedData.id === 'string') {
|
||||
return typedData.id;
|
||||
}
|
||||
|
||||
return fallbackId;
|
||||
};
|
||||
|
||||
// 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 {
|
||||
// Type guard for valid entity types
|
||||
type ValidEntityType = 'park' | 'ride' | 'manufacturer' | 'operator' | 'designer' | 'property_owner' | 'ride_model' | 'photo' | 'milestone' | 'timeline_event';
|
||||
const validEntityTypes: ValidEntityType[] = ['park', 'ride', 'manufacturer', 'operator', 'designer', 'property_owner', 'ride_model', 'photo', 'milestone', 'timeline_event'];
|
||||
|
||||
if (!validEntityTypes.includes(item.item_type as ValidEntityType)) {
|
||||
setValidationResult({
|
||||
isValid: false,
|
||||
blockingErrors: [{ field: 'item_type', message: `Invalid entity type: ${item.item_type}`, severity: 'blocking' }],
|
||||
warnings: [],
|
||||
suggestions: [],
|
||||
allErrors: [{ field: 'item_type', message: `Invalid entity type: ${item.item_type}`, severity: 'blocking' }],
|
||||
});
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const result = await validateEntityData(
|
||||
item.item_type as ValidEntityType,
|
||||
{
|
||||
...(item.item_data || {}), // Add null coalescing
|
||||
id: getEntityId(item.item_type, item.item_data, item.id)
|
||||
}
|
||||
);
|
||||
|
||||
setValidationResult(result);
|
||||
onValidationChange?.(result);
|
||||
} catch (error: unknown) {
|
||||
handleNonCriticalError(error, {
|
||||
action: 'Validate entity',
|
||||
metadata: { entityType: item.item_type }
|
||||
});
|
||||
setValidationResult({
|
||||
isValid: false,
|
||||
blockingErrors: [{ field: 'validation', message: 'Failed to validate', severity: 'blocking' }],
|
||||
warnings: [],
|
||||
suggestions: [],
|
||||
allErrors: [{ field: 'validation', message: 'Failed to validate', severity: 'blocking' }],
|
||||
});
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
validate();
|
||||
}, [item.item_type, itemDataString, item.id, validationKey, manualTriggerCount]);
|
||||
|
||||
// Auto-expand when there are blocking errors or warnings
|
||||
useEffect(() => {
|
||||
if (validationResult && (validationResult.blockingErrors.length > 0 || validationResult.warnings.length > 0)) {
|
||||
setIsExpanded(true);
|
||||
}
|
||||
}, [validationResult]);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<div className="animate-spin rounded-full h-4 w-4 border-2 border-primary border-t-transparent" />
|
||||
<span>Validating...</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!validationResult) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const hasBlockingErrors = validationResult.blockingErrors.length > 0;
|
||||
const hasWarnings = validationResult.warnings.length > 0;
|
||||
const hasSuggestions = validationResult.suggestions.length > 0;
|
||||
const hasAnyIssues = hasBlockingErrors || hasWarnings || hasSuggestions;
|
||||
|
||||
// Compact view (for queue items) - NO HOVER, ALWAYS VISIBLE
|
||||
if (compact) {
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
{/* Status Badges */}
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
{validationResult.isValid && !hasWarnings && !hasSuggestions && (
|
||||
<Badge variant="secondary" className="bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 border-green-300 dark:border-green-700">
|
||||
<CheckCircle className="w-3 h-3 mr-1" />
|
||||
Valid
|
||||
</Badge>
|
||||
)}
|
||||
{hasBlockingErrors && (
|
||||
<Badge variant="destructive">
|
||||
<AlertCircle className="w-3 h-3 mr-1" />
|
||||
{validationResult.blockingErrors.length} Error{validationResult.blockingErrors.length !== 1 ? 's' : ''}
|
||||
</Badge>
|
||||
)}
|
||||
{hasWarnings && (
|
||||
<Badge variant="outline" className="bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300 border-yellow-300 dark:border-yellow-700">
|
||||
<AlertTriangle className="w-3 h-3 mr-1" />
|
||||
{validationResult.warnings.length} Warning{validationResult.warnings.length !== 1 ? 's' : ''}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ALWAYS SHOW ERROR DETAILS - NO HOVER NEEDED */}
|
||||
{hasBlockingErrors && (
|
||||
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded p-2">
|
||||
<p className="text-xs font-semibold text-red-800 dark:text-red-300 mb-1">Blocking Errors:</p>
|
||||
<ul className="text-xs space-y-0.5 text-red-700 dark:text-red-400">
|
||||
{validationResult.blockingErrors.map((error, i) => (
|
||||
<li key={i}>
|
||||
• <span className="font-medium">{error.field}:</span> {error.message}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{hasWarnings && !hasBlockingErrors && (
|
||||
<div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded p-2">
|
||||
<p className="text-xs font-semibold text-yellow-800 dark:text-yellow-300 mb-1">Warnings:</p>
|
||||
<ul className="text-xs space-y-0.5 text-yellow-700 dark:text-yellow-400">
|
||||
{validationResult.warnings.slice(0, 3).map((warning, i) => (
|
||||
<li key={i}>
|
||||
• <span className="font-medium">{warning.field}:</span> {warning.message}
|
||||
</li>
|
||||
))}
|
||||
{validationResult.warnings.length > 3 && (
|
||||
<li className="italic">... and {validationResult.warnings.length - 3} more</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Detailed view (for review manager)
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{/* Summary Badge */}
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
{validationResult.isValid && !hasWarnings && !hasSuggestions && (
|
||||
<Badge variant="secondary" className="bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 border-green-300 dark:border-green-700">
|
||||
<CheckCircle className="w-4 h-4 mr-1" />
|
||||
All Valid
|
||||
</Badge>
|
||||
)}
|
||||
{hasBlockingErrors && (
|
||||
<Badge variant="destructive" className="text-sm">
|
||||
<AlertCircle className="w-4 h-4 mr-1" />
|
||||
{validationResult.blockingErrors.length} Blocking Error{validationResult.blockingErrors.length !== 1 ? 's' : ''}
|
||||
</Badge>
|
||||
)}
|
||||
{hasWarnings && (
|
||||
<Badge variant="outline" className="bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300 border-yellow-300 dark:border-yellow-700 text-sm">
|
||||
<AlertTriangle className="w-4 h-4 mr-1" />
|
||||
{validationResult.warnings.length} Warning{validationResult.warnings.length !== 1 ? 's' : ''}
|
||||
</Badge>
|
||||
)}
|
||||
{hasSuggestions && (
|
||||
<Badge variant="outline" className="bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 border-blue-300 dark:border-blue-700 text-sm">
|
||||
<Info className="w-4 h-4 mr-1" />
|
||||
{validationResult.suggestions.length} Suggestion{validationResult.suggestions.length !== 1 ? 's' : ''}
|
||||
</Badge>
|
||||
)}
|
||||
|
||||
<RefreshButton
|
||||
onRefresh={async () => {
|
||||
setIsRevalidating(true);
|
||||
try {
|
||||
setManualTriggerCount(prev => prev + 1);
|
||||
// Short delay to show feedback
|
||||
await new Promise(resolve => setTimeout(resolve, 500));
|
||||
} finally {
|
||||
setIsRevalidating(false);
|
||||
}
|
||||
}}
|
||||
isLoading={isRevalidating}
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="text-xs h-7"
|
||||
>
|
||||
Re-validate
|
||||
</RefreshButton>
|
||||
</div>
|
||||
|
||||
{/* Detailed Issues */}
|
||||
{hasAnyIssues && (
|
||||
<Collapsible open={isExpanded} onOpenChange={setIsExpanded}>
|
||||
<CollapsibleTrigger className="text-sm text-muted-foreground hover:text-foreground transition-colors">
|
||||
{isExpanded ? 'Hide' : 'Show'} validation details
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="space-y-2 mt-2">
|
||||
{/* Blocking Errors */}
|
||||
{hasBlockingErrors && (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertTitle>Blocking Errors</AlertTitle>
|
||||
<AlertDescription className="space-y-1 mt-2">
|
||||
{validationResult.blockingErrors.map((error, index) => (
|
||||
<div key={index} className="text-sm">
|
||||
<span className="font-medium">{error.field}:</span> {error.message}
|
||||
</div>
|
||||
))}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* Warnings */}
|
||||
{hasWarnings && (
|
||||
<Alert className="border-yellow-300 dark:border-yellow-700 bg-yellow-50 dark:bg-yellow-900/20">
|
||||
<AlertTriangle className="h-4 w-4 text-yellow-800 dark:text-yellow-300" />
|
||||
<AlertTitle className="text-yellow-800 dark:text-yellow-300">Warnings</AlertTitle>
|
||||
<AlertDescription className="space-y-1 mt-2 text-yellow-800 dark:text-yellow-300">
|
||||
{validationResult.warnings.map((warning, index) => (
|
||||
<div key={index} className="text-sm">
|
||||
<span className="font-medium">{warning.field}:</span> {warning.message}
|
||||
</div>
|
||||
))}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* Suggestions */}
|
||||
{hasSuggestions && (
|
||||
<Alert className="border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-blue-900/20">
|
||||
<Info className="h-4 w-4 text-blue-800 dark:text-blue-300" />
|
||||
<AlertTitle className="text-blue-800 dark:text-blue-300">Suggestions</AlertTitle>
|
||||
<AlertDescription className="space-y-1 mt-2 text-blue-800 dark:text-blue-300">
|
||||
{validationResult.suggestions.map((suggestion, index) => (
|
||||
<div key={index} className="text-sm">
|
||||
<span className="font-medium">{suggestion.field}:</span> {suggestion.message}
|
||||
</div>
|
||||
))}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user