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>
2026-06-10 16:24:45 -07:00 · 2020-12-31 16:08:15 -06:00 · 2020-12-31 16:08:15 -06:00 · 0457e65751
commit 0457e65751
parent d5b36e8b8a
152 changed files with 19573 additions and 1071 deletions
--- a/webclient/src/AppShell/Logs/Logs.tsx
+++ b/webclient/src/AppShell/Logs/Logs.tsx
@ -0,0 +1,102 @@
+// eslint-disable-next-line
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import { withRouter } from "react-router-dom";
+import * as _ from "lodash";
+
+import { Dispatch, Selectors, ServerStateLogs } from "store/server"
+
+import { ModeratorService } from "AppShell/common/services";
+import AuthGuard from "AppShell/common/guards/AuthGuard";
+import ModGuard from "AppShell/common/guards/ModGuard";
+
+import LogResults from "./LogResults/LogResults";
+import SearchForm from "./SearchForm/SearchForm";
+
+import "./Logs.css";
+
+class Logs extends Component<LogsTypes> {
+  MAXIMUM_RESULTS = 1000;
+
+  constructor(props) {
+    super(props);
+
+    this.onSubmit = this.onSubmit.bind(this);
+  }
+
+  componentWillUnmount() {
+    Dispatch.clearLogs();
+  }
+
+  onSubmit(fields) {
+    const trimmedFields: any = this.trimFields(fields);
+    
+    const { userName, ipAddress, gameName, gameId, message, logLocation } = trimmedFields;
+
+    const required = _.filter({
+      userName, ipAddress, gameName, gameId, message
+    }, field => field);
+
+    if (logLocation) {
+      trimmedFields.logLocation = this.flattenLogLocations(logLocation);
+    }
+
+    trimmedFields.maximumResults = this.MAXIMUM_RESULTS;
+
+    if (_.size(required)) {
+      ModeratorService.viewLogHistory(trimmedFields);
+    } else {
+      // @TODO use yet-to-be-implemented banner/alert
+    }
+  }
+
+  private trimFields(fields) {
+    return _.reduce(fields, (obj, field, key) => {
+      if (typeof field === "string") {
+        const trimmed = _.trim(field);
+
+        if (!!trimmed) {
+          obj[key] = trimmed;
+        }
+      } else {
+        obj[key] = field;
+      }
+
+      return obj;
+    }, {});
+  }
+
+  private flattenLogLocations(logLocations) {
+    return _.reduce(logLocations, (arr, loc, key) => {
+      arr.push(key);
+      return arr;
+    }, [])
+  }
+
+  render() {
+    return (
+      <div className="moderator-logs overflow-scroll">
+        <AuthGuard />
+        <ModGuard />
+        
+        <div className="moderator-logs__form">
+          <SearchForm onSubmit={this.onSubmit} />
+        </div>
+
+        <div className="moderator-logs__results">
+          <LogResults logs={this.props.logs} />
+        </div>
+      </div>  
+    )
+  }
+}
+
+interface LogsTypes {
+  logs: ServerStateLogs
+}
+
+const mapStateToProps = state => ({
+  logs: Selectors.getLogs(state)
+});
+
+export default withRouter(connect(mapStateToProps)(Logs));