Update App.tsx

src/App.tsx

@@ -8,20 +8,22 @@ import './App.css';
  */
 interface IState {
   data: ServerRespond[],
+  isStreaming: boolean, // Add this to track streaming status
 }
 
 /**
  * The parent element of the react app.
  * It renders title, button and Graph react element.
  */
 class App extends Component<{}, IState> {
+  private intervalId: NodeJS.Timeout | null = null; // Store the interval ID
+
   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: [],
+      isStreaming: false, // Initialize streaming status
     };
   }
 
@@ -39,10 +41,44 @@ class App extends Component<{}, IState> {
     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] });
+      this.setState(prevState => ({
+        data: [...prevState.data, ...serverResponds]
+      }));
     });
   }
 
+  /**
+   * Start streaming data
+   */
+  startStreaming() {
+    if (this.state.isStreaming) return; // Prevent starting multiple intervals
+
+    this.setState({ isStreaming: true });
+    this.intervalId = setInterval(() => {
+      this.getDataFromServer();
+    }, 100);
+  }
+
+  /**
+   * Stop streaming data
+   */
+  stopStreaming() {
+    if (!this.state.isStreaming) return;
+
+    this.setState({ isStreaming: false });
+    if (this.intervalId) {
+      clearInterval(this.intervalId);
+      this.intervalId = null;
+    }
+  }
+
+  componentWillUnmount() {
+    // Clean up the interval when the component is unmounted
+    if (this.intervalId) {
+      clearInterval(this.intervalId);
+    }
+  }
+
   /**
    * Render the App react component
    */
@@ -53,15 +89,18 @@ class App extends Component<{}, IState> {
           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()}}>
+          <button 
+            className="btn btn-primary Stream-button"
+            onClick={() => this.startStreaming()}
+          >
             Start Streaming Data
           </button>
+          <button 
+            className="btn btn-secondary Stream-button"
+            onClick={() => this.stopStreaming()}
+          >
+            Stop Streaming Data
+          </button>
           <div className="Graph">
             {this.renderGraph()}
           </div>