forked from vagabond-systems/jpmc-task-2
-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.tsx
90 lines (81 loc) · 2.23 KB
/
App.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
import React, { Component } from 'react';
import DataStreamer, { ServerRespond } from './DataStreamer';
import Graph from './Graph';
import './App.css';
/**
* State declaration for <App />
*/
interface IState {
data: ServerRespond[],
showGraph: boolean,
}
/**
* The parent element of the react app.
* It renders title, button and Graph react element.
*/
class App extends Component<{}, IState> {
constructor(props: {}) {
super(props);
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: false,
};
}
/**
* Render Graph react component with state.data parse as property data
*/
renderGraph() {
if (this.state.showGraph){
return (<Graph data={this.state.data}/>)
}
}
/**
* Get new data from server and update the state with the new data
*/
getDataFromServer() {
let x = 0;
const interval = setInterval(()=>{
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: serverResponds,
showGraph : true,
});
});
x++;
if(x > 1000){
clearInterval(interval);
}
}, 100);
}
/**
* 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"
// 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>
<div className="Graph">
{this.renderGraph()}
</div>
</div>
</div>
)
}
}
export default App;