From a20a06b3fe1ace25a9dfdf325fa37e2c51ed4b04 Mon Sep 17 00:00:00 2001
From: Giulio De Pasquale <giulio@depasquale.eu>
Date: Wed, 16 Dec 2020 11:28:21 +0000
Subject: [PATCH] receiving first_connect message and rendering components on
 demand

---
 websrc/components/App.tsx | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/websrc/components/App.tsx b/websrc/components/App.tsx
index 4cf61ac..141b694 100644
--- a/websrc/components/App.tsx
+++ b/websrc/components/App.tsx
@@ -2,7 +2,7 @@ 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 {FirstConnectMessage, NewTickMessage, PositionState, socket} from "../";
 import {PositionTable} from "./Tables";
 import {EventData, Events} from "./Events";
 
@@ -29,7 +29,17 @@ class App extends Component<{}, AppState> {
     }
 
     componentDidMount() {
-        socket.on("new_tick", (data: NewTickData) => {
+        socket.on("first_connect", (data: FirstConnectMessage) => {
+            console.log(data.positions)
+            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
+            })
+        })
+
+        socket.on("new_tick", (data: NewTickMessage) => {
             const event: EventData = {name: "New Tick", id: data.tick, tick: data.tick}
 
             this.setState({
@@ -60,10 +70,10 @@ class App extends Component<{}, AppState> {
                                        update={this.state.last_update}/>
                             </Row>
                             <Row className={"flex-fill"}>
-                                <PositionTable/>
+                                {this.state.positions ? <PositionTable positions={this.state.positions}/> : null}
                             </Row>
                             <Row className={"my-2"}>
-                                <Events events={this.state.events}/>
+                                {this.state.events ? <Events events={this.state.events}/> : null}
                             </Row>
                         </Col>
 
@@ -71,7 +81,6 @@ class App extends Component<{}, AppState> {
                         <Col md={8} lg={8} className="flex-fill">
                             <div className="border-bottom mt-2">
                                 <h2>Price graph:</h2>
-
                             </div>
                             <RPlot/>
                         </Col>