receiving first_connect message and rendering components on demand

This commit is contained in:
Giulio De Pasquale 2020-12-16 11:28:21 +00:00
parent a7d888f00a
commit a20a06b3fe

View File

@ -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}/>
</Row>
<Row className={"flex-fill"}>
<PositionTable/>
{this.state.positions ? <PositionTable positions={this.state.positions}/> : null}
</Row>
<Row className={"my-2"}>
<Events events={this.state.events}/>
{this.state.events ? <Events events={this.state.events}/> : null}
</Row>
</Col>
@ -71,7 +81,6 @@ class App extends Component<{}, AppState> {
<Col md={8} lg={8} className="flex-fill">
<div className="border-bottom mt-2">
<h2>Price graph:</h2>
</div>
<RPlot/>
</Col>