Anthony Correa
9b6b3391e6
- Created new `api` Django app with serializers, viewsets, and routers to expose draft sessions, participants, and movie data. - Registered `api` app in settings and updated root URL configuration. - Extended WebSocket consumers with `inform.draft_status` / `request.draft_status` to allow fetching current draft state. - Updated `DraftSession` and related models to support reverse lookups for draft picks. - Enhanced draft state manager to include `draft_order` in summaries. - Added React WebSocket context provider, connection status component, and new admin/participant panels with phase and participant tracking. - Updated SCSS for participant lists, phase indicators, and status badges. - Modified Django templates to mount new React roots for admin and participant views. - Updated Webpack dev server config to proxy WebSocket connections.
34 lines
1.2 KiB
JavaScript
34 lines
1.2 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
|
export const WebSocketStatus = ({ socket }) => {
|
|
const [isConnected, setIsConnected] = useState(false);
|
|
|
|
useEffect(() => {
|
|
console.log('socket changed', socket)
|
|
if (!socket) return;
|
|
|
|
const handleOpen = () => { console.log('socket open'); setIsConnected(true) };
|
|
const handleClose = () => { console.log('socket close'); setIsConnected(false) };
|
|
const handleError = () => { console.log('socket error'); setIsConnected(false) };
|
|
|
|
socket.addEventListener("open", handleOpen);
|
|
socket.addEventListener("close", handleClose);
|
|
socket.addEventListener("error", handleError);
|
|
|
|
// 🧹 Cleanup to remove listeners when component unmounts or socket changes
|
|
return () => {
|
|
socket.removeEventListener("open", handleOpen);
|
|
socket.removeEventListener("close", handleClose);
|
|
socket.removeEventListener("error", handleError);
|
|
};
|
|
|
|
}, [socket])
|
|
return (
|
|
<div className="d-flex align-items-center gap-2">
|
|
<span
|
|
className={`badge ${isConnected ? "text-bg-success" : "text-bg-danger"}`}
|
|
>
|
|
{isConnected ? "Connected" : "Disconnected"}
|
|
</span>
|
|
</div>
|
|
);
|
|
}; |