One more socket listener moved to Portal (#1507)

* room-user-change listener moved to Portal

* Eliminate useless checks

* Update src/components/App.tsx

Co-Authored-By: Lipis <lipiridis@gmail.com>

Co-authored-by: Lipis <lipiridis@gmail.com>

src/components/App.tsx

@@ -971,22 +971,6 @@ class App extends React.Component<any, AppState> {
         }
         initialize();
       });
-      this.portal.socket!.on("room-user-change", (clients: string[]) => {
-        this.setState((state) => {
-          const collaborators: typeof state.collaborators = new Map();
-          for (const socketID of clients) {
-            if (state.collaborators.has(socketID)) {
-              collaborators.set(socketID, state.collaborators.get(socketID)!);
-            } else {
-              collaborators.set(socketID, {});
-            }
-          }
-          return {
-            ...state,
-            collaborators,
-          };
-        });
-      });
 
       this.setState({
         isCollaborating: true,
@@ -995,6 +979,24 @@ class App extends React.Component<any, AppState> {
     }
   };
 
+  // Portal-only
+  setCollaborators(sockets: string[]) {
+    this.setState((state) => {
+      const collaborators: typeof state.collaborators = new Map();
+      for (const socketID of sockets) {
+        if (state.collaborators.has(socketID)) {
+          collaborators.set(socketID, state.collaborators.get(socketID)!);
+        } else {
+          collaborators.set(socketID, {});
+        }
+      }
+      return {
+        ...state,
+        collaborators,
+      };
+    });
+  }
+
   private broadcastMouseLocation = (payload: {
     pointerCoords: SocketUpdateDataSource["MOUSE_LOCATION"]["payload"]["pointerCoords"];
     button: SocketUpdateDataSource["MOUSE_LOCATION"]["payload"]["button"];

src/components/Portal.tsx

@@ -21,16 +21,19 @@ class Portal {
     this.roomKey = key;
 
     // Initialize socket listeners (moving from App)
-    this.socket!.on("init-room", () => {
+    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.socket.on("new-user", async (_socketID: string) => {
       this.app.broadcastScene(SCENE.INIT);
     });
+    this.socket.on("room-user-change", (clients: string[]) => {
+      this.app.setCollaborators(clients);
+    });
   }
 
   close() {