diff --git a/websrc/components/App.tsx b/websrc/components/App.tsx index e0a2e59..035ef56 100644 --- a/websrc/components/App.tsx +++ b/websrc/components/App.tsx @@ -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, - events: Array + events: Array } -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 */} Rustico - USD {String(this.state.current_price)} + - Rustico - BfxBot + Rustico - BfxBot + diff --git a/websrc/components/Events.tsx b/websrc/components/Events.tsx index 5faeef4..3547b19 100644 --- a/websrc/components/Events.tsx +++ b/websrc/components/Events.tsx @@ -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 }, { events: Array }> { +export class Events extends Component<{ events: Array }> { constructor(props) { super(props); } @@ -25,7 +18,7 @@ export class Events extends Component<{ events: Array }, { events: Ar } mapEvents() { - return this.state.events.map((event: EventData) => { + return this.state.events.map((event: EventProp) => { return ( {event.name} @ Tick {event.tick} diff --git a/websrc/components/RPlot.tsx b/websrc/components/RPlot.tsx index 84992ee..db480f8 100644 --- a/websrc/components/RPlot.tsx +++ b/websrc/components/RPlot.tsx @@ -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 = { diff --git a/websrc/components/Tables.tsx b/websrc/components/Tables.tsx index 3658c92..0d4573a 100644 --- a/websrc/components/Tables.tsx +++ b/websrc/components/Tables.tsx @@ -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 }> { +export class PositionTable extends Component<{ positions: Array }> { constructor(props) { super(props) } @@ -32,7 +33,7 @@ export class PositionTable extends Component<{ positions: Array } } tableData() { - return this.props.positions.map((position: PositionState) => { + return this.props.positions.map((position: PositionProp) => { let row_bg = ""; if (!position.state.toLowerCase().includes("break")) { diff --git a/websrc/index.tsx b/websrc/index.tsx index be432f8..ba7ba5c 100644 --- a/websrc/index.tsx +++ b/websrc/index.tsx @@ -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, - prices: Array, - positions: Array -} - -export type NewEventMessage = { - tick: number, - kind: string, -} - -export type NewTickMessage = { - tick: number, - price: number, - positions: Array -} - -export type PositionCloseMessage = { - message_name: string, - position_id: number, -} - socket.on("connect", function () { console.log("Connected!") }) diff --git a/websrc/types.ts b/websrc/types.ts new file mode 100644 index 0000000..31146c8 --- /dev/null +++ b/websrc/types.ts @@ -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, + prices: Array, + positions: Array +} + +export type NewEventMessage = { + tick: number, + kind: string, +} + +export type NewTickMessage = { + tick: number, + price: number, + positions: Array +} + +export type PositionCloseMessage = { + message_name: string, + position_id: number, +} +