Final update logic front

client/src/App.js

@@ -7,60 +7,66 @@ class App extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      currentResponses: ["zert","zert","zert","zert"],
-      currentQuestion: "zefzeezze",
-      currentResponsesContent: ["zert","zert","zert","zert"],
-      currentResponsesChild: [0,1,2,3],
+      currentResponses: [],
+      currentQuestion: "zfz",
       pastQuestion: null,
       pastResponse: null,
       score: 0,
-
-    }
+        start: true
+    };
+    this.fetchQuestion = this.fetchQuestion.bind(this);
+    this.fetchResponses = this.fetchResponses.bind(this);
   }
 
-  _handleClick(event) {
-
+  _handleClick(element) {
+    this.setState({
+        pastQuestion: element.question ,
+        pastResponse: element.text
+    });
+  this.fetchQuestion(element.child);
+  this.fetchResponses(element.child+"/responses");
   }
 
-  fetchQuestion(id) {
-    axios.get('http://localhost:8000/questions/'+ id)
+  fetchQuestion(url) {
+    axios.get(url)
     .then(((data) => {
         this.setState({
-          currentResponses : data.responses,
           currentQuestion: data.text
         })
     }))
+        .catch(error => console.log(error));
   }
 
-  fetchResponses() {
-    this.state.currentResponses.forEach((element) => {
-      axios.get(element)
-    .then(((t) => {
-        this.setState(prevState => ({
-          currentResponsesContent: [...prevState.currentResponsesContent, t.text],
-          currentResponsesChild: [...prevState.currentResponsesChild, t.child]
-        }))
-    }))
-    })
-    
-  }
+  fetchResponses(id) {
+      axios.get('http://localhost:8000/questions/'+ id +'responses')
+          .then(((data) => {
+              this.setState({
+                  currentResponses : data
+              })
+          }))
+    }
 
   componentWillMount(){
-    this.fetchQuestion(0);
-    this.fetchResponses();
+      if(this.state.start) {
+          this.fetchQuestion("http://localhost:8000/questions/0");
+          this.fetchResponses(0);
+          this.setState ({
+              start: null
+          })
+      }
   }
 
   render() {
-    let currentOptions = this.state.currentResponsesContent.map(((element, index) => (
-      <p key={index}><a class="btn btn-default btn-lg btn-block text-left" onClick={this._handleClick.bind(this, element)}>{element}</a></p>
+    let currentOptions = this.state.currentResponses.map(((element, index) => (
+      <p key={index}><a class="btn btn-default btn-lg btn-block text-left" onClick={this._handleClick.bind(this, element)}>{element.text}</a></p>
     )));
 
-    let header = () => (
+    let header = (
       <div class="jumbotron">
 					<h3>{this.state.pastQuestion}<br/>
 					<small>→ {this.state.pastResponse}</small></h3>
 				</div>
-    )
+    );
   
     return (
       <div className="App container">
@@ -74,10 +80,11 @@ class App extends Component {
           <h1 className="currentState">{this.state.currentQuestion}</h1>
           <h2 className="currentQuestion">Je fais quoi ?</h2>
           <div className="currentOptions">
-            {this.state.currentResponsesContent ? currentOptions : null}
+            {this.state.currentResponses ? currentOptions : null}
           </div>
       </div>
       </div>
+      Votre score : {this.state.score}
       </div>
     );
   }

makefile

@@ -20,4 +20,4 @@ front-build-prod:
 	./node_modules/.bin/encore production;
 
 front-run:
-	cd client && npm start;
+	npm start;