Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MainPage creation and navigation changes #49

Merged
merged 2 commits into from
Mar 4, 2024
Merged

MainPage creation and navigation changes #49

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a20a69f
Change on the way the app navigates between files, now it doesn't sho…
baraganio Mar 3, 2024
3b2ddd8
Exctract some code from the login.js file to the new MainPage.js one
baraganio Mar 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 0 additions & 15 deletions webapp/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 ? (
Expand All @@ -43,13 +33,8 @@ function App() {
</Link>
)}


</Typography>
</>
} />
</Routes>
</Container>
</Router>
);
}

Expand Down
5 changes: 1 addition & 4 deletions webapp/src/components/Game.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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('');
Expand All @@ -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"
Expand All @@ -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" }
Expand Down
35 changes: 4 additions & 31 deletions webapp/src/components/Login.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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('');
Expand All @@ -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 {
Expand All @@ -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">
Expand Down
40 changes: 40 additions & 0 deletions webapp/src/components/MainPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
15 changes: 13 additions & 2 deletions webapp/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);

Expand Down
Loading