From 6b53997eb68834cea2e6e7abc0f188732ca67d51 Mon Sep 17 00:00:00 2001
From: baraganio <carlossrsi07@gmail.com>
Date: Wed, 21 Feb 2024 20:15:12 +0100
Subject: [PATCH 1/2] Added some buttons to the main page

---
 webapp/src/components/Game.js  | 42 ++++++++++++++++++++++++++++++++++
 webapp/src/components/Login.js | 41 ++++++++++++++++++++++++++-------
 2 files changed, 75 insertions(+), 8 deletions(-)
 create mode 100644 webapp/src/components/Game.js

diff --git a/webapp/src/components/Game.js b/webapp/src/components/Game.js
new file mode 100644
index 00000000..805880ab
--- /dev/null
+++ b/webapp/src/components/Game.js
@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+import { Container, Typography, TextField, Button, Snackbar } from '@mui/material';
+
+const Game = () => {
+  /*const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loginSuccess, setLoginSuccess] = useState(false);
+  const [createdAt, setCreatedAt] = useState('');
+  const [openSnackbar, setOpenSnackbar] = useState(false);
+
+  const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
+
+  const loginUser = async () => {
+    try {
+      const response = await axios.post(`${apiEndpoint}/login`, { username, password });
+
+      // Extract data from the response
+      const { createdAt: userCreatedAt } = response.data;
+
+      setCreatedAt(userCreatedAt);
+      setLoginSuccess(true);
+
+      setOpenSnackbar(true);
+    } catch (error) {
+      setError(error.response.data.error);
+    }
+  };
+
+  const handleCloseSnackbar = () => {
+    setOpenSnackbar(false);
+  };*/
+
+  return (
+    <div>
+        <h1>Esta sería la pagina del juego</h1>
+    </div>
+  );
+};
+
+export default Game;
\ No newline at end of file
diff --git a/webapp/src/components/Login.js b/webapp/src/components/Login.js
index 0ad6268e..95aff694 100644
--- a/webapp/src/components/Login.js
+++ b/webapp/src/components/Login.js
@@ -2,6 +2,7 @@
 import React, { useState } from 'react';
 import axios from 'axios';
 import { Container, Typography, TextField, Button, Snackbar } from '@mui/material';
+import Game from './Game';
 
 const Login = () => {
   const [username, setUsername] = useState('');
@@ -11,6 +12,12 @@ const Login = () => {
   const [createdAt, setCreatedAt] = useState('');
   const [openSnackbar, setOpenSnackbar] = useState(false);
 
+  // Declara la variable showGame y el metodo que la modifica. Se inicializa a false
+  const [showGame, setShowGame] = useState(false);
+
+  // Declara la variable showHistoricalData y el metodo que la modifica. Se inicializa a false
+  const [showHistoricalData, setShowHistoricaData] = useState(false);
+
   const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
 
   const loginUser = async () => {
@@ -33,17 +40,35 @@ const Login = () => {
     setOpenSnackbar(false);
   };
 
+  const handleShowGame = () => {
+    setShowGame(true);
+  };
+
+  const handleShowHistoricalData = () => {
+    setShowHistoricaData(true);
+  };
+
   return (
     <Container component="main" maxWidth="xs" sx={{ marginTop: 4 }}>
       {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>
-        </div>
+        showGame ? (
+          <Game/>
+        ) : (
+          <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>
+            <Button variant="contained" color="primary" onClick={handleShowGame}>
+              Empieza juego
+            </Button>
+            <Button variant="contained" color="primary" onClick={handleShowHistoricalData}>
+              Historico de partidas de jugador
+            </Button>
+          </div>
+        )
       ) : (
         <div>
           <Typography component="h1" variant="h5">

From b7a6be1de5c376bbca6741eaecc17e5f9d1c9472 Mon Sep 17 00:00:00 2001
From: baraganio <carlossrsi07@gmail.com>
Date: Wed, 21 Feb 2024 21:14:07 +0100
Subject: [PATCH 2/2] Adding a new simple component

---
 webapp/src/App.js                       |  5 ++++-
 webapp/src/components/HistoricalData.js | 14 ++++++++++++++
 webapp/src/components/Login.js          | 20 ++++++++++++++------
 3 files changed, 32 insertions(+), 7 deletions(-)
 create mode 100644 webapp/src/components/HistoricalData.js

diff --git a/webapp/src/App.js b/webapp/src/App.js
index d932005b..ff205fa2 100644
--- a/webapp/src/App.js
+++ b/webapp/src/App.js
@@ -16,12 +16,15 @@ function App() {
   return (
     <Container component="main" maxWidth="xs">
       <CssBaseline />
+
       <Typography component="h1" variant="h5" align="center" sx={{ marginTop: 2 }}>
         Welcome to the 2024 edition of the Software Architecture course
       </Typography>
+
       {showLogin ? <Login /> : <AddUser />}
+
       <Typography component="div" align="center" sx={{ marginTop: 2 }}>
-        {showLogin ? (
+       {showLogin ? (
           <Link name="gotoregister" component="button" variant="body2" onClick={handleToggleView}>
             Don't have an account? Register here.
           </Link>
diff --git a/webapp/src/components/HistoricalData.js b/webapp/src/components/HistoricalData.js
new file mode 100644
index 00000000..ffaccebb
--- /dev/null
+++ b/webapp/src/components/HistoricalData.js
@@ -0,0 +1,14 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+import { Container, Typography, TextField, Button, Snackbar } from '@mui/material';
+
+const HistoricalData = () => {
+
+  return (
+    <div>
+        <h1>Esta sería la pagina del historico de partidas</h1>
+    </div>
+  );
+};
+
+export default HistoricalData;
\ No newline at end of file
diff --git a/webapp/src/components/Login.js b/webapp/src/components/Login.js
index 95aff694..b46c92ec 100644
--- a/webapp/src/components/Login.js
+++ b/webapp/src/components/Login.js
@@ -3,6 +3,8 @@ import React, { useState } from 'react';
 import axios from 'axios';
 import { Container, Typography, TextField, Button, Snackbar } from '@mui/material';
 import Game from './Game';
+import HistoricalData from './HistoricalData';
+import App from '../App';
 
 const Login = () => {
   const [username, setUsername] = useState('');
@@ -12,10 +14,8 @@ const Login = () => {
   const [createdAt, setCreatedAt] = useState('');
   const [openSnackbar, setOpenSnackbar] = useState(false);
 
-  // Declara la variable showGame y el metodo que la modifica. Se inicializa a false
+  // Declara las variables (izquierda) y el metodo que la modifica (derecha). Se inicializa a false (useState)
   const [showGame, setShowGame] = useState(false);
-
-  // Declara la variable showHistoricalData y el metodo que la modifica. Se inicializa a false
   const [showHistoricalData, setShowHistoricaData] = useState(false);
 
   const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
@@ -50,9 +50,15 @@ const Login = () => {
 
   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 ? (
-        showGame ? (
-          <Game/>
+        showGame || showHistoricalData ? (
+          showGame ? (
+            <Game/>
+          ):(
+            <HistoricalData/>
+          )
         ) : (
           <div>
             <Typography component="h1" variant="h5" sx={{ textAlign: 'center' }}>
@@ -61,10 +67,12 @@ const Login = () => {
             <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}>
+            <Button variant="contained" color="primary" onClick={handleShowHistoricalData}> 
               Historico de partidas de jugador
             </Button>
           </div>