From 2cbb21f6cfe9494c18958c8f78f1d8d5dac9366a Mon Sep 17 00:00:00 2001
From: Giulio De Pasquale <depasquale@giugl.io>
Date: Mon, 14 Dec 2020 18:52:43 +0000
Subject: [PATCH] code cleanup

---
 websrc/components/App.tsx    | 30 +++++------
 websrc/components/HCard.tsx  | 10 ++--
 websrc/components/RPlot.tsx  | 21 ++++----
 websrc/components/RToast.tsx | 21 ++++----
 websrc/components/Tables.tsx | 97 ++++++++++++++++++------------------
 websrc/index.tsx             |  2 +-
 6 files changed, 90 insertions(+), 91 deletions(-)

diff --git a/websrc/components/App.tsx b/websrc/components/App.tsx
index c0456bc..bcf069a 100644
--- a/websrc/components/App.tsx
+++ b/websrc/components/App.tsx
@@ -1,9 +1,9 @@
-import React, { Component } from "react";
-import { Col, Container, Nav, Navbar, Row } from "react-bootstrap";
+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";
+import {NewTickData, PositionState, socket} from "../";
+import {PositionTable} from "./Tables";
 
 type AppState = {
     current_price: number,
@@ -13,11 +13,7 @@ type AppState = {
 }
 
 
-class App extends Component {
-    constructor(props) {
-        super(props)
-    }
-
+class App extends Component<{}, AppState> {
     state = {
         current_price: 0,
         current_tick: 0,
@@ -25,6 +21,10 @@ class App extends Component {
         positions: []
     }
 
+    constructor(props) {
+        super(props)
+    }
+
     componentDidMount() {
         socket.on("new_tick", (data: NewTickData) => {
             this.setState({
@@ -48,11 +48,13 @@ class App extends Component {
                         {/* 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>
-                                <HCard title="Current price:" content={String(this.state.current_price)} update={this.state.last_update}></HCard>
+                                <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 />
+                                <PositionTable/>
                             </Row>
                         </Col>
 
@@ -62,13 +64,13 @@ class App extends Component {
                                 <h2>Price graph:</h2>
 
                             </div>
-                            <RPlot />
+                            <RPlot/>
                         </Col>
                     </Row>
                     {/* <Row className="flex-grow-1 border-top border-bottom">
                         <RPlot />
                     </Row> */}
-                </Container >
+                </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>
diff --git a/websrc/components/HCard.tsx b/websrc/components/HCard.tsx
index 7ef0a3a..a77bafb 100644
--- a/websrc/components/HCard.tsx
+++ b/websrc/components/HCard.tsx
@@ -1,6 +1,5 @@
-import React, { Component } from 'react';
-import { FunctionComponent } from 'react';
-import { Card, Col, Row } from 'react-bootstrap';
+import React, {Component} from 'react';
+import {Card, Col, Row} from 'react-bootstrap';
 
 type CardProps = {
     title: string,
@@ -16,7 +15,7 @@ class HCard extends Component<CardProps> {
 
     render() {
         return (
-            <Card bg="light" style={{ minWidth: "15rem" }} className="mx-auto">
+            <Card bg="light" style={{minWidth: "15rem"}} className="mx-auto">
                 <Row className="no-gutters">
                     <Col md={7} className="border-right my-auto">
                         <h3 className="text-center">{this.props.title}</h3>
@@ -31,7 +30,8 @@ class HCard extends Component<CardProps> {
                     </Col>
                 </Row>
                 <Card.Text className="border-top text-center">
-                    <small className="text-muted my-auto mx-2">Last updated {this.props.update.toLocaleTimeString('en-GB')}</small>
+                    <small className="text-muted my-auto mx-2">Last
+                        updated {this.props.update.toLocaleTimeString('en-GB')}</small>
                 </Card.Text>
             </Card>);
     }
diff --git a/websrc/components/RPlot.tsx b/websrc/components/RPlot.tsx
index f40cbef..c694e3b 100644
--- a/websrc/components/RPlot.tsx
+++ b/websrc/components/RPlot.tsx
@@ -1,8 +1,7 @@
-import React from "react"
-import { Component } from "react"
+import React, {Component} from "react"
 import Plot from "react-plotly.js"
 
-import { NewTickData, socket } from '../';
+import {NewTickData, socket} from '../';
 
 
 type FirstConnectData = {
@@ -26,15 +25,15 @@ type PlotState = {
 }
 
 class RPlot extends Component<{}, PlotState> {
-    constructor(props) {
-        super(props)
-    }
-
     state = {
         x: [],
         y: [],
-        h_price_line: { x0: 0, x1: 0, y0: 0, y1: 0 },
-        v_price_line: { x0: 0, x1: 0, y0: 0, y1: 0 },
+        h_price_line: {x0: 0, x1: 0, y0: 0, y1: 0},
+        v_price_line: {x0: 0, x1: 0, y0: 0, y1: 0},
+    }
+
+    constructor(props) {
+        super(props)
     }
 
     componentDidMount() {
@@ -96,7 +95,7 @@ class RPlot extends Component<{}, PlotState> {
                         y: this.state.y,
                         type: 'scatter',
                         mode: 'lines+markers',
-                        "marker.colorbar": { tickformat: "r" }
+                        "marker.colorbar": {tickformat: "r"}
                     },
                 ]}
                 layout={{
@@ -150,7 +149,7 @@ class RPlot extends Component<{}, PlotState> {
                     displayModeBar: false,
                     responsive: true,
                 }}
-                style={{ width: '100%', height: '90%' }}
+                style={{width: '100%', height: '90%'}}
             />
         )
     }
diff --git a/websrc/components/RToast.tsx b/websrc/components/RToast.tsx
index 342efe7..a4036c7 100644
--- a/websrc/components/RToast.tsx
+++ b/websrc/components/RToast.tsx
@@ -1,7 +1,6 @@
-import React, { Component } from 'react';
-import { FunctionComponent } from 'react';
-import { Card, Col, Row, Toast } from 'react-bootstrap';
-import { socket } from "../";
+import React, {Component} from 'react';
+import {Toast} from 'react-bootstrap';
+import {socket} from "../";
 
 type ToastProps = {
     title: string,
@@ -16,23 +15,23 @@ type ToastState = {
 
 
 export class RToast extends Component<ToastProps, ToastState> {
-    constructor(props: ToastProps) {
-        super(props)
-    }
-
     state = {
         lastUpdated: new Date(),
         show: false
     }
 
+    constructor(props: ToastProps) {
+        super(props)
+    }
+
     componentDidMount() {
         socket.on("connect", () => {
-            this.setState({ show: true })
+            this.setState({show: true})
         })
     }
 
     tick() {
-        this.setState({ lastUpdated: new Date() })
+        this.setState({lastUpdated: new Date()})
     }
 
     render() {
@@ -42,7 +41,7 @@ export class RToast extends Component<ToastProps, ToastState> {
                     <strong className="mr-auto">{this.props.title}</strong>
                     <small>{this.state.lastUpdated.toLocaleTimeString('en-GB')}</small>
                 </Toast.Header>
-                { this.props.content ? <Toast.Body> {this.props.content}</Toast.Body> : null}
+                {this.props.content ? <Toast.Body> {this.props.content}</Toast.Body> : null}
             </Toast>
         )
     }
diff --git a/websrc/components/Tables.tsx b/websrc/components/Tables.tsx
index 34e4010..330cc86 100644
--- a/websrc/components/Tables.tsx
+++ b/websrc/components/Tables.tsx
@@ -1,57 +1,56 @@
-import React from "react"
-import { Component } from "react"
-import { Container, Table } from "react-bootstrap"
-import { NewTickData, PositionState, socket } from '../';
+import React, {Component} from "react"
+import {Container, Table} from "react-bootstrap"
+import {NewTickData, PositionState, socket} from '../';
 
 
 export class PositionTable extends Component<{}, { positions: Array<PositionState> }> {
-   constructor(props) {
-      super(props)
-   }
+    state = {
+        positions: []
+    }
 
-   state = {
-      positions: []
-   }
+    constructor(props) {
+        super(props)
+    }
 
-   componentDidMount() {
-      socket.on('new_tick', (data: NewTickData) => {
-         this.setState({
-            positions: data.positions
-         })
-      })
-   }
+    componentDidMount() {
+        socket.on('new_tick', (data: NewTickData) => {
+            this.setState({
+                positions: data.positions
+            })
+        })
+    }
 
-   tableData() {
-      return this.state.positions.map((position: PositionState, idx) => {
-         return (<tr key={position.id}>
-            <th>{position.id}</th>
-            <th>{position.symbol}</th>
-            <th>{position.profit_loss.toFixed(2)}</th>
-            <th>{position.profit_loss_percentage.toFixed(2)} %</th>
-         </tr>)
-      })
-   }
+    tableData() {
+        return this.state.positions.map((position: PositionState, idx) => {
+            return (<tr key={position.id}>
+                <th>{position.id}</th>
+                <th>{position.symbol}</th>
+                <th>{position.profit_loss.toFixed(2)}</th>
+                <th>{position.profit_loss_percentage.toFixed(2)} %</th>
+            </tr>)
+        })
+    }
 
-   render() {
-      return (
-         <Container className="d-flex flex-column mt-2">
-            <div className="border-bottom">
-               <h2>Open positions</h2>
-            </div>
-            <Table id="positions" size="sm" hover striped bordered className="mt-2 text-center">
-               <thead>
-                  <tr>
-                     <th>ID</th>
-                     <th>Symbol</th>
-                     <th>P/L</th>
-                     <th>P/L %</th>
-                  </tr>
-               </thead>
-               <tbody>
-                  {this.tableData()}
-               </tbody>
-            </Table>
-         </Container>
-      )
-   }
+    render() {
+        return (
+            <Container className="d-flex flex-column mt-2">
+                <div className="border-bottom">
+                    <h2>Open positions</h2>
+                </div>
+                <Table id="positions" size="sm" hover striped bordered className="mt-2 text-center">
+                    <thead>
+                    <tr>
+                        <th>ID</th>
+                        <th>Symbol</th>
+                        <th>P/L</th>
+                        <th>P/L %</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    {this.tableData()}
+                    </tbody>
+                </Table>
+            </Container>
+        )
+    }
 }
\ No newline at end of file
diff --git a/websrc/index.tsx b/websrc/index.tsx
index 1ada629..20114d3 100644
--- a/websrc/index.tsx
+++ b/websrc/index.tsx
@@ -23,4 +23,4 @@ socket.on("connect", function () {
     console.log("Connected!")
 })
 
-ReactDOM.render(<App />, document.getElementById("root"));
+ReactDOM.render(<App/>, document.getElementById("root"));