pathetic try to make dashboard work

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",

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",

dashboard/src/App.js

 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;