core/websrc/components/App.tsx

import React, {Component} from "react";
import {EventProp} from "./Events";
import {
    Balance,
    CurrencyPair,
    EventName,
    FirstConnectMessage,
    NewEventMessage,
    NewTickMessage,
    PositionProp
} from "../types";
import {socket} from "../index";
import {symbolToPair} from "../utils";
import {Helmet} from "react-helmet";
import {Navbar, Sidebar} from "./Navbars";
import {Statusbar} from "./Statusbar";
import {PositionsTable} from "./Tables";
import RPlot from "./RPlot";

type AppState = {
    current_price: number,
    current_tick: number,
    last_update: Date,
    positions: Array<PositionProp>,
    events: Array<EventProp>,
    active_pair: CurrencyPair,
    available_pairs: Array<CurrencyPair>,
    balances: Array<Balance>
}

class App extends Component<{}, AppState> {
    event_id = 0;

    state = {
        current_price: 0,
        current_tick: 0,
        last_update: new Date(),
        positions: [],
        events: [],
        balances: [],
        active_pair: symbolToPair("tBTCUSD"),
        available_pairs: []
    }

    constructor(props) {
        super(props)
    }

    componentDidMount() {
        socket.on(EventName.FirstConnect, (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,
                balances: data.balances
            })
        })

        socket.on(EventName.NewTick, (data: NewTickMessage) => {
            this.setState({
                current_price: data.price,
                current_tick: data.tick,
                last_update: new Date(),
                positions: data.positions,
                balances: data.balances
            })
        })

        socket.on(EventName.NewEvent, (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((state) => ({
                    events: [...state.events, new_event]
                }))
            }
        })
    }

    render() {
        return (
            <>
                <Helmet>
                    <title> Rustico
                        - {String(this.state.active_pair.base) + "/" + String(this.state.active_pair.quote)} {String(this.state.current_price.toLocaleString())} </title>
                </Helmet>
                <div className="bg-gray-800">
                    <div className="h-screen max-w-screen flex mx-auto">
                        <Navbar/>

                        <main
                            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">
                                <Statusbar balances={this.state.balances} positions={this.state.positions}
                                           price={this.state.current_price}
                                           tick={this.state.current_tick}/>
                            </div>

                            <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 overflow-hidden">
                                    <RPlot/>
                                </div>
                            </div>

                            {this.state.positions.length > 0 ?
                                <PositionsTable positions={this.state.positions}/> : null}

                            <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>

                        <Sidebar/>
                    </div>
                </div>
            </>
        )
    }
}

export default App;