core/websrc/components/App.tsx

128 lines
4.6 KiB
TypeScript
Raw Normal View History

2020-12-14 18:52:43 +00:00
import React, {Component} from "react";
import {Col, Container, Navbar, Row} from "react-bootstrap";
import HCard from "./HCard";
import RPlot from "./RPlot";
2020-12-14 18:52:43 +00:00
import {PositionTable} from "./Tables";
import {EventProp, Events} from "./Events";
import {Helmet} from "react-helmet";
import {CurrencyDropdown} from "./Currency";
2020-12-16 18:46:29 +00:00
import {CurrencyPair, FirstConnectMessage, NewEventMessage, NewTickMessage, PositionProp} from "../types";
import {socket} from "../index";
2020-12-16 18:46:29 +00:00
import {symbolToPair} from "../utils";
type AppState = {
current_price: number,
current_tick: number,
last_update: Date,
2020-12-16 18:46:29 +00:00
positions: Array<PositionProp>,
events: Array<EventProp>,
active_pair: CurrencyPair,
available_pairs: Array<CurrencyPair>
}
2020-12-12 20:18:25 +00:00
2020-12-14 18:52:43 +00:00
class App extends Component<{}, AppState> {
event_id = 0;
state = {
current_price: 0,
current_tick: 0,
last_update: new Date(),
positions: [],
2020-12-16 18:46:29 +00:00
events: [],
active_pair: symbolToPair("tBTCUSD"),
available_pairs: []
}
2020-12-14 18:52:43 +00:00
constructor(props) {
super(props)
}
componentDidMount() {
console.log(this)
socket.on("first_connect", (data: FirstConnectMessage) => {
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) => {
this.setState({
current_price: data.price,
current_tick: data.tick,
last_update: new Date(),
positions: data.positions,
})
})
socket.on("new_event", (data: NewEventMessage) => {
// ignore new tick
if (!data.kind.toLowerCase().includes("new_tick")) {
const new_event: EventProp = {
id: this.event_id,
name: data.kind,
tick: data.tick
}
this.event_id += 1
this.setState({
events: [...this.state.events, new_event]
})
}
})
}
2020-12-12 20:18:25 +00:00
render() {
return (
<div className="d-flex flex-fill flex-column">
<Helmet>
{/* TODO: fix currency */}
2020-12-17 09:31:09 +00:00
<title> Rustico
- {String(this.state.active_pair.base) + "/" + String(this.state.active_pair.quote)} {String(this.state.current_price)} </title>
</Helmet>
<Navbar bg="light" expand="lg" className="border-bottom">
<Navbar.Brand href="#" className={"mr-auto"}>Rustico - BfxBot</Navbar.Brand>
2020-12-16 18:46:29 +00:00
<CurrencyDropdown active_pair={this.state.active_pair} pairs={this.state.available_pairs}/>
</Navbar>
<Container fluid className="mt-2 border flex-fill d-flex">
<Row className="flex-fill">
{/* Toolbar column */}
<Col md={4} lg={4} className="border-right d-flex flex-column">
<Row className="justify-content-center border-bottom py-2">
2020-12-14 18:52:43 +00:00
<HCard title="Current tick:" content={String(this.state.current_tick)}
update={this.state.last_update}/>
<HCard title="Current price:" content={String(this.state.current_price)}
update={this.state.last_update}/>
</Row>
<Row className={"flex-fill"}>
{this.state.positions.length > 0 ?
<PositionTable positions={this.state.positions}/> : null}
</Row>
<Row className={"my-2"}>
{this.state.events.length > 0 ? <Events events={this.state.events}/> : null}
</Row>
</Col>
{/* Graph column */}
<Col md={8} lg={8} className="flex-fill">
2020-12-14 18:52:43 +00:00
<RPlot/>
</Col>
</Row>
2020-12-14 18:52:43 +00:00
</Container>
<footer className="footer py-3 bg-light border-top">
<Container className="text-center">
<span className="text-muted">Made with by the Pepe</span>
</Container>
</footer>
</div>
2020-12-12 20:18:25 +00:00
)
}
}
export default App;