diff --git a/websrc/components/App.tsx b/websrc/components/App.tsx index 65f0b25..6cea163 100644 --- a/websrc/components/App.tsx +++ b/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 } +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}/> - {this.state.positions ? : null} + {this.state.positions.length > 0 ? + : null} - {this.state.events ? : null} + {this.state.events.length > 0 ? : null} @@ -82,9 +99,6 @@ class App extends Component<{}, AppState> { - {/* - - */}