Merge pull request #42 from Arquisoft/vistaMainSara

Añadido del Home de la aplicación

package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "react-router-dom": "^6.22.0"
+  }
+}

webapp/src/App.js

@@ -5,34 +5,51 @@ import CssBaseline from '@mui/material/CssBaseline';
 import Container from '@mui/material/Container';
 import Typography from '@mui/material/Typography';
 import Link from '@mui/material/Link';
+import Home from "./components/Home";
 
 function App() {
   const [showLogin, setShowLogin] = useState(true);
-
+  const [login, setLogin] = useState(false);
+  const [user, setUser] = useState('');
   const handleToggleView = () => {
     setShowLogin(!showLogin);
   };
+
+  const sendLogin = (loginSuccess) => {
+    setLogin(loginSuccess)
+  }
+
+  const sendUsername = (username) => {
+    setUser(username)
+  }
 
   return (
+
     <Container component="main" maxWidth="xs">
-      <CssBaseline />
-      <Typography component="h1" variant="h5" align="center" sx={{ marginTop: 2 }}>
+        {login ? <Home username={user}/> : (
+            <>
+            <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 }}>
+    </Typography>
+    {showLogin ? <Login sendLogin={sendLogin} sendUsername={sendUsername}/> : <AddUser />}
+    <Typography component="div" align="center" sx={{ marginTop: 2 }}>
         {showLogin ? (
-          <Link name="gotoregister" component="button" variant="body2" onClick={handleToggleView}>
-            Don't have an account? Register here.
-          </Link>
+            <Link name="gotoregister" component="button" variant="body2" onClick={handleToggleView}>
+                Don't have an account? Register here.
+            </Link>
         ) : (
-          <Link component="button" variant="body2" onClick={handleToggleView}>
-            Already have an account? Login here.
-          </Link>
+            <Link component="button" variant="body2" onClick={handleToggleView}>
+                Already have an account? Login here.
+            </Link>
         )}
-      </Typography>
+    </Typography>
+            </>
+            )}
+
     </Container>
   );
 }
 
 export default App;
+

webapp/src/components/GamesPanel.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import Grid from '@mui/material/Grid';
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
+
+function Game({ title }) {
+    return (
+        <Grid item xs={4}>
+            <Paper sx={{ p: 2, bgcolor: 'red' }}>
+                <Typography variant="h6">{title}</Typography>
+            </Paper>
+        </Grid>
+    );
+}
+
+function GamesPanel() {
+    return (
+        <Grid container spacing={2}>
+            <Game title="Saber y ganar" />
+            <Game title="Elemento 2" />
+            <Game title="Elemento 3" />
+        </Grid>
+    );
+}
+
+export default GamesPanel;

webapp/src/components/Home.js

@@ -0,0 +1,17 @@
+import React, {useState} from 'react';
+import NavBar from "./NavBar";
+import GamesPanel from "./GamesPanel";
+import Container from "@mui/material/Container";
+
+const Home = (props) => {
+    // userData contiene los datos del usuario que fueron pasados como props desde el componente Login
+
+    return (
+        <Container component="main" maxWidth={false} style={{ height: '100vh' }}>
+            <NavBar/>
+            <GamesPanel/>
+        </Container>
+    );
+};
+
+export default Home;

webapp/src/components/Login.js

@@ -2,8 +2,9 @@
 import React, { useState } from 'react';
 import axios from 'axios';
 import { Container, Typography, TextField, Button, Snackbar } from '@mui/material';
+import Home from "./Home";
 
-const Login = () => {
+const Login = ({sendLogin, sendUsername}) => {
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
   const [error, setError] = useState('');
@@ -12,7 +13,7 @@ const Login = () => {
   const [openSnackbar, setOpenSnackbar] = useState(false);
 
   const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
-
+  sendLogin(loginSuccess);
   const loginUser = async () => {
     try {
       const response = await axios.post(`${apiEndpoint}/login`, { username, password });
@@ -22,7 +23,8 @@ const Login = () => {
 
       setCreatedAt(userCreatedAt);
       setLoginSuccess(true);
-
+      sendLogin(loginSuccess);
+      sendUsername(username);
       setOpenSnackbar(true);
     } catch (error) {
       setError(error.response.data.error);
@@ -35,16 +37,7 @@ const Login = () => {
 
   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>
-      ) : (
+
         <div>
           <Typography component="h1" variant="h5">
             Login
@@ -72,9 +65,20 @@ const Login = () => {
             <Snackbar open={!!error} autoHideDuration={6000} onClose={() => setError('')} message={`Error: ${error}`} />
           )}
         </div>
-      )}
     </Container>
   );
 };
 
 export default Login;
+
+
+// (
+//     <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>
+// )

webapp/src/components/NavBar.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+
+function NavBar() {
+    return (
+        <AppBar position="static">
+            <Toolbar>
+                <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+                    Saber y Ganar
+                </Typography>
+                <Button color="inherit">Mi Perfil</Button>
+                <Button color="inherit">Buscador</Button>
+            </Toolbar>
+        </AppBar>
+    );
+}
+
+export default NavBar;