consolidate & align collaboration socket eventing with server

src/appState.ts

@@ -34,8 +34,7 @@ export function getDefaultAppState(): AppState {
     openMenu: null,
     lastPointerDownWith: "mouse",
     selectedElementIds: {},
-    remotePointers: {},
+    collaborators: new Map(),
-    collaboratorCount: 0,
   };
 }
 
@@ -47,6 +46,8 @@ export function clearAppStateForLocalStorage(appState: AppState) {
     editingElement,
     selectionElement,
     isResizing,
+    collaborators,
+    isCollaborating,
     ...exportedState
   } = appState;
   return exportedState;

src/components/App.tsx

@@ -193,8 +193,7 @@ export class App extends React.Component<any, AppState> {
       this.setState(state => ({
         ...res.appState,
         isCollaborating: state.isCollaborating,
-        remotePointers: state.remotePointers,
+        collaborators: state.collaborators,
-        collaboratorCount: state.collaboratorCount,
       }));
     }
   };
@@ -234,8 +233,7 @@ export class App extends React.Component<any, AppState> {
   private destroySocketClient = () => {
     this.setState({
       isCollaborating: false,
-      remotePointers: {},
+      collaborators: new Map(),
-      collaboratorCount: 0,
     });
     if (this.socket) {
       this.socket.close();
@@ -321,11 +319,14 @@ export class App extends React.Component<any, AppState> {
               break;
             case "MOUSE_LOCATION":
               const { socketID, pointerCoords } = decryptedData.payload;
-              this.setState({
+              this.setState(state => {
-                remotePointers: {
+                if (state.collaborators.has(socketID)) {
-                  ...this.state.remotePointers,
+                  const user = state.collaborators.get(socketID)!;
-                  [socketID]: pointerCoords,
+                  user.pointer = pointerCoords;
-                },
+                  state.collaborators.set(socketID, user);
+                  return state;
+                }
+                return null;
               });
               break;
           }
@@ -337,13 +338,20 @@ export class App extends React.Component<any, AppState> {
         }
         this.socketInitialized = true;
       });
-      this.socket.on("room-user-count", (collaboratorCount: number) => {
+      this.socket.on("room-user-change", (clients: string[]) => {
-        this.setState({ collaboratorCount });
-      });
-      this.socket.on("client-disconnected", (socketID: number) => {
         this.setState(state => {
-          const { [socketID]: omit, ...remotePointers } = state.remotePointers;
+          const collaborators: typeof state.collaborators = new Map();
-          return { remotePointers };
+          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.socket.on("new-user", async (socketID: string) => {
@@ -2095,17 +2103,19 @@ export class App extends React.Component<any, AppState> {
     const pointerViewportCoords: {
       [id: string]: { x: number; y: number };
     } = {};
-    for (const clientId in this.state.remotePointers) {
+    this.state.collaborators.forEach((user, socketID) => {
-      const remotePointerCoord = this.state.remotePointers[clientId];
+      if (!user.pointer) {
-      pointerViewportCoords[clientId] = sceneCoordsToViewportCoords(
+        return;
+      }
+      pointerViewportCoords[socketID] = sceneCoordsToViewportCoords(
         {
-          sceneX: remotePointerCoord.x,
+          sceneX: user.pointer.x,
-          sceneY: remotePointerCoord.y,
+          sceneY: user.pointer.y,
         },
         this.state,
         this.canvas,
       );
-    }
+    });
     const { atLeastOneVisibleElement, scrollBars } = renderScene(
       elements,
       this.state,

src/components/LayerUI.tsx

@@ -116,7 +116,7 @@ export const LayerUI = React.memo(
                       {actionManager.renderAction("clearCanvas")}
                       <RoomDialog
                         isCollaborating={appState.isCollaborating}
-                        collaboratorCount={appState.collaboratorCount}
+                        collaboratorCount={appState.collaborators.size}
                         onRoomCreate={onRoomCreate}
                         onRoomDestroy={onRoomDestroy}
                       />

src/components/MobileMenu.tsx

@@ -47,7 +47,7 @@ export function MobileMenu({
               {actionManager.renderAction("clearCanvas")}
               <RoomDialog
                 isCollaborating={appState.isCollaborating}
-                collaboratorCount={appState.collaboratorCount}
+                collaboratorCount={appState.collaborators.size}
                 onRoomCreate={onRoomCreate}
                 onRoomDestroy={onRoomDestroy}
               />

src/components/RoomDialog.tsx

@@ -116,7 +116,7 @@ export function RoomDialog({
   onRoomDestroy,
 }: {
   isCollaborating: AppState["isCollaborating"];
-  collaboratorCount: AppState["collaboratorCount"];
+  collaboratorCount: number;
   onRoomCreate: () => void;
   onRoomDestroy: () => void;
 }) {

src/data/localStorage.ts

@@ -36,7 +36,7 @@ export function restoreFromLocalStorage() {
       appState = JSON.parse(savedState) as AppState;
       // If we're retrieving from local storage, we should not be collaborating
       appState.isCollaborating = false;
-      appState.collaboratorCount = 0;
+      appState.collaborators = new Map();
     } catch {
       // Do nothing because appState is already null
     }

src/types.ts

@@ -35,8 +35,7 @@ export type AppState = {
   openMenu: "canvas" | "shape" | null;
   lastPointerDownWith: PointerType;
   selectedElementIds: { [id: string]: boolean };
-  remotePointers: { [id: string]: { x: number; y: number } };
+  collaborators: Map<string, { pointer?: { x: number; y: number } }>;
-  collaboratorCount: number;
 };
 
 export type PointerCoords = Readonly<{