refactor(app.tsx): move Portal to new file and some refactoring (#1398)

src/components/App.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import socketIOClient from "socket.io-client";
 import rough from "roughjs/bin/rough";
 import { RoughCanvas } from "roughjs/bin/canvas";
-import { FlooredNumber } from "../types";
+import { FlooredNumber, SocketUpdateData } from "../types";
 
 import {
   newElement,
@@ -41,7 +41,6 @@ import {
 } from "../scene";
 import {
   decryptAESGEM,
-  encryptAESGEM,
   saveToLocalStorage,
   loadScene,
   loadFromBlob,
@@ -49,6 +48,7 @@ import {
   SocketUpdateDataSource,
   exportCanvas,
 } from "../data";
+import Portal from "./Portal";
 
 import { renderScene } from "../renderer";
 import { AppState, GestureEvent, Gesture } from "../types";
@@ -160,53 +160,7 @@ const gesture: Gesture = {
   initialScale: null,
 };
 
-class Portal {
+class App extends React.Component<any, AppState> {
-  socket: SocketIOClient.Socket | null = null;
-  socketInitialized: boolean = false; // we don't want the socket to emit any updates until it is fully initalized
-  roomID: string | null = null;
-  roomKey: string | null = null;
-
-  open(socket: SocketIOClient.Socket, id: string, key: string) {
-    this.socket = socket;
-    this.roomID = id;
-    this.roomKey = key;
-  }
-
-  close() {
-    if (!this.socket) {
-      return;
-    }
-    this.socket.close();
-    this.socket = null;
-    this.roomID = null;
-    this.roomKey = null;
-  }
-
-  isOpen() {
-    return this.socketInitialized && this.socket && this.roomID && this.roomKey;
-  }
-
-  async _broadcastSocketData(
-    data: SocketUpdateDataSource[keyof SocketUpdateDataSource] & {
-      _brand: "socketUpdateData";
-    },
-    volatile: boolean = false,
-  ) {
-    if (this.isOpen()) {
-      const json = JSON.stringify(data);
-      const encoded = new TextEncoder().encode(json);
-      const encrypted = await encryptAESGEM(encoded, this.roomKey!);
-      this.socket!.emit(
-        volatile ? "server-volatile-broadcast" : "server-broadcast",
-        this.roomID,
-        encrypted.data,
-        encrypted.iv,
-      );
-    }
-  }
-}
-
-export class App extends React.Component<any, AppState> {
   canvas: HTMLCanvasElement | null = null;
   rc: RoughCanvas | null = null;
   portal: Portal = new Portal();
@@ -1060,7 +1014,7 @@ export class App extends React.Component<any, AppState> {
         },
       };
       return this.portal._broadcastSocketData(
-        data as typeof data & { _brand: "socketUpdateData" },
+        data as SocketUpdateData,
         true, // volatile
       );
     }
@@ -1079,9 +1033,7 @@ export class App extends React.Component<any, AppState> {
       this.lastBroadcastedOrReceivedSceneVersion,
       getDrawingVersion(globalSceneState.getElementsIncludingDeleted()),
     );
-    return this.portal._broadcastSocketData(
+    return this.portal._broadcastSocketData(data as SocketUpdateData);
-      data as typeof data & { _brand: "socketUpdateData" },
-    );
   };
 
   private onSceneUpdated = () => {
@@ -2664,4 +2616,5 @@ if (
   });
 }
 
+export default App;
 // -----------------------------------------------------------------------------

src/components/Portal.tsx

@@ -0,0 +1,54 @@
+import { encryptAESGEM } from "../data";
+
+import { SocketUpdateData } from "../types";
+import { BROADCAST } from "../constants";
+
+class Portal {
+  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;
+
+  open(socket: SocketIOClient.Socket, id: string, key: string) {
+    this.socket = socket;
+    this.roomID = id;
+    this.roomKey = key;
+  }
+
+  close() {
+    if (!this.socket) {
+      return;
+    }
+    this.socket.close();
+    this.socket = null;
+    this.roomID = null;
+    this.roomKey = null;
+  }
+
+  isOpen() {
+    return !!(
+      this.socketInitialized &&
+      this.socket &&
+      this.roomID &&
+      this.roomKey
+    );
+  }
+
+  async _broadcastSocketData(
+    data: SocketUpdateData,
+    volatile: boolean = false,
+  ) {
+    if (this.isOpen()) {
+      const json = JSON.stringify(data);
+      const encoded = new TextEncoder().encode(json);
+      const encrypted = await encryptAESGEM(encoded, this.roomKey!);
+      this.socket!.emit(
+        volatile ? BROADCAST.SERVER_VOLATILE : BROADCAST.SERVER,
+        this.roomID,
+        encrypted.data,
+        encrypted.iv,
+      );
+    }
+  }
+}
+export default Portal;

src/constants.ts

@@ -48,3 +48,8 @@ export const ENV = {
   TEST: "test",
   DEVELOPMENT: "development",
 };
+
+export const BROADCAST = {
+  SERVER_VOLATILE: "server-volatile-broadcast",
+  SERVER: "server-broadcast",
+};

src/index.tsx

@@ -4,7 +4,7 @@ import * as Sentry from "@sentry/browser";
 import * as SentryIntegrations from "@sentry/integrations";
 import { TopErrorBoundary } from "./components/TopErrorBoundary";
 import { IsMobileProvider } from "./is-mobile";
-import { App } from "./components/App";
+import App from "./components/App";
 import "./styles.scss";
 
 const SentryEnvHostnameMap: { [key: string]: string } = {

src/tests/dragCreate.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import { App } from "../components/App";
+import App from "../components/App";
 import * as Renderer from "../renderer/renderScene";
 import { KEYS } from "../keys";
 import { render, fireEvent } from "./test-utils";

src/tests/move.test.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import { render, fireEvent } from "./test-utils";
-import { App } from "../components/App";
+import App from "../components/App";
 import * as Renderer from "../renderer/renderScene";
 import { reseed } from "../random";
 

src/tests/multiPointCreate.test.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import { render, fireEvent } from "./test-utils";
-import { App } from "../components/App";
+import App from "../components/App";
 import * as Renderer from "../renderer/renderScene";
 import { KEYS } from "../keys";
 import { ExcalidrawLinearElement } from "../element/types";

src/tests/regressionTests.test.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import ReactDOM from "react-dom";
 import * as Renderer from "../renderer/renderScene";
 import { render, fireEvent } from "./test-utils";
-import { App } from "../components/App";
+import App from "../components/App";
 import { ToolName } from "./queries/toolQueries";
 import { KEYS, Key } from "../keys";
 import { setDateTimeForTests } from "../utils";

src/tests/resize.test.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import { render, fireEvent } from "./test-utils";
-import { App } from "../components/App";
+import App from "../components/App";
 import * as Renderer from "../renderer/renderScene";
 import { reseed } from "../random";
 

src/tests/selection.test.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import { render, fireEvent } from "./test-utils";
-import { App } from "../components/App";
+import App from "../components/App";
 import * as Renderer from "../renderer/renderScene";
 import { KEYS } from "../keys";
 import { reseed } from "../random";

src/tests/zindex.test.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import { render } from "./test-utils";
-import { App } from "../components/App";
+import App from "../components/App";
 import { reseed } from "../random";
 import { newElement } from "../element";
 import {

src/types.ts

@@ -8,6 +8,7 @@ import {
 } from "./element/types";
 import { SHAPES } from "./shapes";
 import { Point as RoughPoint } from "roughjs/bin/geometry";
+import { SocketUpdateDataSource } from "./data";
 
 export type FlooredNumber = number & { _brand: "FlooredNumber" };
 export type Point = Readonly<RoughPoint>;
@@ -82,3 +83,7 @@ export declare class GestureEvent extends UIEvent {
   readonly rotation: number;
   readonly scale: number;
 }
+
+export type SocketUpdateData = SocketUpdateDataSource[keyof SocketUpdateDataSource] & {
+  _brand: "socketUpdateData";
+};