import { useEffect, useRef, useState } from "react"; 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; } export function useDraftSocket(seasonId: string, teamId?: string): UseDraftSocketReturn { const socketRef = useRef(null); const [isConnected, setIsConnected] = useState(false); const [connectionError, setConnectionError] = useState(null); const [isReconnecting, setIsReconnecting] = useState(false); useEffect(() => { // Connect to Socket.IO server const socket = io({ path: "/socket.io", transports: ["websocket", "polling"], }); socketRef.current = socket; 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", (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 return () => { if (socket) { console.log("Leaving draft room:", seasonId); socket.emit("leave-draft", seasonId); socket.disconnect(); } }; }, [seasonId, teamId]); // Helper to subscribe to events const on = (event: string, callback: (...args: any[]) => void) => { socketRef.current?.on(event, callback); }; // Helper to unsubscribe from events const off = (event: string, callback?: (...args: any[]) => void) => { socketRef.current?.off(event, callback); }; return { socket: socketRef.current, isConnected, connectionError, isReconnecting, on, off }; }