added types.ts. renamed various type names. added fake currency switch to be implemented

This commit is contained in:
Giulio De Pasquale 2020-12-16 18:29:39 +00:00
parent 1bc46e421c
commit 3933545a77
6 changed files with 56 additions and 56 deletions

View File

@ -2,22 +2,24 @@ import React, {Component} from "react";
import {Col, Container, Navbar, Row} from "react-bootstrap";
import HCard from "./HCard";
import RPlot from "./RPlot";
import {FirstConnectMessage, NewEventMessage, NewTickMessage, PositionState, socket} from "../";
import {PositionTable} from "./Tables";
import {EventData, Events} from "./Events";
import {EventProp, Events} from "./Events";
import {Helmet} from "react-helmet";
import {CurrencyDropdown} from "./Currency";
import {FirstConnectMessage, NewEventMessage, NewTickMessage, PositionState} from "../types";
import {socket} from "../index";
type AppState = {
current_price: number,
current_tick: number,
last_update: Date,
positions: Array<PositionState>,
events: Array<EventData>
events: Array<EventProp>
}
let event_id = 0;
class App extends Component<{}, AppState> {
event_id = 0;
state = {
current_price: 0,
current_tick: 0,
@ -54,13 +56,13 @@ class App extends Component<{}, AppState> {
socket.on("new_event", (data: NewEventMessage) => {
// ignore new tick
if (!data.kind.toLowerCase().includes("new_tick")) {
const new_event: EventData = {
id: event_id,
const new_event: EventProp = {
id: this.event_id,
name: data.kind,
tick: data.tick
}
event_id += 1
this.event_id += 1
this.setState({
events: [...this.state.events, new_event]
@ -76,8 +78,10 @@ class App extends Component<{}, AppState> {
{/* TODO: fix currency */}
<title> Rustico - USD {String(this.state.current_price)} </title>
</Helmet>
<Navbar bg="light" expand="lg" className="border-bottom">
<Navbar.Brand href="#">Rustico - BfxBot</Navbar.Brand>
<Navbar.Brand href="#" className={"mr-auto"}>Rustico - BfxBot</Navbar.Brand>
<CurrencyDropdown active_pair={"BTC/USD"} pairs={["BTC/USD", "XMR/USD"]}/>
</Navbar>
<Container fluid className="mt-2 border flex-fill d-flex">

View File

@ -2,20 +2,13 @@ import React, {Component} from "react";
import {Container, ListGroup} from "react-bootstrap";
export type EventData = {
export type EventProp = {
id: number,
name: string,
tick: number
}
const testEvent: EventData = {
id: 1,
name: "Test",
tick: 1
}
export class Events extends Component<{ events: Array<EventData> }, { events: Array<EventData> }> {
export class Events extends Component<{ events: Array<EventProp> }> {
constructor(props) {
super(props);
}
@ -25,7 +18,7 @@ export class Events extends Component<{ events: Array<EventData> }, { events: Ar
}
mapEvents() {
return this.state.events.map((event: EventData) => {
return this.state.events.map((event: EventProp) => {
return (
<ListGroup.Item action key={event.id}>
{event.name} @ Tick {event.tick}

View File

@ -1,7 +1,8 @@
import React, {Component} from "react"
import Plot from "react-plotly.js"
import {NewTickMessage, socket} from '../';
import {socket} from '../';
import {NewTickMessage} from "../types";
type FirstConnectData = {

View File

@ -1,9 +1,10 @@
import React, {Component} from "react"
import {Badge, Button, Container, Table} from "react-bootstrap"
import {PositionCloseMessage, PositionState, socket} from '../';
import {socket} from '../';
import {PositionCloseMessage, PositionProp} from "../types";
export class PositionTable extends Component<{ positions: Array<PositionState> }> {
export class PositionTable extends Component<{ positions: Array<PositionProp> }> {
constructor(props) {
super(props)
}
@ -32,7 +33,7 @@ export class PositionTable extends Component<{ positions: Array<PositionState> }
}
tableData() {
return this.props.positions.map((position: PositionState) => {
return this.props.positions.map((position: PositionProp) => {
let row_bg = "";
if (!position.state.toLowerCase().includes("break")) {

View File

@ -6,39 +6,6 @@ import io from "socket.io-client";
export const socket = io();
export type PositionState = {
id: number,
state: string,
base_price: number,
amount: number,
symbol: string,
profit_loss: number,
profit_loss_percentage: number
}
export type FirstConnectMessage = {
ticks: Array<number>,
prices: Array<number>,
positions: Array<PositionState>
}
export type NewEventMessage = {
tick: number,
kind: string,
}
export type NewTickMessage = {
tick: number,
price: number,
positions: Array<PositionState>
}
export type PositionCloseMessage = {
message_name: string,
position_id: number,
}
socket.on("connect", function () {
console.log("Connected!")
})

34
websrc/types.ts Normal file
View File

@ -0,0 +1,34 @@
import {EventProp} from "./components/Events";
export type PositionProp = {
id: number,
state: string,
base_price: number,
amount: number,
symbol: string,
profit_loss: number,
profit_loss_percentage: number
}
export type FirstConnectMessage = {
ticks: Array<number>,
prices: Array<number>,
positions: Array<PositionProp>
}
export type NewEventMessage = {
tick: number,
kind: string,
}
export type NewTickMessage = {
tick: number,
price: number,
positions: Array<PositionProp>
}
export type PositionCloseMessage = {
message_name: string,
position_id: number,
}