83 lines
2.3 KiB
JavaScript
83 lines
2.3 KiB
JavaScript
import React, { Component } from 'react';
|
|
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: [], waitingPairs:false, waitingSave:false, renderFinish:false};
|
|
|
|
this.getPairsEventHandler = this.getPairsEventHandler.bind(this);
|
|
this.savePairsEventHandler = this.savePairsEventHandler.bind(this);
|
|
}
|
|
|
|
getPairsEventHandler = (event) =>{
|
|
let url = `http://${BASE_URL}:3005/getPairs`;
|
|
|
|
this.setState({waitingPairs:true, renderFinish:false, waitingSave:true});
|
|
|
|
fetch(url, {}).then(function(response) { return response.json(); }).then(function(data) {
|
|
this.setState({pairs : data.pairs, left:data.left, renderPairsList:true, waitingPairs:false, waitingSave: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() {
|
|
return (
|
|
<div className = "App">
|
|
<div>
|
|
<h2>Meetup app</h2>
|
|
</div>
|
|
|
|
<div className = "horizontalDiv">
|
|
<button disabled={this.state.waitingPairs} onClick = {this.getPairsEventHandler}>Get pairs</button>
|
|
</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>
|
|
}
|
|
{
|
|
this.state.renderFinish &&
|
|
<h2> Pairs saved </h2>
|
|
}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default App;
|