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

View File

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