core/websrc/components/App.tsx

114 lines
3.9 KiB
TypeScript
Raw Normal View History

2020-12-14 18:52:43 +00:00
import React, {Component} from "react";
2020-12-18 14:02:53 +00:00
import {EventProp} from "./Events";
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";
2020-12-18 14:02:53 +00:00
import {Helmet} from "react-helmet";
2020-12-19 16:17:48 +00:00
import {Navbar, Sidebar} from "./Navbars";
import {Statusbar} from "./Statusbar";
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
2020-12-19 16:17:48 +00:00
this.setState((state) => ({
events: [...state.events, new_event]
}))
}
})
}
2020-12-12 20:18:25 +00:00
render() {
return (
2020-12-18 14:02:53 +00:00
<>
<Helmet>
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>
<div className="bg-gray-800">
2020-12-19 16:17:48 +00:00
<div className="h-screen max-w-screen flex mx-auto">
<Navbar/>
<main
2020-12-19 16:17:48 +00:00
className="my-1 py-2 px-10 flex-1 bg-gray-200 dark:bg-black rounded-l-lg*
transition duration-500 ease-in-out overflow-y-auto flex flex-col">
<div className="flex justify-center text-2xl my-4">
2020-12-19 16:17:48 +00:00
<Statusbar positions={this.state.positions} price={this.state.current_price}
tick={this.state.current_tick}/>
</div>
2020-12-19 16:17:48 +00:00
<div className="flex flex-col flex-grow my-8 shadow-md hover:shadow-lg">
<div
className="py-2 flex-grow bg-white dark:bg-gray-600 rounded-lg">
2020-12-19 16:17:48 +00:00
{/*<RPlot/>*/}
</div>
</div>
2020-12-19 16:17:48 +00:00
{/*<footer className="flex rounded-lg justify-center bg-gray-600 mt-4 border-t text-gray-300">*/}
{/* <span className="my-1 mx-1">Made with ❤️ by the Peperone in a scantinato</span>*/}
{/*</footer>*/}
</main>
2020-12-19 16:17:48 +00:00
<Sidebar tick={1} price={1} positions={[]}/>
</div>
2020-12-18 14:02:53 +00:00
</div>
</>
2020-12-12 20:18:25 +00:00
)
}
}
export default App;