agregado el home y zona privada

Arquisoft · Mar 11, 2024 · 0667f55 · 0667f55
1 parent c3ef1fd
commit 0667f55
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 96 deletions.
diff --git a/webapp/src/App.js b/webapp/src/App.js
@@ -1,54 +1,30 @@
- import React, { useState } from 'react';
-import Container from '@mui/material/Container';
+import React from 'react';
+import Navbar from './components/navbar/NavBar';
+import AddUser from './components/adduser/AddUser';
+import Login from './components/login/Login';
+import { AuthProvider } from './components/authcontext';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import StartButton from './components/startbutton/StartButton';
 import Game from './components/game/Game';
-function App() {
-  const [showLogin, setShowLogin] = useState(true);
-
-  const handleToggleView = () => {
-    setShowLogin(!showLogin);
-  };
+import Home from './components/home/Home';
+import Footer from './components/footer/Footer';
 
+const App = () => {
   return (
-    <Container component="main" maxWidth="xs">
-
-        <Game> <progressBar></progressBar></Game>
-
-
-      {/*showLogin ? <Login /> : <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 component="button" variant="body2" onClick={handleToggleView}>
-            Already have an account? Login here.
-          </Link>
-        )}
-      </Typography>
-        */}
-
-    </Container>
+    <AuthProvider>
+      <Router>
+        <Navbar />
+        <Routes>
+          <Route path="/" element={<StartButton isLoggedIn={true} />} />
+          <Route path="/addUser" element={<AddUser />} />
+          <Route path="/login" element={<Login />} />
+          <Route path="/game" element={<Game />} />
+          <Route path="/home" element={<Home />} />
+        </Routes>
+        <Footer/>
+      </Router>
+    </AuthProvider>
   );
-}
-
-export default App; 
-
-/*
-import React from 'react';
-import GenerateQuestion from './components/GenerateQuestion'; // Asegúrate de importar GenerateQuestion correctamente
-import Login from './components/Login';
-import CssBaseline from '@mui/material/CssBaseline';
-import Container from '@mui/material/Container';
-import Typography from '@mui/material/Typography';
-import Footer from './components/Footer';
-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>
-      { Aquí se muestra el componente GenerateQuestion */
-
+export default App;
diff --git a/webapp/src/components/game/Game.js b/webapp/src/components/game/Game.js
@@ -1,5 +1,5 @@
 // Importa React, useState para manejar el estado, axios para hacer solicitudes HTTP, y componentes de Material UI para la interfaz.
-import React, { useState } from 'react';
+import React, { useState,useEffect } from 'react';
 import axios from 'axios';
 import { Container, Typography, Button, Snackbar,Grid,Box } from '@mui/material';
 import MuiAlert from '@mui/material/Alert';
@@ -9,9 +9,12 @@ const apiEndpoint = process.env.REACT_APP_API_URI || 'http://localhost:8000';
 
 const Game = () => {
 
+    useEffect(() => {
+        fetchQuestionAndAnswers();
+      }, []); // Pasar un array vacío como segundo argumento para que `useEffect` se ejecute solo una vez al montar el componente.
 
-  const buttonColors = ['#ff0000', '#00008b', '#0000ff', '#00ff00'];
-
+    
+    const buttonColors = ['#3D348B', '#7678ED', '#F35B04', '#172A3A'];
     const [question, setQuestion] = useState('');
     const [answers, setAnswers] = useState([]);
     const [loadingMessage, setLoadingMessage] = useState('');
@@ -65,9 +68,11 @@ const Game = () => {
                 <Typography variant="h1" sx={{fontSize: '5em'}}>{question}</Typography>
             )}
             <Box sx={{ mb: 2 }}>
-                <Button variant="contained" color="primary" onClick={fetchQuestionAndAnswers}>
+                {/*por si se quieren pedir a mano pero son automaticas a partir de ahora 
+                <Button variant="contained" color="primary" onClick={fetchQuestionAndAnswers} hidden>
                     Generate Question
                 </Button>
+                */  }
             </Box>
             {loadingMessage && (<Typography variant="h2">{loadingMessage}</Typography>)}
             {/* Muestra la pregunta y las respuesta si existen */}

diff --git a/webapp/src/components/home/Home.js b/webapp/src/components/home/Home.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import Navbar from '../navbar/NavBar';
+import StartButton from '../startbutton/StartButton';
+import Typography from '@mui/material/Typography';
+import Footer from '../footer/Footer';
+const Home = () => {
+  return (
+    <div>
+
+
+      <StartButton isLoggedIn={true} />
+
+    </div>
+  );
+};
+
+export default Home;
diff --git a/webapp/src/components/home/home.css b/webapp/src/components/home/home.css
@@ -0,0 +1,14 @@
+body {
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+      'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+      sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  code {
+    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+      monospace;
+  }
+
diff --git a/webapp/src/index.js b/webapp/src/index.js
@@ -1,53 +1,16 @@
 import React from 'react';
-import ReactDOM from 'react-dom/client';
+import ReactDOM from 'react-dom';
 import './index.css';
+import App from './App';
 import reportWebVitals from './reportWebVitals';
-import Navbar from './components/navbar/NavBar';
-import AddUser from './components/adduser/AddUser';
-import Login from './components/login/Login';
-import { AuthProvider } from './components/authcontext';
-import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
-import CssBaseline from '@mui/material/CssBaseline';
-import Typography from '@mui/material/Typography';
-import StartButton from './components/startbutton/StartButton';
-import Game from './components/game/Game';
-const root = ReactDOM.createRoot(document.getElementById('root'));
 
-root.render(
+ReactDOM.render(
   <React.StrictMode>
-
 
-    <AuthProvider>
-    <Router>
-      <Navbar />
-      <Typography component="h1" variant="h5" align="center" sx={{ marginTop: 2 }}>
-       Bienvenidos al curso 2024 de arquitectura de software somos el grupo :
-      </Typography>
-      <Typography component="h2" variant="h5" align="center" sx={{ marginTop: 2 }}>wiq_es04c</Typography>
-        <Routes>
-          <Route path="/" element={<StartButton isLoggedIn={true} />} />
-          <Route path="/addUser" element={<AddUser />} />
-          <Route path="/login" element={<Login />} />
-          <Route path="/game" element={<Game />} />
-        </Routes>
-
-
-
-
-
-
-      </Router>
-
-      <CssBaseline />
-
-
-
-
-
-
+    <App />
 
-    </AuthProvider>
-  </React.StrictMode>
+  </React.StrictMode>,
+  document.getElementById('root')
 );
 
 reportWebVitals();