From baa09386cf195eaf17f9f716f879def849fc14d2 Mon Sep 17 00:00:00 2001 From: Jon Drews Date: Sat, 31 Jul 2021 02:01:31 -0400 Subject: [PATCH] First pass at conversion from vanilla JS to React --- web/App.js | 25 --------- web/index.html | 39 -------------- web/package.json | 7 +-- web/src/App.js | 36 ------------- web/src/{App.css => LogViewer.css} | 32 ++++++++++-- web/src/LogViewer.js | 84 ++++++++++++++++++++++++++++++ web/src/index.js | 5 +- 7 files changed, 119 insertions(+), 109 deletions(-) delete mode 100644 web/App.js delete mode 100644 web/index.html delete mode 100644 web/src/App.js rename web/src/{App.css => LogViewer.css} (57%) create mode 100644 web/src/LogViewer.js diff --git a/web/App.js b/web/App.js deleted file mode 100644 index eedc028..0000000 --- a/web/App.js +++ /dev/null @@ -1,25 +0,0 @@ -import React, { Component } from 'react'; -import { w3cwebsocket as W3CWebSocket } from "websocket"; - -const client = new W3CWebSocket('ws://127.0.0.1:8001'); - -class App extends Component { - componentWillMount() { - client.onopen = () => { - console.log('WebSocket Client Connected'); - }; - client.onmessage = (message) => { - console.log(message); - }; - } - - render() { - return ( -
- Practical Intro To WebSockets. -
- ); - } -} - -export default App; \ No newline at end of file diff --git a/web/index.html b/web/index.html deleted file mode 100644 index d341323..0000000 --- a/web/index.html +++ /dev/null @@ -1,39 +0,0 @@ - - - - - - WebSocket - - - -

- - - - - \ No newline at end of file diff --git a/web/package.json b/web/package.json index b66da30..dd7fffd 100644 --- a/web/package.json +++ b/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" }, diff --git a/web/src/App.js b/web/src/App.js deleted file mode 100644 index 82934cb..0000000 --- a/web/src/App.js +++ /dev/null @@ -1,36 +0,0 @@ -import logo from './logo.svg'; -import './App.css'; -import {LazyLog, ScrollFollow} from 'react-lazylog'; - -const url = 'ws://localhost:8081/ws'; -let socket = null; - -function App() { - return ( -
- ( - { - socket = sock - }, - onClose: (e, sock) => { - socket = null; - }, - // onError: (e, sock) => { - // console(e.toString()) - // }, - }} - /> - )} - /> -
- ); -} - -export default App; diff --git a/web/src/App.css b/web/src/LogViewer.css similarity index 57% rename from web/src/App.css rename to web/src/LogViewer.css index 91f7b22..b3c4686 100644 --- a/web/src/App.css +++ b/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; +} \ No newline at end of file diff --git a/web/src/LogViewer.js b/web/src/LogViewer.js new file mode 100644 index 0000000..9e3ec43 --- /dev/null +++ b/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 }) => ( +
+ {this.state.list[index]} +
+ ); + + render() { + return ( +
+ + {({width, height}) => ( + + )} + +
+ ); + } +} \ No newline at end of file diff --git a/web/src/index.js b/web/src/index.js index 414f551..f145a7b 100644 --- a/web/src/index.js +++ b/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( - + , document.getElementById('root') );