diff --git a/src/MancalaApp.tsx b/src/MancalaApp.tsx index 79fdc6a..450acf0 100644 --- a/src/MancalaApp.tsx +++ b/src/MancalaApp.tsx @@ -29,35 +29,32 @@ const MancalaApp: FunctionComponent = () => { setConnetionState("connected"); }; const onConnectionLost = () => { - connectToServer("reconnecting"); + setConnetionState("reconnecting"); + connectToServer(); }; const onConnectionError = (event: Event) => { setConnetionState("error"); + connectToServer(); }; - const connectToServer = async (connectionState: ConnectionState) => { - setConnetionState(connectionState); + const onThemeChange = (theme: Theme) => { + setTheme(theme) + } + const connectToServer = async () => { const userKey = await context.userKeyStore.getUserKey(); setUserKey(userKey); - const rtmtws = context.rtmt as RTMTWS; - if (rtmtws) { - rtmtws.initWebSocket( - userKey, - onConnectionDone, - onConnectionLost, - onConnectionError - ); - } else { - console.error("context.rtmt is not RTMTWS"); - } + (context.rtmt as RTMTWS).initWebSocket(userKey); }; + React.useEffect(() => { - connectToServer("connecting"); - context.themeManager.onThemeChange = (theme: Theme) => { - setTheme(theme); - } + context.rtmt.on("open", onConnectionDone); + context.rtmt.on("close", onConnectionLost); + context.rtmt.on("error", onConnectionError); + context.themeManager.on("themechange", onThemeChange); + setConnetionState("connecting"); + connectToServer(); return () => { - // todo: dispose rtmt.dispose - //context.rtmt.dispose(); + context.rtmt.dispose(); + context.themeManager.on("themechange", onThemeChange); }; }, []); @@ -77,7 +74,7 @@ const MancalaApp: FunctionComponent = () => { context.themeManager.theme.textColor, context.themeManager.theme.textLightColor ); - if(!userKey) return <>; + if (!userKey) return <>; return ( <>