Webatrice P.O.C. (#3854)

* port webclient POC into react shell

* Abstract websocket messaging behind redux store

* refactor architecture

* add rooms store

* introduce application service layer and login form

* display room messages

* implement roomSay

* improve Room view styling

* display room games

* improve gameList update logic

* hide protected games

* improve game update logic

* move mapping to earlier lifecycle hook

* add autoscroll to bottom

* tabs to spaces, refresh guard

* implement server joins/leaves

* show users in room

* add material-ui to build

* refactor, add room joins/leaves to store and render

* begin using Material UI components

* fix spectatorsCount

* remove unused package

* improve Server and Room styling

* fix scroll context

* route on room join

* refactor room path

* add auth guard

* refactor authGuard export

* add missing files

* clear store on disconnect, add logout button to Account view

* fix disconnect handling

* Safari fixes

* organize current todos

* improve login page and server status tracking

* improve login page

* introduce sorting arch, refine reducers, begin viewLogHistory

* audit fix for handlebars

* implement moderator log view

* comply with code style rules

* remove original POC from codebase

* add missing semi

* minor improvements, begin registration functionality

* retry as ws when wss fails

additionally, dont mutate the default options when connecting

* retain user/pass in WebClient.options for login

* take protocol off of options, make it a connect param that defaults to wss

* cleanup server page styling

* match wss logic with desktop client

* add virtual scroll component, add context menu to UserDisplay

* revert VirtualTable on messages

* improve styling for Room view

* add routing to Player view

* increase tooltip delay

* begin implementing Account view

* disable app level contextMenu

* implement buddy/ignore list management

* fix gitignore

Co-authored-by: Jay Letto <jeremy.letto@merrillcorp.com>
Co-authored-by: skwerlman <skwerlman@users.noreply.github.com>
Co-authored-by: Jeremy Letto <jeremy.letto@datasite.com>

webclient/src/store/common/SortUtil.tsx

@@ -0,0 +1,147 @@
+import { SortBy, SortDirection, User } from "types";
+
+export class SortUtil {
+  static sortByField(arr:  any[], sortBy: SortBy): void {
+    if (arr.length) {
+      const field = SortUtil.resolveFieldChain(arr[0], sortBy.field);
+      const fieldType = typeof field;
+
+      if (fieldType === "string") {
+        SortUtil.sortByString(arr, sortBy);
+        return;
+      }
+
+      if (fieldType === "number") {
+        SortUtil.sortByNumber(arr, sortBy);
+        return;
+      }
+
+      throw new Error("SortField must resolve to either a string or number");
+    }
+  }
+
+  static sortByFields(arr: any[], sorts: SortBy[]) {
+    if (arr.length) {
+      arr.sort((a, b) => {
+        for (let i = 0; i < sorts.length; i++) {
+          const sortBy = sorts[i];
+          const field = SortUtil.resolveFieldChain(arr[0], sortBy.field);
+          
+          const fieldType = typeof field;
+
+          if (fieldType === "string") {
+            const result = SortUtil.stringComparator(a, b, sortBy);
+
+            if (result) {
+              return result;
+            }
+          }
+
+          if (fieldType === "number") {
+            const result = SortUtil.numberComparator(a, b, sortBy);
+
+            if (result) {
+              return result;
+            }
+          }
+
+          throw new Error("SortField must resolve to either a string or number");
+        }
+
+        return 0;
+      })
+    }
+  }
+
+  static sortUsersByField(users: User[], sortBy: SortBy) {
+    if (users.length) {
+      users.sort((a, b) => SortUtil.userComparator(a, b, sortBy))
+    }
+  }
+
+  static toggleSortBy(field: string, sortBy: SortBy) {
+    const sameField = field === sortBy.field;
+    const isASC = sortBy.order === SortDirection.ASC;
+
+    return {
+      field,
+      order: sameField && isASC ? SortDirection.DESC : SortDirection.ASC
+    }
+  }
+
+  private static sortByNumber(arr: any[], sortBy: SortBy): void {
+    arr.sort((a, b) => SortUtil.numberComparator(a, b, sortBy));
+  }
+
+  private static sortByString(arr: any[], sortBy: SortBy): void {
+    arr.sort((a, b) => SortUtil.stringComparator(a, b, sortBy));
+  }
+
+  private static userComparator(a, b, sortBy, sortByUserLevel = true) {
+    if (sortByUserLevel) {
+      const adminSortBy = {
+        field: "userLevel",
+        order: SortDirection.DESC
+      };
+
+      const adminSorted = SortUtil.numberComparator(a, b, adminSortBy);
+
+      if (adminSorted) {
+        return adminSorted;
+      }
+    }
+
+    const sorted = SortUtil.stringComparator(a, b, sortBy);
+
+    if (sorted) {
+      return sorted;
+    }
+
+    return 0;
+  }
+
+  private static numberComparator(a, b, { field, order }: SortBy) {
+    const aResolved = SortUtil.resolveFieldChain(a, field);
+    const bResolved = SortUtil.resolveFieldChain(b, field);
+
+    if (order === SortDirection.ASC) {
+      return aResolved - bResolved;
+    } else {
+      return bResolved - aResolved;
+    }
+  }
+
+  private static stringComparator(a, b, { field, order }: SortBy) {
+    const aResolved = SortUtil.resolveFieldChain(a, field);
+    const bResolved = SortUtil.resolveFieldChain(b, field);
+
+    // Force empty strings to sort to bottom
+    if (!aResolved && !bResolved) { return 0; }
+    if (!aResolved) { return 1; }
+    if (!bResolved) { return -1; }
+
+    if (order === SortDirection.ASC) {
+      return aResolved.localeCompare(bResolved);
+    } else {
+      return bResolved.localeCompare(aResolved);
+    }
+  }
+
+  private static resolveFieldChain(obj: object, field: string) {
+    const links = field.split(".");
+
+    if (links.length > 1) {
+      return links.reduce((obj, link) => {
+        const parsed = parseInt(link, 10);
+
+        if (parsed.toLocaleString() === "NaN") {
+          return obj[link];
+        } else {
+          return obj[parsed];
+        }
+      }, obj) || null;
+    } else {
+      return obj[field];
+    }
+  }
+}

webclient/src/store/common/index.ts

@@ -0,0 +1 @@
+export * from "./SortUtil";