izmjena algoritma

web/src/App.js

@@ -18,10 +18,10 @@ class App extends Component {
   getPairsEventHandler = (event) =>{
     let url = `http://${BASE_URL}:3005/getPairs`;
     
-    this.setState({waitingPairs:true});
+    this.setState({waitingPairs:true, renderFinish:false, waitingSave:true});
     
     fetch(url, {}).then(function(response) { return response.json(); }).then(function(data) {
-      this.setState({pairs : data, renderPairsList:true, waitingPairs:false});
+      this.setState({pairs : data.pairs, left:data.left, renderPairsList:true, waitingPairs:false, waitingSave:false});
     }.bind(this));
 
 
@@ -46,13 +46,26 @@ class App extends Component {
         <div className = "horizontalDiv">
           <button disabled={this.state.waitingPairs} onClick = {this.getPairsEventHandler}>Get pairs</button>
         </div>
-        <div>
-          <h2> List of pairs : </h2>
-        </div>
+        {
+          this.state.renderPairsList &&
+          <div>
+            <h2> List of pairs : </h2>
+          </div>
+        }
         {
           this.state.renderPairsList &&
             <PairsListComponent pairs = {this.state.pairs}/>
         }
+        {
+          this.state.renderPairsList && this.state.left &&
+          <div>
+            <h2> Without pair : </h2>
+            {
+              this.state.left.map((name, index) =>
+              (<div key={name}>{index+1}. {name}</div>))
+            }
+          </div>
+        }
         {
           this.state.renderPairsList &&
             <button disabled={this.state.waitingSave} onClick = {this.savePairsEventHandler}> Save pairs </button>

web/src/PairComponent.js

@@ -3,14 +3,14 @@ import React, { Component } from 'react';
 export default class PairComponent extends Component{
   constructor(props) {
     super(props);
-    this.state = {pairName: this.props.pair};
+    this.state = {pairName: this.props.pair, index: this.props.index};
   }
 
   render(){
     return (
       <div>
         <div className = "horizontalDiv">
-          <div>{this.state.pairName.name1} - {this.state.pairName.name2}</div>
+          <div>{this.state.index+1}. {this.state.pairName.name1} - {this.state.pairName.name2}</div>
         </div>
       </div>
     )

web/src/PairsListComponent.js

@@ -7,7 +7,7 @@ export default class PairsListComponent extends Component{
       <div id = "outerDiv">
         {
           this.props.pairs.map((pair, index) =>
-            (<PairComponent key = {index} index = {index} pair = {pair}/>))
+            (<PairComponent key = {pair.name1+pair.name2} index = {index} pair = {pair}/>))
         }
       </div>
     )