First pass at conversion from vanilla JS to React

web/package.json

@@ -6,10 +6,11 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-lazylog": "^4.5.3",
+    "faker": "^5.5.3",
+    "react": "^16.3.2",
+    "react-dom": "^16.3.2",
     "react-scripts": "4.0.3",
+    "react-virtualized": "^9.22.3",
     "web-vitals": "^1.1.2",
     "websocket": "^1.0.34"
   },

web/src/App.css → web/src/LogViewer.css

@@ -1,7 +1,8 @@
-.App {
-  text-align: center;
+.LogViewer {
+  text-align: left;
   height: 100vh;
-    background-color: #3f3f40;
+  background-color: #020202;
+  color: #e7e7e7;
 }
 
 .App-logo {
@@ -38,3 +39,28 @@
     transform: rotate(360deg);
   }
 }
+
+.AutoSizerWrapper {
+  flex: 1 1 auto;
+}
+
+.List {
+  border: 1px solid #e0e0e0;
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0 25px;
+  background-color: #000000;
+  border-bottom: 1px solid #000000;
+}
+
+.checkboxLabel {
+  display: flex;
+  align-items: center;
+}
+.checkbox {
+  margin-right: 5px;
+}

web/src/LogViewer.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import './LogViewer.css';
+import { List, AutoSizer } from 'react-virtualized';
+import "react-virtualized/styles.css";
+import { w3cwebsocket as W3CWebSocket } from "websocket";
+
+const url = 'ws://localhost:8081/ws';
+const client = new W3CWebSocket(url);
+
+export default class LogViewer extends React.Component {
+    constructor (props) {
+        super(props)
+
+        this.state = {
+            list: [],
+            scrollToRow: 0
+        }
+    }
+
+    componentDidMount() {
+        client.onopen = () => {
+            console.log('WebSocket Client Connected');
+        };
+        client.onmessage = (message) => {
+            console.log(message);
+            this._updateFeed(message);
+        };
+    }
+
+    _updateFeed (message) {
+        const list = [ ...this.state.list ];
+
+        list.push(message.data);
+
+        const scrollToRow = list.length;
+
+        this.setState({
+            list: list,
+            scrollToRow: scrollToRow
+        });
+    }
+
+    rowRenderer = ({ index, isScrolling, key, style }) => (
+        <div
+            className="Row"
+            key={key}
+            style={{
+                ...style,
+                whiteSpace: "pre",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                width: "100%"
+            }}
+        >
+            {this.state.list[index]}
+        </div>
+    );
+
+    render() {
+        return (
+            <div className="LogViewer">
+                <AutoSizer disableWidth>
+                    {({width, height}) => (
+                        <List
+                            height={height}
+                            rowCount={this.state.list.length}
+                            rowHeight={23}
+                            scrollToRow={this.state.scrollToRow}
+                            rowRenderer={this.rowRenderer}
+                            width={1}
+                            containerStyle={{
+                                width: "100%",
+                                maxWidth: "100%"
+                            }}
+                            style={{
+                                width: "100%"
+                            }}
+                        />
+                    )}
+                </AutoSizer>
+            </div>
+        );
+    }
+}

web/src/index.js

@@ -1,12 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from './App';
+import LogViewer from './LogViewer';
 // import reportWebVitals from './reportWebVitals';
-
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <LogViewer />
   </React.StrictMode>,
   document.getElementById('root')
 );