From a20a69f94343498883290685f92eeebcf1f5aed7 Mon Sep 17 00:00:00 2001
From: baraganio <carlossrsi07@gmail.com>
Date: Sun, 3 Mar 2024 21:05:38 +0100
Subject: [PATCH 1/2] Change on the way the app navigates between files, now it
 doesn't show the file on the URL

---
 webapp/src/App.js   | 15 ---------------
 webapp/src/index.js | 11 ++++++++++-
 2 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/webapp/src/App.js b/webapp/src/App.js
index a3090c90..6e130102 100644
--- a/webapp/src/App.js
+++ b/webapp/src/App.js
@@ -1,10 +1,7 @@
 // App.js
 import React, { useState } from 'react';
-import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';  // Cambiado de Switch a Routes
 import AddUser from './components/AddUser';
 import Login from './components/Login';
-import Game from './components/Game';
-import HistoricalData from './components/HistoricalData';
 import CssBaseline from '@mui/material/CssBaseline';
 import Container from '@mui/material/Container';
 import Typography from '@mui/material/Typography';
@@ -19,18 +16,11 @@ function App() {
   
 
   return (
-    <Router>
       <Container component="main" maxWidth="xs">
         <CssBaseline />
         <Typography component="h1" variant="h5" align="center" sx={{ marginTop: 2 }}>
           Bienvenido a WIQ 2024 del curso de Arquitectura del Software
         </Typography>
-
-        <Routes>
-          <Route path="/game" element={<Game />} />
-          <Route path="/historicaldata" element={<HistoricalData />} />
-          <Route path="/" element={
-            <>
               {showLogin ? <Login /> : <AddUser />}
               <Typography component="div" align="center" sx={{ marginTop: 2 }}>
                 {showLogin ? (
@@ -43,13 +33,8 @@ function App() {
                   </Link>
                 )}
 
-
               </Typography>
-            </>
-          } />
-        </Routes>
       </Container>
-    </Router>
   );
 }
 
diff --git a/webapp/src/index.js b/webapp/src/index.js
index d563c0fb..046a597d 100644
--- a/webapp/src/index.js
+++ b/webapp/src/index.js
@@ -2,12 +2,21 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
+import Game from './components/Game';
+import HistoricalData from './components/HistoricalData';
 import reportWebVitals from './reportWebVitals';
+import {Route,  Routes,  MemoryRouter as Router} from "react-router-dom";
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <Router>
+      <Routes>
+        <Route path="/" element={<App/>}></Route>
+        <Route path="/game" element={<Game />}> </Route>
+        <Route path="/historicaldata" element={<HistoricalData />}> </Route>
+      </Routes>
+    </Router>
   </React.StrictMode>
 );
 

From 3b2ddd858170bf357cdc97b15afb6ab21f7c7af9 Mon Sep 17 00:00:00 2001
From: baraganio <carlossrsi07@gmail.com>
Date: Sun, 3 Mar 2024 21:44:57 +0100
Subject: [PATCH 2/2] Exctract some code from the login.js file to the new
 MainPage.js one

---
 webapp/src/components/Game.js     |  5 +---
 webapp/src/components/Login.js    | 35 ++++-----------------------
 webapp/src/components/MainPage.js | 40 +++++++++++++++++++++++++++++++
 webapp/src/index.js               |  6 +++--
 4 files changed, 49 insertions(+), 37 deletions(-)
 create mode 100644 webapp/src/components/MainPage.js

diff --git a/webapp/src/components/Game.js b/webapp/src/components/Game.js
index b8a17de7..d1b710a5 100644
--- a/webapp/src/components/Game.js
+++ b/webapp/src/components/Game.js
@@ -1,11 +1,10 @@
 import React, { useState } from 'react';
 import axios from 'axios';
-import { Container, Typography, TextField, Button, Snackbar, Paper } from '@mui/material';
+import { Container, Typography, Button, Paper } from '@mui/material';
 
 const Game = () => {
   const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
 
-  const [askForQuestion, setAskForQuestion] = useState(false);
   const [pais, setpais] = useState('');
   const [capitalCorrecta, setcapital] = useState('');
   const [capitalIcnorrecta1, setcapitalIcnorrecta1] = useState('');
@@ -14,7 +13,6 @@ const Game = () => {
   
   // Esta es la llamada al servicio de generar las preguntas
   const  handleShowQuestion = async () => {
-    //setAskForQuestion(true);
     try{
       // Se declara esta variable unicamente para probar cosas con ella en la peticion
       const eyou = "aa"
@@ -30,7 +28,6 @@ const Game = () => {
   // TODO ESTO ES LO QUE ESTA COMENTADO EN CREATION-SERVICE.JS
   // CREO QUE DEBERIA IR ALLI PERO COMO NO FUNCIONA LO PROBE AQUI
   const deberiaIrEnelServicio = async () => {
-    setAskForQuestion(true);
     const sparqlQuery = 'SELECT DISTINCT ?country ?countryLabel ?capital ?capitalLabel WHERE { ?country wdt:P31 wd:Q6256. ?country wdt:P36 ?capital. SERVICE wikibase:label {bd:serviceParam wikibase:language "[AUTO_LANGUAGE],es".}}';
     const apiUrl = `https://query.wikidata.org/sparql?query=${encodeURIComponent(sparqlQuery)}`;
     const headers = { "Accept": "application/json" }
diff --git a/webapp/src/components/Login.js b/webapp/src/components/Login.js
index 9b63d84d..c36874c4 100644
--- a/webapp/src/components/Login.js
+++ b/webapp/src/components/Login.js
@@ -3,9 +3,10 @@ import React, { useState } from 'react';
 import axios from 'axios';
 import { Container, Typography, TextField, Button, Snackbar } from '@mui/material';
 import { useNavigate } from 'react-router-dom';
-import HistoricalData from './HistoricalData';
 
 const Login = () => {
+  const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
+  
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
   const [error, setError] = useState('');
@@ -14,10 +15,9 @@ const Login = () => {
   const [openSnackbar, setOpenSnackbar] = useState(false);
 
   // Declara las variables (izquierda) y el metodo que la modifica (derecha). Se inicializa a false (useState)
-  const [showHistoricalData, setShowHistoricaData] = useState(false);
   const navigate = useNavigate();
 
-  const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
+  
 
   const loginUser = async () => {
     try {
@@ -39,39 +39,12 @@ const Login = () => {
     setOpenSnackbar(false);
   };
 
-  const handleShowGame = () => {
-    let path= '/Game';
-    navigate(path);
-  };
-
-  const handleShowHistoricalData = () => {
-    let path= '/HistoricalData';
-    navigate(path);
-  };
-
   return (
     <Container component="main" maxWidth="xs" sx={{ marginTop: 4 }}>
       {/* Los operadores logicos funcionan de la manera: 
       condicion ? (lo que se hace si se cumple) : (lo que se hace si no se cumple) */}
       {loginSuccess ? (
-        
-          <div>
-            <Typography component="h1" variant="h5" sx={{ textAlign: 'center' }}>
-              Hello {username}!
-            </Typography>
-            <Typography component="p" variant="body1" sx={{ textAlign: 'center', marginTop: 2 }}>
-              Your account was created on {new Date(createdAt).toLocaleDateString()}.
-            </Typography>
-
-            {/* Se declaran los botones en los q al hacer click se ejecuta el metodo especificado en onClick*/}
-            <Button variant="contained" color="primary" onClick={handleShowGame}>
-              Empieza juego
-            </Button>
-            <Button variant="contained" color="primary" onClick={handleShowHistoricalData}> 
-              Historico de partidas de jugador
-            </Button>
-          </div>
-        
+        navigate("/MainPage")
       ) : (
         <div>
           <Typography component="h1" variant="h5">
diff --git a/webapp/src/components/MainPage.js b/webapp/src/components/MainPage.js
new file mode 100644
index 00000000..2e3cd06e
--- /dev/null
+++ b/webapp/src/components/MainPage.js
@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import { Container, Typography, TextField, Button, Snackbar } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+
+const MainPage = () => {
+    const navigate = useNavigate();
+
+    const handleShowGame = () => {
+        let path= '/Game';
+        navigate(path);
+    };
+
+    const handleShowHistoricalData = () => {
+        let path= '/HistoricalData';
+        navigate(path);
+    };
+
+    return (
+        <Container component="main" maxWidth="xs" sx={{ marginTop: 4 }}>
+            <div>
+                <Typography component="h1" variant="h5" sx={{ textAlign: 'center' }}>
+                Hello !
+                </Typography>
+                <Typography component="p" variant="body1" sx={{ textAlign: 'center', marginTop: 2 }}>
+                Your account was created on .
+                </Typography>
+
+                {/* Se declaran los botones en los q al hacer click se ejecuta el metodo especificado en onClick*/}
+                <Button variant="contained" color="primary" onClick={handleShowGame}>
+                Empieza juego
+                </Button>
+                <Button variant="contained" color="primary" onClick={handleShowHistoricalData}> 
+                Historico de partidas de jugador
+                </Button>
+            </div>
+          </Container>
+    )
+}
+
+export default MainPage;
\ No newline at end of file
diff --git a/webapp/src/index.js b/webapp/src/index.js
index 046a597d..3923d310 100644
--- a/webapp/src/index.js
+++ b/webapp/src/index.js
@@ -1,11 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import reportWebVitals from './reportWebVitals';
+import {Route,  Routes,  MemoryRouter as Router} from "react-router-dom";
 import './index.css';
 import App from './App';
 import Game from './components/Game';
 import HistoricalData from './components/HistoricalData';
-import reportWebVitals from './reportWebVitals';
-import {Route,  Routes,  MemoryRouter as Router} from "react-router-dom";
+import MainPage from './components/MainPage';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
@@ -13,6 +14,7 @@ root.render(
     <Router>
       <Routes>
         <Route path="/" element={<App/>}></Route>
+        <Route path="/mainPage" element={<MainPage />}> </Route>
         <Route path="/game" element={<Game />}> </Route>
         <Route path="/historicaldata" element={<HistoricalData />}> </Route>
       </Routes>