receiving first_connect message and rendering components on demand
This commit is contained in:
parent
a7d888f00a
commit
a20a06b3fe
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user