mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-21 05:11:13 -05:00
Refactor code structure and remove redundant changes
This commit is contained in:
139
src-old/components/error/NetworkErrorBanner.tsx
Normal file
139
src-old/components/error/NetworkErrorBanner.tsx
Normal file
@@ -0,0 +1,139 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { WifiOff, RefreshCw, X, Eye } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface NetworkErrorBannerProps {
|
||||
isOffline: boolean;
|
||||
pendingCount?: number;
|
||||
onRetryNow?: () => Promise<void>;
|
||||
onViewQueue?: () => void;
|
||||
estimatedRetryTime?: Date;
|
||||
}
|
||||
|
||||
export function NetworkErrorBanner({
|
||||
isOffline,
|
||||
pendingCount = 0,
|
||||
onRetryNow,
|
||||
onViewQueue,
|
||||
estimatedRetryTime,
|
||||
}: NetworkErrorBannerProps) {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const [isRetrying, setIsRetrying] = useState(false);
|
||||
const [countdown, setCountdown] = useState<number | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
setIsVisible(isOffline || pendingCount > 0);
|
||||
}, [isOffline, pendingCount]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!estimatedRetryTime) {
|
||||
setCountdown(null);
|
||||
return;
|
||||
}
|
||||
|
||||
const interval = setInterval(() => {
|
||||
const now = Date.now();
|
||||
const remaining = Math.max(0, estimatedRetryTime.getTime() - now);
|
||||
setCountdown(Math.ceil(remaining / 1000));
|
||||
|
||||
if (remaining <= 0) {
|
||||
clearInterval(interval);
|
||||
setCountdown(null);
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [estimatedRetryTime]);
|
||||
|
||||
const handleRetryNow = async () => {
|
||||
if (!onRetryNow) return;
|
||||
|
||||
setIsRetrying(true);
|
||||
try {
|
||||
await onRetryNow();
|
||||
} finally {
|
||||
setIsRetrying(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (!isVisible) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"fixed top-0 left-0 right-0 z-50 transition-transform duration-300",
|
||||
isVisible ? "translate-y-0" : "-translate-y-full"
|
||||
)}
|
||||
>
|
||||
<div className="bg-destructive/90 backdrop-blur-sm text-destructive-foreground shadow-lg">
|
||||
<div className="container mx-auto px-4 py-3">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-3 flex-1">
|
||||
<WifiOff className="h-5 w-5 flex-shrink-0" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-semibold text-sm">
|
||||
{isOffline ? 'You are offline' : 'Network Issue Detected'}
|
||||
</p>
|
||||
<p className="text-xs opacity-90 truncate">
|
||||
{pendingCount > 0 ? (
|
||||
<>
|
||||
{pendingCount} submission{pendingCount !== 1 ? 's' : ''} pending
|
||||
{countdown !== null && countdown > 0 && (
|
||||
<span className="ml-2">
|
||||
· Retrying in {countdown}s
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
'Changes will sync when connection is restored'
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 flex-shrink-0">
|
||||
{pendingCount > 0 && onViewQueue && (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
onClick={onViewQueue}
|
||||
className="h-8 text-xs bg-background/20 hover:bg-background/30"
|
||||
>
|
||||
<Eye className="h-3.5 w-3.5 mr-1.5" />
|
||||
View Queue ({pendingCount})
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{onRetryNow && (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
onClick={handleRetryNow}
|
||||
disabled={isRetrying}
|
||||
className="h-8 text-xs bg-background/20 hover:bg-background/30"
|
||||
>
|
||||
<RefreshCw className={cn(
|
||||
"h-3.5 w-3.5 mr-1.5",
|
||||
isRetrying && "animate-spin"
|
||||
)} />
|
||||
{isRetrying ? 'Retrying...' : 'Retry Now'}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => setIsVisible(false)}
|
||||
className="h-8 w-8 p-0 hover:bg-background/20"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
<span className="sr-only">Dismiss</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user