update for event emitter

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) => {
+    const onThemeChange = (theme: Theme) => {
-        setConnetionState(connectionState);
+        setTheme(theme)
+    }
+    const connectToServer = async () => {
         const userKey = await context.userKeyStore.getUserKey();
         setUserKey(userKey);
-        const rtmtws = context.rtmt as RTMTWS;
+        (context.rtmt as RTMTWS).initWebSocket(userKey);
-        if (rtmtws) {
-            rtmtws.initWebSocket(
-                userKey,
-                onConnectionDone,
-                onConnectionLost,
-                onConnectionError
-            );
-        } else {
-            console.error("context.rtmt is not RTMTWS");
-        }
     };
+
     React.useEffect(() => {
-        connectToServer("connecting");
+        context.rtmt.on("open", onConnectionDone);
-        context.themeManager.onThemeChange = (theme: Theme) => {
+        context.rtmt.on("close", onConnectionLost);
-            setTheme(theme);
+        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 (
         <>
             <BrowserRouter>