feat: Add ConnectionOverlay component for improved socket connection handling and user feedback
This commit is contained in:
Chris Parsons
parent
88b44b4616
commit
5b10548f13
4 changed files with 149 additions and 11 deletions
|
|
@ -22,7 +22,6 @@ export function AutodraftSettings({
|
|||
}: AutodraftSettingsProps) {
|
||||
const [localEnabled, setLocalEnabled] = useState(isEnabled);
|
||||
const [localMode, setLocalMode] = useState<"next_pick" | "while_on">(mode);
|
||||
const [isUpdating, setIsUpdating] = useState(false);
|
||||
|
||||
// Sync local state with props when they change (from socket events)
|
||||
useEffect(() => {
|
||||
|
|
@ -35,7 +34,6 @@ export function AutodraftSettings({
|
|||
|
||||
const handleToggle = async (checked: boolean) => {
|
||||
setLocalEnabled(checked);
|
||||
setIsUpdating(true);
|
||||
|
||||
try {
|
||||
const formData = new FormData();
|
||||
|
|
@ -60,14 +58,11 @@ export function AutodraftSettings({
|
|||
// Revert on error
|
||||
setLocalEnabled(!checked);
|
||||
console.error("Error updating autodraft settings:", error);
|
||||
} finally {
|
||||
setIsUpdating(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleModeChange = async (newMode: "next_pick" | "while_on") => {
|
||||
setLocalMode(newMode);
|
||||
setIsUpdating(true);
|
||||
|
||||
try {
|
||||
const formData = new FormData();
|
||||
|
|
@ -92,8 +87,6 @@ export function AutodraftSettings({
|
|||
// Revert on error
|
||||
setLocalMode(localMode);
|
||||
console.error("Error updating autodraft mode:", error);
|
||||
} finally {
|
||||
setIsUpdating(false);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
103
app/components/draft/ConnectionOverlay.tsx
Normal file
103
app/components/draft/ConnectionOverlay.tsx
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
import { Button } from "~/components/ui/button";
|
||||
import { Card } from "~/components/ui/card";
|
||||
|
||||
interface ConnectionOverlayProps {
|
||||
isConnected: boolean;
|
||||
isReconnecting: boolean;
|
||||
connectionError: string | null;
|
||||
}
|
||||
|
||||
export function ConnectionOverlay({
|
||||
isConnected,
|
||||
isReconnecting,
|
||||
connectionError,
|
||||
}: ConnectionOverlayProps) {
|
||||
// Don't show overlay if connected
|
||||
if (isConnected) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-[100]">
|
||||
<Card className="w-full max-w-md mx-4 p-8 text-center">
|
||||
<div className="flex flex-col items-center gap-6">
|
||||
{/* Spinner or Error Icon */}
|
||||
{connectionError ? (
|
||||
<div className="w-16 h-16 rounded-full bg-red-100 dark:bg-red-950 flex items-center justify-center">
|
||||
<svg
|
||||
className="w-8 h-8 text-red-600 dark:text-red-400"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
) : (
|
||||
<div className="relative w-16 h-16">
|
||||
<div className="absolute inset-0 border-4 border-primary/30 rounded-full"></div>
|
||||
<div className="absolute inset-0 border-4 border-primary border-t-transparent rounded-full animate-spin"></div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Title */}
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold mb-2">
|
||||
{connectionError
|
||||
? "Connection Error"
|
||||
: isReconnecting
|
||||
? "Reconnecting..."
|
||||
: "Connecting to Draft"}
|
||||
</h2>
|
||||
|
||||
{/* Message */}
|
||||
<p className="text-muted-foreground">
|
||||
{connectionError ? (
|
||||
connectionError
|
||||
) : isReconnecting ? (
|
||||
"Lost connection to the draft server. Attempting to reconnect..."
|
||||
) : (
|
||||
"Please wait while we connect you to the live draft room."
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Action Button (only on persistent error) */}
|
||||
{connectionError && (
|
||||
<Button
|
||||
onClick={() => window.location.reload()}
|
||||
className="w-full"
|
||||
variant="default"
|
||||
>
|
||||
Reload Page
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{/* Loading Dots */}
|
||||
{!connectionError && (
|
||||
<div className="flex gap-1.5">
|
||||
<div
|
||||
className="w-2 h-2 bg-primary rounded-full animate-bounce"
|
||||
style={{ animationDelay: "0ms" }}
|
||||
></div>
|
||||
<div
|
||||
className="w-2 h-2 bg-primary rounded-full animate-bounce"
|
||||
style={{ animationDelay: "150ms" }}
|
||||
></div>
|
||||
<div
|
||||
className="w-2 h-2 bg-primary rounded-full animate-bounce"
|
||||
style={{ animationDelay: "300ms" }}
|
||||
></div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -4,6 +4,8 @@ import { io, Socket } from "socket.io-client";
|
|||
interface UseDraftSocketReturn {
|
||||
socket: Socket | null;
|
||||
isConnected: boolean;
|
||||
connectionError: string | null;
|
||||
isReconnecting: boolean;
|
||||
on: (event: string, callback: (...args: any[]) => void) => void;
|
||||
off: (event: string, callback?: (...args: any[]) => void) => void;
|
||||
}
|
||||
|
|
@ -11,6 +13,8 @@ interface UseDraftSocketReturn {
|
|||
export function useDraftSocket(seasonId: string, teamId?: string): UseDraftSocketReturn {
|
||||
const socketRef = useRef<Socket | null>(null);
|
||||
const [isConnected, setIsConnected] = useState(false);
|
||||
const [connectionError, setConnectionError] = useState<string | null>(null);
|
||||
const [isReconnecting, setIsReconnecting] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
// Connect to Socket.IO server
|
||||
|
|
@ -24,17 +28,40 @@ export function useDraftSocket(seasonId: string, teamId?: string): UseDraftSocke
|
|||
socket.on("connect", () => {
|
||||
console.log("Connected to Socket.IO:", socket.id);
|
||||
setIsConnected(true);
|
||||
setConnectionError(null);
|
||||
setIsReconnecting(false);
|
||||
// Join the draft room with optional teamId
|
||||
socket.emit("join-draft", seasonId, teamId);
|
||||
});
|
||||
|
||||
socket.on("disconnect", () => {
|
||||
console.log("Disconnected from Socket.IO");
|
||||
socket.on("disconnect", (reason) => {
|
||||
console.log("Disconnected from Socket.IO:", reason);
|
||||
setIsConnected(false);
|
||||
if (reason === "io server disconnect") {
|
||||
// Server disconnected the socket, need to manually reconnect
|
||||
setConnectionError("Server disconnected. Please refresh the page.");
|
||||
} else {
|
||||
// Client disconnected or network issue, will auto-reconnect
|
||||
setIsReconnecting(true);
|
||||
}
|
||||
});
|
||||
|
||||
socket.on("connect_error", (error) => {
|
||||
console.error("Socket.IO connection error:", error);
|
||||
setConnectionError(error.message || "Failed to connect to draft server");
|
||||
setIsReconnecting(false);
|
||||
});
|
||||
|
||||
socket.io.on("reconnect_attempt", () => {
|
||||
console.log("Attempting to reconnect...");
|
||||
setIsReconnecting(true);
|
||||
setConnectionError(null);
|
||||
});
|
||||
|
||||
socket.io.on("reconnect_failed", () => {
|
||||
console.error("Reconnection failed");
|
||||
setConnectionError("Failed to reconnect. Please refresh the page.");
|
||||
setIsReconnecting(false);
|
||||
});
|
||||
|
||||
// Cleanup on unmount
|
||||
|
|
@ -57,5 +84,12 @@ export function useDraftSocket(seasonId: string, teamId?: string): UseDraftSocke
|
|||
socketRef.current?.off(event, callback);
|
||||
};
|
||||
|
||||
return { socket: socketRef.current, isConnected, on, off };
|
||||
return {
|
||||
socket: socketRef.current,
|
||||
isConnected,
|
||||
connectionError,
|
||||
isReconnecting,
|
||||
on,
|
||||
off
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ import { QueueSection } from "~/components/draft/QueueSection";
|
|||
import { AvailableParticipantsSection } from "~/components/draft/AvailableParticipantsSection";
|
||||
import { SidebarRecentPicks } from "~/components/draft/SidebarRecentPicks";
|
||||
import { DraftGridSection } from "~/components/draft/DraftGridSection";
|
||||
import { ConnectionOverlay } from "~/components/draft/ConnectionOverlay";
|
||||
import { calculateDraftEligibility, getEligibilitySummary } from "~/lib/draft-eligibility";
|
||||
import { toast } from "sonner";
|
||||
|
||||
|
|
@ -196,7 +197,7 @@ export default function DraftRoom() {
|
|||
userAutodraftSettings,
|
||||
isCommissioner,
|
||||
} = useLoaderData<typeof loader>();
|
||||
const { isConnected, on, off } = useDraftSocket(season.id, userTeam?.id);
|
||||
const { isConnected, connectionError, isReconnecting, on, off } = useDraftSocket(season.id, userTeam?.id);
|
||||
const [picks, setPicks] = useState(draftPicks);
|
||||
const [currentPick, setCurrentPick] = useState(season.currentPickNumber || 1);
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
|
|
@ -1099,6 +1100,13 @@ export default function DraftRoom() {
|
|||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Connection Overlay - blocks interaction until socket connects */}
|
||||
<ConnectionOverlay
|
||||
isConnected={isConnected}
|
||||
isReconnecting={isReconnecting}
|
||||
connectionError={connectionError}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue