70 lines
1.9 KiB
JavaScript
70 lines
1.9 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});
|
|
|
|
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() {
|
|
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>
|
|
<div>
|
|
<h2> List of pairs : </h2>
|
|
</div>
|
|
{
|
|
this.state.renderPairsList &&
|
|
<PairsListComponent pairs = {this.state.pairs}/>
|
|
}
|
|
{
|
|
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;
|