From 074fff626ccf8d7d517119cbd4afff15f09082ab Mon Sep 17 00:00:00 2001
From: uo289267 <uo289267@uniovi.es>
Date: Sat, 2 Mar 2024 20:14:36 +0100
Subject: [PATCH] Added Question's View Need to improve logic

---
 webapp/src/App.js                             |  5 ++-
 .../src/components/questionView/Question.js   |  4 +-
 .../questionView/QuestionGenerator.js         | 13 ++++---
 .../components/questionView/QuestionView.js   | 38 +++++++++++++++++++
 4 files changed, 52 insertions(+), 8 deletions(-)
 create mode 100644 webapp/src/components/questionView/QuestionView.js

diff --git a/webapp/src/App.js b/webapp/src/App.js
index d932005b..401a3af7 100644
--- a/webapp/src/App.js
+++ b/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>*/
   );
 }
 
diff --git a/webapp/src/components/questionView/Question.js b/webapp/src/components/questionView/Question.js
index d190a85d..a572d7e1 100644
--- a/webapp/src/components/questionView/Question.js
+++ b/webapp/src/components/questionView/Question.js
@@ -21,4 +21,6 @@ class Question{
         return this.answers;
     }
     
-}
\ No newline at end of file
+}
+
+export default Question;
\ No newline at end of file
diff --git a/webapp/src/components/questionView/QuestionGenerator.js b/webapp/src/components/questionView/QuestionGenerator.js
index f6245892..16f1fdae 100644
--- a/webapp/src/components/questionView/QuestionGenerator.js
+++ b/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;
 
diff --git a/webapp/src/components/questionView/QuestionView.js b/webapp/src/components/questionView/QuestionView.js
new file mode 100644
index 00000000..b151ad88
--- /dev/null
+++ b/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;
\ No newline at end of file