code cleanup

websrc/components/App.tsx

@@ -1,5 +1,5 @@
 import React, {Component} from "react";
-import { Col, Container, Nav, Navbar, Row } from "react-bootstrap";
+import {Col, Container, Navbar, Row} from "react-bootstrap";
 import HCard from "./HCard";
 import RPlot from "./RPlot";
 import {NewTickData, PositionState, socket} from "../";
@@ -13,11 +13,7 @@ type AppState = {
 }
 
 
-class App extends Component {
+class App extends Component<{}, AppState> {
-    constructor(props) {
-        super(props)
-    }
-
     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,8 +48,10 @@ 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 tick:" content={String(this.state.current_tick)}
-                                <HCard title="Current price:" content={String(this.state.current_price)} update={this.state.last_update}></HCard>
+                                       update={this.state.last_update}/>
+                                <HCard title="Current price:" content={String(this.state.current_price)}
+                                       update={this.state.last_update}/>
                             </Row>
                             <Row>
                                 <PositionTable/>

websrc/components/HCard.tsx

@@ -1,5 +1,4 @@
 import React, {Component} from 'react';
-import { FunctionComponent } from 'react';
 import {Card, Col, Row} from 'react-bootstrap';
 
 type CardProps = {
@@ -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>);
     }

websrc/components/RPlot.tsx

@@ -1,5 +1,4 @@
-import React from "react"
+import React, {Component} from "react"
-import { Component } from "react"
 import Plot from "react-plotly.js"
 
 import {NewTickData, socket} from '../';
@@ -26,10 +25,6 @@ type PlotState = {
 }
 
 class RPlot extends Component<{}, PlotState> {
-    constructor(props) {
-        super(props)
-    }
-
     state = {
         x: [],
         y: [],
@@ -37,6 +32,10 @@ class RPlot extends Component<{}, PlotState> {
         v_price_line: {x0: 0, x1: 0, y0: 0, y1: 0},
     }
 
+    constructor(props) {
+        super(props)
+    }
+
     componentDidMount() {
         socket.on("first_connect", (data: FirstConnectData) => {
             var last_tick = data.ticks[data.ticks.length - 1]

websrc/components/RToast.tsx

@@ -1,6 +1,5 @@
 import React, {Component} from 'react';
-import { FunctionComponent } from 'react';
+import {Toast} from 'react-bootstrap';
-import { Card, Col, Row, Toast } from 'react-bootstrap';
 import {socket} from "../";
 
 type ToastProps = {
@@ -16,15 +15,15 @@ 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})

websrc/components/Tables.tsx

@@ -1,18 +1,17 @@
-import React from "react"
+import React, {Component} from "react"
-import { 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: []
     }
 
+    constructor(props) {
+        super(props)
+    }
+
     componentDidMount() {
         socket.on('new_tick', (data: NewTickData) => {
             this.setState({