rep 2

src/App.tsx

@@ -8,11 +8,12 @@ import './App.css';
  */
 interface IState {
   data: ServerRespond[],
+  showGraph: boolean,
 }
 
 /**
  * The parent element of the react app.
- * It renders title, button and Graph react element.
+ * It renders title, button, and Graph react element.
  */
 class App extends Component<{}, IState> {
   constructor(props: {}) {
@@ -22,25 +23,33 @@ class App extends Component<{}, IState> {
       // data saves the server responds.
       // We use this state to parse data down to the child element (Graph) as element property
       data: [],
+      // showGraph controls whether to display the graph or not
+      showGraph: false,
     };
   }
 
   /**
    * Render Graph react component with state.data parse as property data
    */
   renderGraph() {
-    return (<Graph data={this.state.data}/>)
+    return this.state.showGraph ? <Graph data={this.state.data} /> : null;
   }
 
   /**
    * Get new data from server and update the state with the new data
    */
   getDataFromServer() {
-    DataStreamer.getData((serverResponds: ServerRespond[]) => {
-      // Update the state by creating a new array of data that consists of
-      // Previous data in the state and the new data from server
-      this.setState({ data: [...this.state.data, ...serverResponds] });
-    });
+    let x = 0;
+    const interval = setInterval(() => {
+      DataStreamer.getData((serverResponds: ServerRespond[]) => {
+        this.setState({ data: [...this.state.data, ...serverResponds], showGraph: true });
+      });
+
+      x++;
+      if (x > 1000) {
+        clearInterval(interval);
+      }
+    }, 100);
   }
 
   /**
@@ -54,11 +63,6 @@ class App extends Component<{}, IState> {
         </header>
         <div className="App-content">
           <button className="btn btn-primary Stream-button"
-            // when button is click, our react app tries to request
-            // new data from the server.
-            // As part of your task, update the getDataFromServer() function
-            // to keep requesting the data every 100ms until the app is closed
-            // or the server does not return anymore data.
             onClick={() => {this.getDataFromServer()}}>
             Start Streaming Data
           </button>
@@ -67,7 +71,7 @@ class App extends Component<{}, IState> {
           </div>
         </div>
       </div>
-    )
+    );
   }
 }
 

src/Graph.tsx

@@ -1,73 +1,79 @@
 import React, { Component } from 'react';
-import { Table } from '@finos/perspective';
-import { ServerRespond } from './DataStreamer';
-import './Graph.css';
+import DataStreamer, { ServerRespond } from './DataStreamer';
+import Graph from './Graph';
+import './App.css';
 
 /**
- * Props declaration for <Graph />
+ * State declaration for <App />
  */
-interface IProps {
+interface IState {
   data: ServerRespond[],
+  showGraph: boolean,
 }
 
 /**
- * Perspective library adds load to HTMLElement prototype.
- * This interface acts as a wrapper for Typescript compiler.
+ * The parent element of the react app.
+ * It renders title, button, and Graph react element.
  */
-interface PerspectiveViewerElement {
-  load: (table: Table) => void,
-}
+class App extends Component<{}, IState> {
+  constructor(props: {}) {
+    super(props);
 
-/**
- * React component that renders Perspective based on data
- * parsed from its parent through data property.
- */
-class Graph extends Component<IProps, {}> {
-  // Perspective table
-  table: Table | undefined;
-
-  render() {
-    return React.createElement('perspective-viewer');
+    this.state = {
+      // data saves the server responds.
+      // We use this state to parse data down to the child element (Graph) as element property
+      data: [],
+      // showGraph controls whether to display the graph or not
+      showGraph: false,
+    };
   }
 
-  componentDidMount() {
-    // Get element to attach the table from the DOM.
-    const elem: PerspectiveViewerElement = document.getElementsByTagName('perspective-viewer')[0] as unknown as PerspectiveViewerElement;
-
-    const schema = {
-      stock: 'string',
-      top_ask_price: 'float',
-      top_bid_price: 'float',
-      timestamp: 'date',
-    };
+  /**
+   * Render Graph react component with state.data parse as property data
+   */
+  renderGraph() {
+    return this.state.showGraph ? <Graph data={this.state.data} /> : null;
+  }
 
-    if (window.perspective && window.perspective.worker()) {
-      this.table = window.perspective.worker().table(schema);
-    }
-    if (this.table) {
-      // Load the `table` in the `<perspective-viewer>` DOM reference.
+  /**
+   * Get new data from server and update the state with the new data
+   */
+  getDataFromServer() {
+    let x = 0;
+    const interval = setInterval(() => {
+      DataStreamer.getData((serverResponds: ServerRespond[]) => {
+        this.setState({ data: [...this.state.data, ...serverResponds], showGraph: true });
+      });
 
-      // Add more Perspective configurations here.
-      elem.load(this.table);
-    }
+      x++;
+      if (x > 1000) {
+        clearInterval(interval);
+      }
+    }, 100);
   }
 
-  componentDidUpdate() {
-    // Everytime the data props is updated, insert the data into Perspective table
-    if (this.table) {
-      // As part of the task, you need to fix the way we update the data props to
-      // avoid inserting duplicated entries into Perspective table again.
-      this.table.update(this.props.data.map((el: any) => {
-        // Format the data from ServerRespond to the schema
-        return {
-          stock: el.stock,
-          top_ask_price: el.top_ask && el.top_ask.price || 0,
-          top_bid_price: el.top_bid && el.top_bid.price || 0,
-          timestamp: el.timestamp,
-        };
-      }));
-    }
+
+  /**
+   * Render the App react component
+   */
+  render() {
+    return (
+      <div className="App">
+        <header className="App-header">
+          Bank & Merge Co Task 2
+        </header>
+        <div className="App-content">
+          <button className="btn btn-primary Stream-button"
+            onClick={() => {this.getDataFromServer()}}>
+            Start Streaming Data
+          </button>
+          <div className="Graph">
+            {this.renderGraph()}
+          </div>
+        </div>
+      </div>
+    );
   }
 }
 
-export default Graph;
+export default App;