detecting new events. events UI not working yet. fixed positions and events components show on demand

websrc/components/App.tsx

@@ -2,7 +2,7 @@ import React, {Component} from "react";
 import {Col, Container, Navbar, Row} from "react-bootstrap";
 import HCard from "./HCard";
 import RPlot from "./RPlot";
-import {FirstConnectMessage, NewTickMessage, PositionState, socket} from "../";
+import {FirstConnectMessage, NewEventMessage, NewTickMessage, PositionState, socket} from "../";
 import {PositionTable} from "./Tables";
 import {EventData, Events} from "./Events";
 
@@ -14,6 +14,7 @@ type AppState = {
     events: Array<EventData>
 }
 
+let event_id = 0;
 
 class App extends Component<{}, AppState> {
     state = {
@@ -29,8 +30,9 @@ class App extends Component<{}, AppState> {
     }
 
     componentDidMount() {
+        console.log(this)
+
         socket.on("first_connect", (data: FirstConnectMessage) => {
-            console.log(data.positions)
             this.setState({
                 current_price: data.prices[data.prices.length - 1],
                 current_tick: data.ticks[data.ticks.length - 1],
@@ -40,16 +42,30 @@ class App extends Component<{}, AppState> {
         })
 
         socket.on("new_tick", (data: NewTickMessage) => {
-            const event: EventData = {name: "New Tick", id: data.tick, tick: data.tick}
-
             this.setState({
                 current_price: data.price,
                 current_tick: data.tick,
                 last_update: new Date(),
                 positions: data.positions,
-                events: [...this.state.events, event]
             })
         })
+
+        socket.on("new_event", (data: NewEventMessage) => {
+            // ignore new tick
+            if (!data.kind.toLowerCase().includes("new_tick")) {
+                const new_event: EventData = {
+                    id: event_id,
+                    name: data.kind,
+                    tick: data.tick
+                }
+
+                event_id += 1
+
+                this.setState({
+                    events: [...this.state.events, new_event]
+                })
+            }
+        })
     }
 
     render() {
@@ -70,10 +86,11 @@ class App extends Component<{}, AppState> {
                                        update={this.state.last_update}/>
                             </Row>
                             <Row className={"flex-fill"}>
-                                {this.state.positions ? <PositionTable positions={this.state.positions}/> : null}
+                                {this.state.positions.length > 0 ?
+                                    <PositionTable positions={this.state.positions}/> : null}
                             </Row>
                             <Row className={"my-2"}>
-                                {this.state.events ? <Events events={this.state.events}/> : null}
+                                {this.state.events.length > 0 ? <Events events={this.state.events}/> : null}
                             </Row>
                         </Col>
 
@@ -82,9 +99,6 @@ class App extends Component<{}, AppState> {
                             <RPlot/>
                         </Col>
                     </Row>
-                    {/* <Row className="flex-grow-1 border-top border-bottom">
-                        <RPlot />
-                    </Row> */}
                 </Container>
                 <footer className="footer py-3 bg-light border-top">
                     <Container className="text-center">

websrc/index.tsx

@@ -23,6 +23,11 @@ export type FirstConnectMessage = {
     positions: Array<PositionState>
 }
 
+export type NewEventMessage = {
+    tick: number,
+    kind: string,
+}
+
 export type NewTickMessage = {
     tick: number,
     price: number,