From 227ff609097b3ea4be8d8c38c57ee7d530bcc626 Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Sun, 12 Apr 2020 16:24:52 +0530 Subject: [PATCH] refactor(app.tsx): move Portal to new file and some refactoring (#1398) --- src/components/App.tsx | 59 +++-------------------------- src/components/Portal.tsx | 54 ++++++++++++++++++++++++++ src/constants.ts | 5 +++ src/index.tsx | 2 +- src/tests/dragCreate.test.tsx | 2 +- src/tests/move.test.tsx | 2 +- src/tests/multiPointCreate.test.tsx | 2 +- src/tests/regressionTests.test.tsx | 2 +- src/tests/resize.test.tsx | 2 +- src/tests/selection.test.tsx | 2 +- src/tests/zindex.test.tsx | 2 +- src/types.ts | 5 +++ 12 files changed, 78 insertions(+), 61 deletions(-) create mode 100644 src/components/Portal.tsx diff --git a/src/components/App.tsx b/src/components/App.tsx index 0d3c9a7e..6829bed6 100644 --- a/src/components/App.tsx +++ b/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 { - 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 { +class App extends React.Component { canvas: HTMLCanvasElement | null = null; rc: RoughCanvas | null = null; portal: Portal = new Portal(); @@ -1060,7 +1014,7 @@ export class App extends React.Component { }, }; 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 { this.lastBroadcastedOrReceivedSceneVersion, getDrawingVersion(globalSceneState.getElementsIncludingDeleted()), ); - return this.portal._broadcastSocketData( - data as typeof data & { _brand: "socketUpdateData" }, - ); + return this.portal._broadcastSocketData(data as SocketUpdateData); }; private onSceneUpdated = () => { @@ -2664,4 +2616,5 @@ if ( }); } +export default App; // ----------------------------------------------------------------------------- diff --git a/src/components/Portal.tsx b/src/components/Portal.tsx new file mode 100644 index 00000000..d7d3279c --- /dev/null +++ b/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; diff --git a/src/constants.ts b/src/constants.ts index ec248c12..de5c02bd 100644 --- a/src/constants.ts +++ b/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", +}; diff --git a/src/index.tsx b/src/index.tsx index c743432d..9cbe023d 100644 --- a/src/index.tsx +++ b/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 } = { diff --git a/src/tests/dragCreate.test.tsx b/src/tests/dragCreate.test.tsx index 248a3416..3ee956e4 100644 --- a/src/tests/dragCreate.test.tsx +++ b/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"; diff --git a/src/tests/move.test.tsx b/src/tests/move.test.tsx index 586e8d8f..80aff13a 100644 --- a/src/tests/move.test.tsx +++ b/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"; diff --git a/src/tests/multiPointCreate.test.tsx b/src/tests/multiPointCreate.test.tsx index 8c3d08e9..b6beb9c4 100644 --- a/src/tests/multiPointCreate.test.tsx +++ b/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"; diff --git a/src/tests/regressionTests.test.tsx b/src/tests/regressionTests.test.tsx index 03718d42..f55a76f4 100644 --- a/src/tests/regressionTests.test.tsx +++ b/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"; diff --git a/src/tests/resize.test.tsx b/src/tests/resize.test.tsx index 100641f2..2baaf63a 100644 --- a/src/tests/resize.test.tsx +++ b/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"; diff --git a/src/tests/selection.test.tsx b/src/tests/selection.test.tsx index dddbe990..4a4a4851 100644 --- a/src/tests/selection.test.tsx +++ b/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"; diff --git a/src/tests/zindex.test.tsx b/src/tests/zindex.test.tsx index da793c5f..1457457a 100644 --- a/src/tests/zindex.test.tsx +++ b/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 { diff --git a/src/types.ts b/src/types.ts index 026b116c..968ea241 100644 --- a/src/types.ts +++ b/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; @@ -82,3 +83,7 @@ export declare class GestureEvent extends UIEvent { readonly rotation: number; readonly scale: number; } + +export type SocketUpdateData = SocketUpdateDataSource[keyof SocketUpdateDataSource] & { + _brand: "socketUpdateData"; +};