Fixed logic, but cannot handle server errors, like having the server …

…down

backend/wiq/src/main/java/com/wiq/wiq/CustomConfig.java

@@ -10,7 +10,7 @@ public class CustomConfig implements WebMvcConfigurer {
     @Override
     public void addCorsMappings(CorsRegistry registry) {
         registry.addMapping("/**")
-            .allowedOrigins("http://localhost:5500")
+            .allowedOrigins("http://localhost:3000")
             .allowedMethods("GET", "POST", "PUT", "DELETE")
             .allowedHeaders("*");
     }

backend/wiq/src/main/java/com/wiq/wiq/model/TestClass.java

@@ -24,7 +24,7 @@ public String createJSON() {
         answers0.put("correct", "correct answer");
 
         // Crear un arreglo de respuestas incorrectas
-        String[] wrongAnswers = {"wrong1", "wrong2"};
+        String[] wrongAnswers = {"wrong1", "wrong2", "wrong3"};
         answers0.put("wrong", wrongAnswers);
 
         // Agregar las respuestas al objeto "0"

webapp/src/components/questionView/QuestionGenerator.js

@@ -6,19 +6,22 @@ class QuestionGenerator{
 
     }
 
-    generateQuestions(){
-        //Deberíamos recoger el json
-        fetch(this.apiUrl)
-            .then(response => response.json()) 
-            .then(receivedQuestions => { 
-                let i = 0;
-                var questions = [];
-                for(const question in receivedQuestions){//To have a condition, no legth or size
-                    questions[i] = new Question(receivedQuestions[i]);
-                    i += 1;
-                }
-                return questions;
-            });
+    async generateQuestions() {
+        try {
+            const response = await fetch(this.apiUrl);
+            const receivedQuestions = await response.json();
+
+            let i = 0;
+            var questions = [];
+            for (const question in receivedQuestions) {
+                questions[i] = new Question(receivedQuestions[i]);
+                i += 1;
+            }
+            console.log(questions);
+            return questions;
+        } catch (error) {
+            throw new Error(error);
+        }
     }
 
 }

webapp/src/components/questionView/QuestionView.js

@@ -1,37 +1,59 @@
 import Question from './Question';
 import QuestionGenerator from './QuestionGenerator';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
-const questionGenerator = new QuestionGenerator();
-var questions = questionGenerator.generateQuestions();
 
 function QuestionView(){
-    const [numQuestion, setnumQuestion] = useState(0);
+    const questionGenerator = new QuestionGenerator();
+    const [numQuestion, setnumQuestion] = useState(-1);
+    const [questions, setQuestions] = useState([]);
+
+    const generateQuestions = async (numQuestion) => {
+        if (numQuestion < 0) {
+            try {
+                var generatedQuestions = await questionGenerator.generateQuestions();
+                setQuestions(generatedQuestions);
+                setnumQuestion(0);
+            } catch (error) {
+                //Como hacer que funcione esto
+                console.log(error.response.data.error);
+            }
+
+        }
+    }
 
     function handleClick(){
         setnumQuestion(numQuestion + 1);
     }
-    return (<div>
+
+    useEffect(() => {generateQuestions(numQuestion)}, []);
+
+    return (
+    <div>
         {/*Nav*/}
-        <QuestionComponent numQuestion={numQuestion} handleClick={handleClick}/>
+        {numQuestion >= 0 ? 
+        <QuestionComponent questions={questions} numQuestion={numQuestion} handleClick={handleClick}/> :
+        <h1>Please Wait a bit</h1> }
+
 
     </div>);
 }
 
-function QuestionComponent({numQuestion, handleClick}){
+function QuestionComponent({questions, numQuestion, handleClick}){
     return (
         <div>
-        <p>questions[numQuestion].getQuestion()</p>
+        <p>{questions[numQuestion].getQuestion()}</p>
         {questions[numQuestion].getAnswers().map((item, index) => (
             <Answer key={index} text={item} onClick={handleClick}/>
         ))}
+        <p>Question counter: {numQuestion}</p>
         </div>
     );
 }
 
-function Answer({text, handleClick}){
+function Answer({text, onClick}){
     return (
-        <button onClick={handleClick}>{text}</button>
+        <button onClick={onClick}>{text}</button>
     );
 }