Added Question's View Need to improve logic

webapp/src/App.js

@@ -5,6 +5,7 @@ import CssBaseline from '@mui/material/CssBaseline';
 import Container from '@mui/material/Container';
 import Typography from '@mui/material/Typography';
 import Link from '@mui/material/Link';
+import QuestionView from './components/questionView/QuestionView';
 
 function App() {
   const [showLogin, setShowLogin] = useState(true);
@@ -14,6 +15,8 @@ function App() {
   };
 
   return (
+    <QuestionView />
+    /*
     <Container component="main" maxWidth="xs">
       <CssBaseline />
       <Typography component="h1" variant="h5" align="center" sx={{ marginTop: 2 }}>
@@ -31,7 +34,7 @@ function App() {
           </Link>
         )}
       </Typography>
-    </Container>
+    </Container>*/
   );
 }
 

webapp/src/components/questionView/Question.js

@@ -21,4 +21,6 @@ class Question{
         return this.answers;
     }
 
-}
+}
+
+export default Question;

webapp/src/components/questionView/QuestionGenerator.js

@@ -1,26 +1,27 @@
+import Question from './Question';
 class QuestionGenerator{
 
     constructor(){
         this.apiUrl = "http://localhost:8090/test";
-        this.questions = [];
 
     }
 
     generateQuestions(){
         //Deberíamos recoger el json
         fetch(this.apiUrl)
-            .then(response => response.json()) // Convertir la respuesta a JSON
-            .then(receivedQuestions => { // La respuesta convertida a JSON se pasa como argumento
+            .then(response => response.json()) 
+            .then(receivedQuestions => { 
                 let i = 0;
+                var questions = [];
                 for(const question in receivedQuestions){//To have a condition, no legth or size
-                    this.questions[i] = new Question(receivedQuestions[i]);
+                    questions[i] = new Question(receivedQuestions[i]);
                     i += 1;
                 }
+                return questions;
             });
     }
 
 }
 
-var q = new QuestionGenerator();
-q.generateQuestions();
+export default QuestionGenerator;
 

webapp/src/components/questionView/QuestionView.js

@@ -0,0 +1,38 @@
+import Question from './Question';
+import QuestionGenerator from './QuestionGenerator';
+import { useState } from 'react';
+
+const questionGenerator = new QuestionGenerator();
+var questions = questionGenerator.generateQuestions();
+
+function QuestionView(){
+    const [numQuestion, setnumQuestion] = useState(0);
+
+    function handleClick(){
+        setnumQuestion(numQuestion + 1);
+    }
+    return (<div>
+        {/*Nav*/}
+        <QuestionComponent numQuestion={numQuestion} handleClick={handleClick}/>
+
+    </div>);
+}
+
+function QuestionComponent({numQuestion, handleClick}){
+    return (
+        <div>
+        <p>questions[numQuestion].getQuestion()</p>
+        {questions[numQuestion].getAnswers().map((item, index) => (
+            <Answer key={index} text={item} onClick={handleClick}/>
+        ))}
+        </div>
+    );
+}
+
+function Answer({text, handleClick}){
+    return (
+        <button onClick={handleClick}>{text}</button>
+    );
+}
+
+export default QuestionView;