mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-21 23:11:12 -05:00
Refactor code structure and remove redundant changes
This commit is contained in:
pacnpal
190
src-old/components/moderation/renderers/QueueItemHeader.tsx
Normal file
190
src-old/components/moderation/renderers/QueueItemHeader.tsx
Normal file
@@ -0,0 +1,190 @@
|
||||
import { memo, useCallback } from 'react';
|
||||
import { MessageSquare, Image, FileText, Calendar, Edit, Lock, AlertCircle, Code2 } from 'lucide-react';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { UserAvatar } from '@/components/ui/user-avatar';
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
|
||||
import { ValidationSummary } from '../ValidationSummary';
|
||||
import { TransactionStatusIndicator, type TransactionStatus } from '../TransactionStatusIndicator';
|
||||
import { format } from 'date-fns';
|
||||
import type { ModerationItem } from '@/types/moderation';
|
||||
import type { ValidationResult } from '@/lib/entityValidationSchemas';
|
||||
|
||||
interface QueueItemHeaderProps {
|
||||
item: ModerationItem;
|
||||
isMobile: boolean;
|
||||
hasModeratorEdits: boolean;
|
||||
isLockedByOther: boolean;
|
||||
currentLockSubmissionId?: string;
|
||||
validationResult: ValidationResult | null;
|
||||
transactionStatus?: TransactionStatus;
|
||||
transactionMessage?: string;
|
||||
onValidationChange: (result: ValidationResult) => void;
|
||||
onViewRawData?: () => void;
|
||||
}
|
||||
|
||||
const getStatusBadgeVariant = (status: string): "default" | "secondary" | "destructive" | "outline" => {
|
||||
switch (status) {
|
||||
case 'pending': return 'default';
|
||||
case 'approved': return 'secondary';
|
||||
case 'rejected': return 'destructive';
|
||||
case 'flagged': return 'destructive';
|
||||
case 'partially_approved': return 'outline';
|
||||
default: return 'outline';
|
||||
}
|
||||
};
|
||||
|
||||
export const QueueItemHeader = memo(({
|
||||
item,
|
||||
isMobile,
|
||||
hasModeratorEdits,
|
||||
isLockedByOther,
|
||||
currentLockSubmissionId,
|
||||
validationResult,
|
||||
transactionStatus = 'idle',
|
||||
transactionMessage,
|
||||
onValidationChange,
|
||||
onViewRawData
|
||||
}: QueueItemHeaderProps) => {
|
||||
const handleValidationChange = useCallback((result: ValidationResult) => {
|
||||
onValidationChange(result);
|
||||
}, [onValidationChange]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={`flex gap-3 ${isMobile ? 'flex-col' : 'items-center justify-between'}`}>
|
||||
<div className="flex items-center gap-2 flex-wrap flex-1">
|
||||
<Badge variant={getStatusBadgeVariant(item.status)} className={isMobile ? "text-xs" : ""}>
|
||||
{item.type === 'review' ? (
|
||||
<>
|
||||
<MessageSquare className="w-3 h-3 mr-1" />
|
||||
Review
|
||||
</>
|
||||
) : item.submission_type === 'photo' ? (
|
||||
<>
|
||||
<Image className="w-3 h-3 mr-1" />
|
||||
Photo
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<FileText className="w-3 h-3 mr-1" />
|
||||
Submission
|
||||
</>
|
||||
)}
|
||||
</Badge>
|
||||
<Badge variant={getStatusBadgeVariant(item.status)} className={isMobile ? "text-xs" : ""}>
|
||||
{item.status === 'partially_approved' ? 'Partially Approved' :
|
||||
item.status.charAt(0).toUpperCase() + item.status.slice(1)}
|
||||
</Badge>
|
||||
{hasModeratorEdits && (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300 border border-blue-300 dark:border-blue-700"
|
||||
>
|
||||
<Edit className="w-3 h-3 mr-1" />
|
||||
Edited
|
||||
</Badge>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>This submission has been modified by a moderator</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
)}
|
||||
{item.status === 'partially_approved' && (
|
||||
<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">
|
||||
<AlertCircle className="w-3 h-3 mr-1" />
|
||||
Needs Retry
|
||||
</Badge>
|
||||
)}
|
||||
{isLockedByOther && item.type === 'content_submission' && (
|
||||
<Badge variant="outline" className="bg-orange-100 dark:bg-orange-900/30 text-orange-800 dark:text-orange-300 border-orange-300 dark:border-orange-700">
|
||||
<Lock className="w-3 h-3 mr-1" />
|
||||
Locked by Another Moderator
|
||||
</Badge>
|
||||
)}
|
||||
{currentLockSubmissionId === item.id && item.type === 'content_submission' && (
|
||||
<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">
|
||||
<Lock className="w-3 h-3 mr-1" />
|
||||
Claimed by You
|
||||
</Badge>
|
||||
)}
|
||||
<TransactionStatusIndicator
|
||||
status={transactionStatus}
|
||||
message={transactionMessage}
|
||||
showLabel={!isMobile}
|
||||
/>
|
||||
{item.submission_items && item.submission_items.length > 0 && item.submission_items[0].item_data && (
|
||||
<ValidationSummary
|
||||
item={{
|
||||
item_type: item.submission_items[0].item_type,
|
||||
item_data: item.submission_items[0].item_data,
|
||||
id: item.submission_items[0].id,
|
||||
}}
|
||||
compact={true}
|
||||
onValidationChange={handleValidationChange}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{onViewRawData && (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={onViewRawData}
|
||||
className="h-8"
|
||||
>
|
||||
<Code2 className="h-4 w-4" />
|
||||
{!isMobile && <span className="ml-2">Raw Data</span>}
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>View complete JSON data</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
)}
|
||||
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<div className={`flex items-center gap-2 text-muted-foreground ${isMobile ? 'text-xs' : 'text-sm'}`}>
|
||||
<Calendar className={isMobile ? "w-3 h-3" : "w-4 h-4"} />
|
||||
{format(new Date(item.created_at), isMobile ? 'MMM d, HH:mm:ss' : 'MMM d, yyyy HH:mm:ss.SSS')}
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p className="text-xs">Full timestamp:</p>
|
||||
<p className="font-mono">{item.created_at}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{item.user_profile && (
|
||||
<div className={`flex items-center gap-3 ${isMobile ? 'text-xs' : 'text-sm'}`}>
|
||||
<UserAvatar
|
||||
key={item.user_profile.avatar_url || `user-${item.user_id}`}
|
||||
avatarUrl={item.user_profile.avatar_url}
|
||||
fallbackText={item.user_profile.display_name || item.user_profile.username || 'U'}
|
||||
size={isMobile ? "sm" : "md"}
|
||||
/>
|
||||
<div>
|
||||
<span className="font-medium">
|
||||
{item.user_profile.display_name || item.user_profile.username}
|
||||
</span>
|
||||
{item.user_profile.display_name && (
|
||||
<span className={`text-muted-foreground block ${isMobile ? 'text-xs' : 'text-xs'}`}>
|
||||
@{item.user_profile.username}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
QueueItemHeader.displayName = 'QueueItemHeader';
|
||||
Reference in New Issue
Block a user