detecting new events. events UI not working yet. fixed positions and events components show on demand

This commit is contained in:
Giulio De Pasquale 2020-12-16 12:02:50 +00:00
parent 4114333632
commit f6a318257a
2 changed files with 29 additions and 10 deletions

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 {FirstConnectMessage, NewTickMessage, PositionState, socket} from "../"; import {FirstConnectMessage, NewEventMessage, NewTickMessage, PositionState, socket} from "../";
import {PositionTable} from "./Tables"; import {PositionTable} from "./Tables";
import {EventData, Events} from "./Events"; import {EventData, Events} from "./Events";
@ -14,6 +14,7 @@ type AppState = {
events: Array<EventData> events: Array<EventData>
} }
let event_id = 0;
class App extends Component<{}, AppState> { class App extends Component<{}, AppState> {
state = { state = {
@ -29,8 +30,9 @@ class App extends Component<{}, AppState> {
} }
componentDidMount() { componentDidMount() {
console.log(this)
socket.on("first_connect", (data: FirstConnectMessage) => { socket.on("first_connect", (data: FirstConnectMessage) => {
console.log(data.positions)
this.setState({ this.setState({
current_price: data.prices[data.prices.length - 1], current_price: data.prices[data.prices.length - 1],
current_tick: data.ticks[data.ticks.length - 1], current_tick: data.ticks[data.ticks.length - 1],
@ -40,16 +42,30 @@ class App extends Component<{}, AppState> {
}) })
socket.on("new_tick", (data: NewTickMessage) => { socket.on("new_tick", (data: NewTickMessage) => {
const event: EventData = {name: "New Tick", id: data.tick, tick: data.tick}
this.setState({ this.setState({
current_price: data.price, current_price: data.price,
current_tick: data.tick, current_tick: data.tick,
last_update: new Date(), last_update: new Date(),
positions: data.positions, positions: data.positions,
events: [...this.state.events, event]
}) })
}) })
socket.on("new_event", (data: NewEventMessage) => {
// ignore new tick
if (!data.kind.toLowerCase().includes("new_tick")) {
const new_event: EventData = {
id: event_id,
name: data.kind,
tick: data.tick
}
event_id += 1
this.setState({
events: [...this.state.events, new_event]
})
}
})
} }
render() { render() {
@ -70,10 +86,11 @@ 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"}>
{this.state.positions ? <PositionTable positions={this.state.positions}/> : null} {this.state.positions.length > 0 ?
<PositionTable positions={this.state.positions}/> : null}
</Row> </Row>
<Row className={"my-2"}> <Row className={"my-2"}>
{this.state.events ? <Events events={this.state.events}/> : null} {this.state.events.length > 0 ? <Events events={this.state.events}/> : null}
</Row> </Row>
</Col> </Col>
@ -82,9 +99,6 @@ class App extends Component<{}, AppState> {
<RPlot/> <RPlot/>
</Col> </Col>
</Row> </Row>
{/* <Row className="flex-grow-1 border-top border-bottom">
<RPlot />
</Row> */}
</Container> </Container>
<footer className="footer py-3 bg-light border-top"> <footer className="footer py-3 bg-light border-top">
<Container className="text-center"> <Container className="text-center">

View File

@ -23,6 +23,11 @@ export type FirstConnectMessage = {
positions: Array<PositionState> positions: Array<PositionState>
} }
export type NewEventMessage = {
tick: number,
kind: string,
}
export type NewTickMessage = { export type NewTickMessage = {
tick: number, tick: number,
price: number, price: number,