rustico/core
2
0
Fork 0
Code Issues 9 Pull Requests Projects Releases Wiki Activity

receiving first_connect message and rendering components on demand

Browse Source
This commit is contained in:
Giulio De Pasquale 2020-12-16 11:28:21 +00:00
parent a7d888f00a
commit a20a06b3fe
1 changed files with 14 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
websrc/components/App.tsx
View File

@ -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>