mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-21 17:31:12 -05:00
Refactor code structure and remove redundant changes
This commit is contained in:
pacnpal
187
src-old/components/ui/retry-status-indicator.tsx
Normal file
187
src-old/components/ui/retry-status-indicator.tsx
Normal file
@@ -0,0 +1,187 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Loader2, CheckCircle2, XCircle } from 'lucide-react';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import { Progress } from '@/components/ui/progress';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
interface RetryStatus {
|
||||
id: string;
|
||||
attempt: number;
|
||||
maxAttempts: number;
|
||||
delay: number;
|
||||
type: string;
|
||||
state: 'retrying' | 'success' | 'failed';
|
||||
errorId?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Global retry status indicator
|
||||
* Shows visual feedback when submissions are being retried due to transient failures
|
||||
* Supports success/failure states and multiple concurrent retries
|
||||
*/
|
||||
export function RetryStatusIndicator() {
|
||||
const [retries, setRetries] = useState<Map<string, RetryStatus & { countdown: number }>>(new Map());
|
||||
|
||||
useEffect(() => {
|
||||
const handleRetry = (event: Event) => {
|
||||
const customEvent = event as CustomEvent<Omit<RetryStatus, 'state'>>;
|
||||
const { id, attempt, maxAttempts, delay, type } = customEvent.detail;
|
||||
|
||||
setRetries(prev => {
|
||||
const next = new Map(prev);
|
||||
next.set(id, { id, attempt, maxAttempts, delay, type, state: 'retrying', countdown: delay });
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const handleSuccess = (event: Event) => {
|
||||
const customEvent = event as CustomEvent<{ id: string }>;
|
||||
const { id } = customEvent.detail;
|
||||
|
||||
setRetries(prev => {
|
||||
const retry = prev.get(id);
|
||||
if (!retry) return prev;
|
||||
|
||||
const next = new Map(prev);
|
||||
next.set(id, { ...retry, state: 'success', countdown: 0 });
|
||||
return next;
|
||||
});
|
||||
|
||||
// Remove after 2 seconds
|
||||
setTimeout(() => {
|
||||
setRetries(prev => {
|
||||
const next = new Map(prev);
|
||||
next.delete(id);
|
||||
return next;
|
||||
});
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
const handleFailure = (event: Event) => {
|
||||
const customEvent = event as CustomEvent<{ id: string; errorId: string }>;
|
||||
const { id, errorId } = customEvent.detail;
|
||||
|
||||
setRetries(prev => {
|
||||
const retry = prev.get(id);
|
||||
if (!retry) return prev;
|
||||
|
||||
const next = new Map(prev);
|
||||
next.set(id, { ...retry, state: 'failed', errorId, countdown: 0 });
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
window.addEventListener('submission-retry', handleRetry);
|
||||
window.addEventListener('submission-retry-success', handleSuccess);
|
||||
window.addEventListener('submission-retry-failed', handleFailure);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('submission-retry', handleRetry);
|
||||
window.removeEventListener('submission-retry-success', handleSuccess);
|
||||
window.removeEventListener('submission-retry-failed', handleFailure);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Countdown timer for retrying state
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
setRetries(prev => {
|
||||
let hasChanges = false;
|
||||
const next = new Map(prev);
|
||||
|
||||
next.forEach((retry, id) => {
|
||||
if (retry.state === 'retrying' && retry.countdown > 0) {
|
||||
const newCountdown = retry.countdown - 100;
|
||||
next.set(id, { ...retry, countdown: Math.max(0, newCountdown) });
|
||||
hasChanges = true;
|
||||
}
|
||||
});
|
||||
|
||||
return hasChanges ? next : prev;
|
||||
});
|
||||
}, 100);
|
||||
|
||||
return () => clearInterval(timer);
|
||||
}, []);
|
||||
|
||||
if (retries.size === 0) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed bottom-4 right-4 z-50 space-y-2">
|
||||
{Array.from(retries.values()).map((retry) => (
|
||||
<RetryCard key={retry.id} retry={retry} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function RetryCard({ retry }: { retry: RetryStatus & { countdown: number } }) {
|
||||
if (retry.state === 'success') {
|
||||
return (
|
||||
<Card className="p-4 shadow-lg border-success bg-success/10 w-80 animate-in slide-in-from-bottom-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<CheckCircle2 className="w-5 h-5 text-success flex-shrink-0" />
|
||||
<p className="text-sm font-medium text-foreground">
|
||||
{retry.type} submitted successfully!
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
if (retry.state === 'failed') {
|
||||
return (
|
||||
<Card className="p-4 shadow-lg border-destructive bg-destructive/10 w-80 animate-in slide-in-from-bottom-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<XCircle className="w-5 h-5 text-destructive mt-0.5 flex-shrink-0" />
|
||||
<div className="flex-1 space-y-2">
|
||||
<p className="text-sm font-medium text-foreground">
|
||||
Submission failed
|
||||
</p>
|
||||
{retry.errorId && (
|
||||
<>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Error ID: {retry.errorId}
|
||||
</p>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => window.location.href = `/admin/error-lookup?id=${retry.errorId}`}
|
||||
>
|
||||
View Details
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// Retrying state
|
||||
const progress = retry.delay > 0 ? ((retry.delay - retry.countdown) / retry.delay) * 100 : 0;
|
||||
|
||||
return (
|
||||
<Card className="p-4 shadow-lg border-amber-500 bg-amber-50 dark:bg-amber-950 w-80 animate-in slide-in-from-bottom-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<Loader2 className="w-5 h-5 animate-spin text-amber-600 dark:text-amber-400 mt-0.5 flex-shrink-0" />
|
||||
<div className="flex-1 space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-sm font-medium text-amber-900 dark:text-amber-100">
|
||||
Retrying submission...
|
||||
</p>
|
||||
<span className="text-xs font-mono text-amber-700 dark:text-amber-300">
|
||||
{retry.attempt}/{retry.maxAttempts}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-amber-700 dark:text-amber-300">
|
||||
Network issue detected. Retrying {retry.type} submission in {Math.ceil(retry.countdown / 1000)}s
|
||||
</p>
|
||||
|
||||
<Progress value={progress} className="h-1" />
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user