Anthony Correa
baddca8d50
* Rename WebSocket message types for better organization * Improve state handling with dedicated methods like broadcast_state * Restructure frontend components and remove unused code
46 lines
1.4 KiB
JavaScript
46 lines
1.4 KiB
JavaScript
import React, { useEffect, useState } from "react";;
|
|
import { useWebSocket } from "./components/WebSocketContext.jsx";
|
|
import { DraftMessage, DraftPhase, DraftPhaseLabel, DraftPhasesOrdered } from './constants.js';
|
|
import { fetchDraftDetails, isEmptyObject, handleDraftStatusMessages, handleUserIdentifyMessages } from "./utils.js"
|
|
|
|
export const DraftDebug = ({ draftSessionId }) => {
|
|
const [draftState, setDraftState] = useState({})
|
|
const socket = useWebSocket();
|
|
if (!socket) return;
|
|
|
|
useEffect(() => {
|
|
if (!socket) return;
|
|
const openHandler = (event) => {
|
|
console.log('Websocket Opened')
|
|
}
|
|
const closeHandler = (event) => {
|
|
console.log('Websocket Closed')
|
|
}
|
|
socket.addEventListener('open', openHandler);
|
|
socket.addEventListener('close', closeHandler);
|
|
return () => {
|
|
socket.removeEventListener('open', openHandler);
|
|
socket.removeEventListener('close', closeHandler);
|
|
}
|
|
}, [socket])
|
|
|
|
useEffect(() => {
|
|
if (!socket) return;
|
|
|
|
const draftStatusMessageHandler = (event) => handleDraftStatusMessages(event, setDraftState)
|
|
|
|
socket.addEventListener('message', draftStatusMessageHandler);
|
|
|
|
|
|
return () => {
|
|
socket.removeEventListener('message', draftStatusMessageHandler)
|
|
};
|
|
}, [socket]);
|
|
const data = { 'message': 'test' }
|
|
return (<pre style={{margin: "1em"}}>
|
|
{JSON.stringify(draftState, null, 2)}
|
|
</pre>
|
|
)
|
|
|
|
}
|