Merge pull request #49 from Arquisoft/carlos

MainPage creation and navigation changes
Arquisoft · Mar 4, 2024 · 9df0354 · 9df0354
2 parents f6452e2 + 3b2ddd8
commit 9df0354
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 52 deletions.
diff --git 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/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,13 +1,24 @@
 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 reportWebVitals from './reportWebVitals';
+import Game from './components/Game';
+import HistoricalData from './components/HistoricalData';
+import MainPage from './components/MainPage';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <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>
+    </Router>
   </React.StrictMode>
 );