core/websrc/components/App.tsx
Giulio De Pasquale 2cbb21f6cf code cleanup
2020-12-14 18:52:43 +00:00

84 lines
2.9 KiB
TypeScript
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import React, {Component} from "react";
import {Col, Container, Navbar, Row} from "react-bootstrap";
import HCard from "./HCard";
import RPlot from "./RPlot";
import {NewTickData, PositionState, socket} from "../";
import {PositionTable} from "./Tables";
type AppState = {
current_price: number,
current_tick: number,
last_update: Date,
positions: Array<PositionState>
}
class App extends Component<{}, AppState> {
state = {
current_price: 0,
current_tick: 0,
last_update: new Date(),
positions: []
}
constructor(props) {
super(props)
}
componentDidMount() {
socket.on("new_tick", (data: NewTickData) => {
this.setState({
current_price: data.price,
current_tick: data.tick,
last_update: new Date(),
positions: data.positions
})
})
}
render() {
return (
<div className="d-flex flex-fill flex-column">
<Navbar bg="light" expand="lg" className="border-bottom">
<Navbar.Brand href="#home">Rustico - BfxBot</Navbar.Brand>
</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">
<Row className="justify-content-center border-bottom py-2">
<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>
<PositionTable/>
</Row>
</Col>
{/* Graph column */}
<Col md={8} lg={8} className="flex-fill">
<div className="border-bottom mt-2">
<h2>Price graph:</h2>
</div>
<RPlot/>
</Col>
</Row>
{/* <Row className="flex-grow-1 border-top border-bottom">
<RPlot />
</Row> */}
</Container>
<footer className="footer fixed-bottom py-3 bg-light border-top">
<Container className="text-center">
<span className="text-muted">Made with by the Pepe</span>
</Container>
</footer>
</div>
)
}
}
export default App;