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 {Col, Container, Navbar, Row} from "react-bootstrap";
|
||||||
import HCard from "./HCard";
|
import HCard from "./HCard";
|
||||||
import RPlot from "./RPlot";
|
import RPlot from "./RPlot";
|
||||||
import {NewTickData, PositionState, socket} from "../";
|
import {FirstConnectMessage, NewTickMessage, PositionState, socket} from "../";
|
||||||
import {PositionTable} from "./Tables";
|
import {PositionTable} from "./Tables";
|
||||||
import {EventData, Events} from "./Events";
|
import {EventData, Events} from "./Events";
|
||||||
|
|
||||||
@ -29,7 +29,17 @@ class App extends Component<{}, AppState> {
|
|||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
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}
|
const event: EventData = {name: "New Tick", id: data.tick, tick: data.tick}
|
||||||
|
|
||||||
this.setState({
|
this.setState({
|
||||||
@ -60,10 +70,10 @@ class App extends Component<{}, AppState> {
|
|||||||
update={this.state.last_update}/>
|
update={this.state.last_update}/>
|
||||||
</Row>
|
</Row>
|
||||||
<Row className={"flex-fill"}>
|
<Row className={"flex-fill"}>
|
||||||
<PositionTable/>
|
{this.state.positions ? <PositionTable positions={this.state.positions}/> : null}
|
||||||
</Row>
|
</Row>
|
||||||
<Row className={"my-2"}>
|
<Row className={"my-2"}>
|
||||||
<Events events={this.state.events}/>
|
{this.state.events ? <Events events={this.state.events}/> : null}
|
||||||
</Row>
|
</Row>
|
||||||
</Col>
|
</Col>
|
||||||
|
|
||||||
@ -71,7 +81,6 @@ class App extends Component<{}, AppState> {
|
|||||||
<Col md={8} lg={8} className="flex-fill">
|
<Col md={8} lg={8} className="flex-fill">
|
||||||
<div className="border-bottom mt-2">
|
<div className="border-bottom mt-2">
|
||||||
<h2>Price graph:</h2>
|
<h2>Price graph:</h2>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<RPlot/>
|
<RPlot/>
|
||||||
</Col>
|
</Col>
|
||||||
|
Loading…
Reference in New Issue
Block a user