Exctract some code from the login.js file to the new MainPage.js one

Arquisoft · Mar 3, 2024 · 3b2ddd8 · 3b2ddd8
1 parent a20a69f
commit 3b2ddd8
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 37 deletions.
diff --git 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
@@ -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
@@ -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;
diff --git a/webapp/src/index.js b/webapp/src/index.js
@@ -1,18 +1,20 @@
 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(
   <React.StrictMode>
     <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>