Begin moving socket listeners to Portal (#1504)

src/components/App.tsx

@@ -166,7 +166,7 @@ const gesture: Gesture = {
 class App extends React.Component<any, AppState> {
   canvas: HTMLCanvasElement | null = null;
   rc: RoughCanvas | null = null;
-  portal: Portal = new Portal();
+  portal: Portal = new Portal(this);
   lastBroadcastedOrReceivedSceneVersion: number = -1;
   removeSceneCallback: SceneStateCallbackRemover | null = null;
 
@@ -915,19 +915,7 @@ class App extends React.Component<any, AppState> {
         roomMatch[2],
       );
 
-      this.portal.socket!.on("init-room", () => {
+      // All socket listeners are moving to Portal
-        if (this.portal.socket) {
-          const username = restoreUsernameFromLocalStorage();
-
-          this.portal.socket.emit("join-room", this.portal.roomID);
-
-          if (username !== null) {
-            this.setState({
-              username,
-            });
-          }
-        }
-      });
       this.portal.socket!.on(
         "client-broadcast",
         async (encryptedData: ArrayBuffer, iv: Uint8Array) => {
@@ -999,9 +987,6 @@ class App extends React.Component<any, AppState> {
           };
         });
       });
-      this.portal.socket!.on("new-user", async (_socketID: string) => {
-        this.broadcastScene(SCENE.INIT);
-      });
 
       this.setState({
         isCollaborating: true,
@@ -1032,7 +1017,8 @@ class App extends React.Component<any, AppState> {
     }
   };
 
-  private broadcastScene = (sceneType: SCENE.INIT | SCENE.UPDATE) => {
+  // maybe should move to Portal
+  broadcastScene = (sceneType: SCENE.INIT | SCENE.UPDATE) => {
     const data: SocketUpdateDataSource[typeof sceneType] = {
       type: sceneType,
       payload: {
@@ -1059,6 +1045,16 @@ class App extends React.Component<any, AppState> {
     },
   );
 
+  restoreUserName() {
+    const username = restoreUsernameFromLocalStorage();
+
+    if (username !== null) {
+      this.setState({
+        username,
+      });
+    }
+  }
+
   // Input handling
 
   private onKeyDown = withBatchedUpdates((event: KeyboardEvent) => {

src/components/Portal.tsx

@@ -1,18 +1,36 @@
 import { encryptAESGEM } from "../data";
 
 import { SocketUpdateData } from "../types";
-import { BROADCAST } from "../constants";
+import { BROADCAST, SCENE } from "../constants";
+import App from "./App";
 
 class Portal {
+  app: App;
   socket: SocketIOClient.Socket | null = null;
   socketInitialized: boolean = false; // we don't want the socket to emit any updates until it is fully initialized
   roomID: string | null = null;
   roomKey: string | null = null;
 
+  constructor(app: App) {
+    this.app = app;
+  }
+
   open(socket: SocketIOClient.Socket, id: string, key: string) {
     this.socket = socket;
     this.roomID = id;
     this.roomKey = key;
+
+    // Initialize socket listeners (moving from App)
+    this.socket!.on("init-room", () => {
+      if (this.socket) {
+        this.socket.emit("join-room", this.roomID);
+
+        this.app.restoreUserName();
+      }
+    });
+    this.socket!.on("new-user", async (_socketID: string) => {
+      this.app.broadcastScene(SCENE.INIT);
+    });
   }
 
   close() {