diff --git a/dashboard/package-lock.json b/dashboard/package-lock.json index 8f1621add44e2acfd3bb073f3cc62541f48bdd5f..89cd0a4a5c5f108b286b134cfea6ebc29feebb47 100644 --- a/dashboard/package-lock.json +++ b/dashboard/package-lock.json @@ -11,6 +11,7 @@ "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.3.0", "@testing-library/user-event": "^13.5.0", + "chokidar": "^3.5.3", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", diff --git a/dashboard/package.json b/dashboard/package.json index 431ac25c0cf51f4492228f377874cef8d2cdcba3..09c691ef71e1f032c692c6cc85f5e80be5c2e48a 100644 --- a/dashboard/package.json +++ b/dashboard/package.json @@ -6,6 +6,7 @@ "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.3.0", "@testing-library/user-event": "^13.5.0", + "chokidar": "^3.5.3", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", diff --git a/dashboard/src/App.js b/dashboard/src/App.js index 37845757234ccb68531c10cf7a2ffc589c47e342..77e95b0f29a6c59d0b91d228b19792e8457635c7 100644 --- a/dashboard/src/App.js +++ b/dashboard/src/App.js @@ -1,25 +1,69 @@ import logo from './logo.svg'; import './App.css'; +import React from 'react'; +import './index.css'; -function App() { - return ( - <div className="App"> - <header className="App-header"> - <img src={logo} className="App-logo" alt="logo" /> - <p> - Edit <code>src/App.js</code> and save to reload. - </p> - <a - className="App-link" - href="https://reactjs.org" - target="_blank" - rel="noopener noreferrer" - > - Learn React - </a> - </header> - </div> - ); +class App extends React.Component { + constructor(props) { + super(props); + this.state = { + asts: ["t"], + contexts: {} + }; + } + + componentDidMount() { + const ws = new WebSocket("ws://localhost:7070/ast-events"); + + var self = this + + ws.onopen = (event) => { + ws.send("Hi"); + }; + + ws.onmessage = function (event) { + const json = JSON.parse(event.data); + try { + if ((json.event = "data")) { + var asts = self.state.asts.slice(); + asts.push(event.data); + const contexts = {}; + self.setState({ + asts: asts, + contexts: contexts + }); + } + } catch (err) { + console.log(err); + } + ws.send("Got Something, thx"); + }; + } + + render() { + + const astlist = this.state.asts.map(v => { + return ( + <li key={v}> + entry + </li> + ) + }) + + return ( + <div className="App"> + <header className="App-header"> + <img src={logo} className="App-logo" alt="logo" /> + <p> + Edit <code>src/App.js</code> and save to reload. + </p> + <div className="ast-history"> + <ol>{astlist}</ol> + </div> + </header> + </div> + ); + } } export default App;