Refactor websocket into separate services, clean up socket status communication (#4433)

* Refactor websocket into separate services, clean up socket status communication

* cleanup

* add EOF lines

* fix keepalive logged in check

* undo change

* fix keepalive connection check

* cleanup

* add typings

* secure connection

Co-authored-by: Jeremy Letto <jeremy.letto@datasite.com>

webclient/src/websocket/utils/NormalizeService.tsx

@@ -0,0 +1,46 @@
+import { Game, GametypeMap, Log, LogGroups, Message, Room } from 'types';
+
+export default class NormalizeService {
+  // Flatten room gameTypes into map object
+  static normalizeRoomInfo(roomInfo: Room): void {
+    roomInfo.gametypeMap = {};
+
+    const { gametypeList, gametypeMap, gameList } = roomInfo;
+
+    gametypeList.reduce((map, type) => {
+      map[type.gameTypeId] = type.description;
+      return map;
+    }, gametypeMap);
+
+    gameList.forEach((game) => NormalizeService.normalizeGameObject(game, gametypeMap));
+  }
+
+  // Flatten gameTypes[] into gameType field
+  // Default sortable values ("" || 0 || -1)
+  static normalizeGameObject(game: Game, gametypeMap: GametypeMap): void {
+    const { gameTypes, description } = game;
+    const hasType = gameTypes && gameTypes.length;
+    game.gameType = hasType ? gametypeMap[gameTypes[0]] : "";
+
+    game.description = description || "";
+  }
+  
+  // Flatten logs[] into object mapped by targetType (room, game, chat)
+  static normalizeLogs(logs: Log[]): LogGroups {
+    return logs.reduce((obj, log) => {
+      const { targetType } = log;
+      obj[targetType] = obj[targetType] || [];
+      obj[targetType].push(log);
+      return obj;
+    }, {} as LogGroups);
+  }
+
+  // messages sent by current user dont have their username prepended
+  static normalizeUserMessage(message: Message): void {
+    const { name } = message;
+
+    if (name) {
+      message.message = `${name}: ${message.message}`;
+    }
+  }
+}

webclient/src/websocket/utils/guid.util.tsx

@@ -1,8 +1,8 @@
-function s4() {
+function s4(): string {
   const s4 = Math.floor((1 + Math.random()) * 0x10000);
   return s4.toString(16).substring(1);
 }
 
-export function guid() {
+export function guid(): string {
   return s4() + s4() + "-" + s4() + "-" + s4() + "-" + s4() + "-" + s4() + s4() + s4();
 }

webclient/src/websocket/utils/sanitizeHtml.util.tsx

@@ -1,6 +1,6 @@
 import $ from "jquery";
 
-export function sanitizeHtml(msg) {
+export function sanitizeHtml(msg: string): string {
   const $div = $("<div>").html(msg);
   const whitelist = {
     tags: "br,a,img,center,b,font",
@@ -16,13 +16,13 @@ export function sanitizeHtml(msg) {
   return $div.html();
 }
 
-function enforceTagWhitelist($el, tags) {
+function enforceTagWhitelist($el: JQuery<HTMLElement>, tags: string): void {
   $el.find("*").not(tags).each(function() {
     $(this).replaceWith(this.innerHTML);
   });
 }
 
-function enforceAttrWhitelist($el, attrs) {
+function enforceAttrWhitelist($el: JQuery<HTMLElement>, attrs: string[]): void {
   $el.find("*").each(function() {
     var attributes = this.attributes;
     var i = attributes.length;
@@ -34,7 +34,7 @@ function enforceAttrWhitelist($el, attrs) {
   });
 }
 
-function enforceHrefWhitelist($el, hrefs) {
+function enforceHrefWhitelist($el: JQuery<HTMLElement>, hrefs: string[]): void {
   $el.find("[href]").each(function() {
     const $_el = $(this);
     const  attributeValue = $_el.attr("href");