Funkcionalna radna verzija

web/src/App.js

@@ -3,23 +3,37 @@ import './App.css';
 import PairsListComponent from './PairsListComponent.js';
 
 
+const BASE_URL = "localhost";
 
 class App extends Component {
   constructor(props){
     super(props);
 
-    this.state = {renderPairsList: false, pairs: []};
+    this.state = {renderPairsList: false, pairs: [], waitingPairs:false, waitingSave:false, renderFinish:false};
 
     this.getPairsEventHandler = this.getPairsEventHandler.bind(this);
+    this.savePairsEventHandler = this.savePairsEventHandler.bind(this);
   }
 
-  getPairsEventHandler(event){
-    console.log("Get Pairs");
-    this.setState({pairs: ['Bilal Rahima','A1 A2','B1 B2'],renderPairsList:true});
+  getPairsEventHandler = (event) =>{
+    let url = `http://${BASE_URL}:3005/getPairs`;
+    
+    this.setState({waitingPairs:true});
+    
+    fetch(url, {}).then(function(response) { return response.json(); }).then(function(data) {
+      this.setState({pairs : data, renderPairsList:true, waitingPairs:false});
+    }.bind(this));
+
+
   }
 
   savePairsEventHandler(event){
+    let url = `http://${BASE_URL}:3005/savePairs`;
     
+    this.setState({waitingSave:true});
+    fetch(url, {}).then(function(response) { return response.json(); }).then(function(data) {
+      this.setState({waitingSave:false, renderFinish:data.result});
+    }.bind(this));
   }
 
   render() {
@@ -30,7 +44,7 @@ class App extends Component {
         </div>
 
         <div className = "horizontalDiv">
-          <button onClick = {this.getPairsEventHandler}>Get pairs</button>
+          <button disabled={this.state.waitingPairs} onClick = {this.getPairsEventHandler}>Get pairs</button>
         </div>
         <div>
           <h2> List of pairs : </h2>
@@ -41,7 +55,15 @@ class App extends Component {
         }
         {
           this.state.renderPairsList &&
-            <button onClick = {this.savePairsEventHandler}> Save pairs </button>
+            <button disabled={this.state.waitingSave} onClick = {this.savePairsEventHandler}> Save pairs </button>
+        }
+        {
+          this.state.renderFinish &&
+          <h2> Pairs saved </h2>
+        }
+        {
+          !this.state.renderFinish &&
+          <h2> Pairs could not be saved ! </h2>
         }
       </div>
     );