From a20a06b3fe1ace25a9dfdf325fa37e2c51ed4b04 Mon Sep 17 00:00:00 2001 From: Giulio De Pasquale Date: Wed, 16 Dec 2020 11:28:21 +0000 Subject: [PATCH] receiving first_connect message and rendering components on demand --- websrc/components/App.tsx | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/websrc/components/App.tsx b/websrc/components/App.tsx index 4cf61ac..141b694 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 {NewTickData, PositionState, socket} from "../"; +import {FirstConnectMessage, NewTickMessage, PositionState, socket} from "../"; import {PositionTable} from "./Tables"; import {EventData, Events} from "./Events"; @@ -29,7 +29,17 @@ class App extends Component<{}, AppState> { } componentDidMount() { - socket.on("new_tick", (data: NewTickData) => { + 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], + last_update: new Date(), + positions: data.positions + }) + }) + + socket.on("new_tick", (data: NewTickMessage) => { const event: EventData = {name: "New Tick", id: data.tick, tick: data.tick} this.setState({ @@ -60,10 +70,10 @@ class App extends Component<{}, AppState> { update={this.state.last_update}/> - + {this.state.positions ? : null} - + {this.state.events ? : null} @@ -71,7 +81,6 @@ class App extends Component<{}, AppState> {

Price graph:

-