Added logs from socket

arthurfiorette · Mar 25, 2021 · 8788cb7 · 8788cb7
1 parent 04e77ce
commit 8788cb7
Show file tree

Hide file tree

Showing 7 changed files with 225 additions and 13 deletions.
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -25,7 +25,8 @@
     "dotenv": "^8.2.0",
     "express": "^4.17.1",
     "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "react-dom": "^17.0.1",
+    "socket.io-client": "^4.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.13.10",
@@ -39,6 +40,7 @@
     "@types/mini-css-extract-plugin": "^1.2.2",
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.2",
+    "@types/socket.io-client": "^1.4.36",
     "@types/webpack": "^4.41.26",
     "@types/webpack-dev-server": "^3.11.2",
     "babel-loader": "^8.2.2",

diff --git a/web/public/index.html b/web/public/index.html
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Steam Trader</title>
     <link
+
       href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
       rel="stylesheet"
       integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
@@ -18,6 +19,7 @@
     ></script>
     <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
     <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
+    <script src="https://cdn.socket.io/3.1.3/socket.io.min.js" integrity="sha384-cPwlPLvBTa3sKAgddT6krw0cJat7egBga3DJepJyrLl4Q9/5WLra3rrnMcyTyOnh" crossorigin="anonymous"></script>
   </head>
   <body>
     <div id="app"></div>

diff --git a/web/src/app/main.tsx b/web/src/app/main.tsx
@@ -3,29 +3,32 @@ import './main.css';
 
 import InfoBox from '../components/infoBox';
 import { Row, Container } from '../components/bootstrap';
+import Logs from '../components/logs';
 
 export default function Main() {
   return (
     <main id="main" className="bg-light">
       <Container>
         <Row>
-          <ColSm title="Logs" />
+          <ColSm title="Logs">
+            <Logs />
+          </ColSm>
           <ColSm title="Accounts" />
         </Row>
         <Row>
           <div className="col-12">
-            <InfoBox title="Trades" />
+            <InfoBox title="Trades"></InfoBox>
           </div>
         </Row>
       </Container>
     </main>
   );
 }
 
-function ColSm({ title }: any) {
+function ColSm({ title, children }: any) {
   return (
-    <div className="col-sm-12 col-md-6">
-      <InfoBox title={title} />
+    <div className="col-sm-12 col-lg-6">
+      <InfoBox title={title}>{children}</InfoBox>
     </div>
   );
 }
diff --git a/web/src/components/Logs.tsx b/web/src/components/Logs.tsx
@@ -1,5 +1,57 @@
-import React from 'react';
+import React, { Component, useState, createRef } from 'react';
+import io from 'socket.io-client';
+import './logs.css';
 
-export default function () {
-  return <div>Logs</div>;
+interface LogsState {
+  logs: JSX.Element[];
 }
+
+export default class Logs extends Component<any, LogsState> {
+  logger: React.RefObject<HTMLDivElement> = createRef();
+  socket = io('ws://localhost:1228');
+
+  constructor(props: any) {
+    super(props);
+    this.state = { logs: [] };
+    this.openSocket();
+  }
+
+  private openSocket() {
+    this.socket.on('log', (msg: any) => {
+      this.setState({ logs: [...this.state.logs, createLog(msg)] });
+    });
+  }
+
+  componentDidUpdate() {
+    const logger = this.logger.current;
+    logger && (logger.scrollTop = logger.scrollHeight);
+  }
+
+  render() {
+    return (
+      <div ref={this.logger} className="logger overflow-y-scroll">
+        {this.state.logs}
+      </div>
+    );
+  }
+}
+
+function createLog({message, level, timestamp}: any) {
+  return <div className={`log ${getColor(level)} border-bottom border-2`}>
+    <span className="timestamp">{new Date(timestamp).toLocaleTimeString()}</span>
+    {message}
+    </div>;
+}
+
+function getColor(level: string) {
+  switch(level) {
+    case 'warn':
+      return 'border-warning';
+    case 'info':
+      return 'border-info';
+    case 'debug':
+      return 'border-secondary';
+    default:
+      return ''
+  }
+}
diff --git a/web/src/components/bootstrap.tsx b/web/src/components/bootstrap.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 
 export function Container({ children }: any) {
-  return <div className="container">{children}</div>;
+  return <div className="container-fluid h-100">{children}</div>;
 }
 
 export function Row({ children }: any) {
-  return <div className="row my-4">{children}</div>;
+  return <div className="row mb-4">{children}</div>;
 }
 
 export function Nav({ children }: any) {

diff --git a/web/src/components/logs.css b/web/src/components/logs.css
@@ -0,0 +1,15 @@
+div.logger {
+  max-height: 50vh;
+  overflow-y: scroll;
+  overflow-wrap: break-word;
+}
+
+div.log {
+  line-height: 25px;
+  min-height: 25px;
+}
+
+div.log .timestamp {
+  color: #666;
+  padding-right: 20px;
+}