Web app refactored and improved

jordi/jordi-ask/routes/routes.js

@@ -17,7 +17,10 @@ module.exports = function (app, questionsRepository) {
 
                 // Return questions without answer
                 const answerLessQuestions = result.map(q => {
-                    const {answer, ...rest} = q;
+                    const {answer, statements, ...rest} = q;
+                    const statement = statements[Math.floor(Math.random() * statements.length)]
+                    rest.statement = statement;
+                    rest.options = rest.options.sort(() => Math.random() - 0.5);
                     return rest;
                 });
 

webapp/public/index.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="A small questions game"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--

webapp/public/manifest.json

@@ -1,25 +1,25 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "CyT",
+  "name": "Conocer y Triunfar",
   "icons": [
     {
-      "src": "favicon.ico",
+      "src": "logo192.png",
       "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
+      "type": "image/png"
     },
     {
       "src": "logo192.png",
       "type": "image/png",
       "sizes": "192x192"
     },
     {
-      "src": "logo512.png",
+      "src": "logo192.png",
       "type": "image/png",
       "sizes": "512x512"
     }
   ],
   "start_url": ".",
   "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
+  "theme_color": "#2e3487",
+  "background_color": "#f2f2f2"
 }

webapp/src/App.jsx

@@ -20,17 +20,18 @@ import configJordi from "./views/components/config/particles-config-jordi";
 import configGraph from "./views/components/config/particles-config-graph";
 
 import { ConfigContext } from "./views/context/ConfigContext";
+import { AuthContext } from "./views/context/AuthContext";
 
 const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
 
 const theme = createTheme({
   palette: {
     primary: {
-      main: "#2e3487", // Your primary color
+      main: "#2e3487",
       contrastText: "#FFF",
     },
     secondary: {
-      main: "#f2f2f2", // Your secondary color
+      main: "#f2f2f2",
       contrastText: "#2e3487",
     },
     dark: {
@@ -48,25 +49,24 @@ const theme = createTheme({
   },
 
   typography: {
-    fontFamily: "Verdana, sans-serif", // Your preferred font family
-    fontSize: 16, // Base font size
+    fontFamily: "Verdana, sans-serif",
+    fontSize: 16,
   },
-  // Other theme options (spacing, breakpoints, etc.)
 });
 
-export const AuthContext = React.createContext();
+let configs = [
+  configDefault,
+  configGraph,
+  configJordi,
+];
 
 function useAuth(i = null) {
   const init = (input) => {
-    if(!input)
-      return null;
-    if (typeof input !== "string") {
-      sUser(input);
-    } else {
-      sUser(JSON.parse(input));
-    }
+    if(!input) return null;
+
+    if (typeof input !== "string") sUser(input);
+    else sUser(JSON.parse(input));
   }
-  // TODO - On load validate that the token is, if not -> logout
   const [user, sUser] = useState(i ? init(i) : JSON.parse(localStorage.getItem("user")));
 
   useEffect(() => {
@@ -78,26 +78,19 @@ function useAuth(i = null) {
         }
       })
       .catch(() => logout())
+  // eslint-disable-next-line
   }, [])
 
   useEffect(() => {
-    if(!user)
-      localStorage.removeItem('user');
-    else
-      localStorage.setItem('user', JSON.stringify(user));
+    if(!user) localStorage.removeItem('user');
+    else localStorage.setItem('user', JSON.stringify(user));
   }, [user])
 
-  const getUser = () => {
-      return user ? user : null;
-  }
-  const isAuthenticated = () => {
-    return user ? true : false;
-  }
-  const logout = () => {
-    sUser(null);
-  }
-
+  const getUser = () => user || null;
+  const isAuthenticated = () => !!user
+  const logout = () => sUser(null)
   const setUser = i => init(i);
+
   return {
     getUser,
     isAuthenticated,
@@ -109,13 +102,7 @@ function useAuth(i = null) {
 export default function App() {
   const [config, setConfig] = useState(configDefault);
 
-  let auth = useAuth()
-
-  let configs = [
-    configDefault,
-    configGraph,
-    configJordi,
-  ];
+  const auth = useAuth()
 
   function swapConfig() {
     const currentIndex = configs.findIndex(c => c === config);

webapp/src/views/About.jsx

@@ -2,54 +2,69 @@ import React from 'react';
 import { Container, Typography, Paper, Link } from '@mui/material';
 import {ReactComponent as Logo} from "../media/logoL.svg";
 
-export default function About() {
+const FirstCard = () => {
     return (
-        <Container maxWidth="md" style={{paddingTop: '2rem'}}>
+        <Paper elevation={3} sx={{padding: '2rem'}}>
+            <Typography variant="h4" gutterBottom>
+                About Us
+            </Typography>
 
-            <Paper elevation={3} style={{ padding: '2rem' }}>
-                <Typography variant="h4" gutterBottom>
-                    About Us
-                </Typography>
-
-                <Container className="svg-container" style={{textAlign: "center", margin: "1rem"}}>
-                    <Logo style={{ width: '75%', height: '75%' }} />
-                </Container>
+            <Container className="svg-container" sx={{textAlign: "center", margin: "1rem"}}>
+                <Logo style={{ width: '75%', height: '75%' }} />
+            </Container>
 
-                <Typography variant="body1" paragraph>
-                    Welcome to our project! We are dedicated to providing quality content and services to our users.
-                </Typography>
-                <Typography variant="body1" paragraph>
-                    Our mission is to provide a fun way of learning and practicing general knowledge through a Q&A game.
-                </Typography>
-                <Typography variant="body1" paragraph>
-                    Feel free to explore our site and discover more about what we have to offer.
-                </Typography>
-                <Typography variant="body1" paragraph>
-                    If you have any questions or feedback, please don't hesitate to contact us.
-                </Typography>
-                <Typography variant="subtitle1" color="textSecondary">
-                    Thank you for visiting!
-                </Typography>
-            </Paper>
+            <Typography variant="body1" paragraph>
+                Welcome to our project! We are dedicated to providing quality content and services to our users.
+            </Typography>
+            <Typography variant="body1" paragraph>
+                Our mission is to provide a fun way of learning and practicing general knowledge through a Q&A game.
+            </Typography>
+            <Typography variant="body1" paragraph>
+                Feel free to explore our site and discover more about what we have to offer.
+            </Typography>
+            <Typography variant="body1" paragraph>
+                If you have any questions or feedback, please don't hesitate to contact us.
+            </Typography>
+            <Typography variant="subtitle1" color="textSecondary">
+                Thank you for visiting!
+            </Typography>
+        </Paper>
+    )
+}
 
-            <Paper elevation={3} style={{ padding: '2rem', marginTop: '2rem'}}>
-                <Typography variant="h4" gutterBottom>
-                    Contact Us
-                </Typography>
-                <Typography variant="body1" paragraph>
-                    You can reach us via the following channels:
-                </Typography>
-                <Typography variant="body1" paragraph>
-                    Mailing Info: <Link href="mailto:[email protected]">[email protected]</Link>
-                </Typography>
-                <Typography variant="body1" paragraph>
-                    Mailing Info: <Link href="mailto:[email protected]">[email protected]</Link>
-                </Typography>
-                <Typography variant="subtitle1">
-                    <Link href="https://github.com/Arquisoft/wiq_es05b" target="_blank" rel="noopener noreferrer">Checkout our github page!</Link>
-                </Typography>   
-            </Paper>
+const ContactCard = ({mails}) => {
+    return (
+        <Paper elevation={3} sx={{ padding: '2rem'}}>
+            <Typography variant="h4" gutterBottom>
+                Contact Us
+            </Typography>
+            <Typography variant="body1" paragraph>
+                You can reach us via the following channels:
+            </Typography>
+            {mails.map(mail => {
+                return (
+                    <Typography variant="body1" paragraph>
+                        Mailing Info: <Link href={`mailto:${mail}`}>{mail}</Link>
+                    </Typography>
+                )
+            })}
+            <Typography variant="subtitle1">
+                <Link href="https://github.com/Arquisoft/wiq_es05b" target="_blank" rel="noopener noreferrer">Checkout our github page!</Link>
+            </Typography>   
+        </Paper>
+    )
+}
 
+export default function About() {
+    const mails = [
+        "[email protected]",
+        "[email protected]"
+    ]
+
+    return (
+        <Container maxWidth="md" sx={{marginTop: '2rem', display: "flex", gap:"2rem", flexFlow: "column"}}>
+            <FirstCard />
+            <ContactCard mails={mails} />
         </Container>
 
     );

webapp/src/views/Account.jsx

@@ -1,10 +1,10 @@
-import {Fragment} from "react";
 import ProtectedComponent from "./components/ProtectedComponent";
 
+// TODO
 export default function Account() {
     return (
-        <Fragment>
+        <>
             <ProtectedComponent />
-        </Fragment>
+        </>
     )
 }

webapp/src/views/Error.jsx

@@ -1,16 +1,31 @@
-import {Button, Container, Paper, Typography} from "@mui/material";
-import {Link} from "react-router-dom";
+import { Button, Container, Paper, Typography } from "@mui/material";
+import { Link } from "react-router-dom";
 
 export default function Error() {
-    return (
-        <Container maxWidth="md" sx={{paddingTop: '2rem'}}>
-            <Paper elevation={3} sx={{ padding: '2rem', textAlign: "center", display: "flex", flexFlow: "column",  gap: "1rem" }}>
-                <img src="/jordi-error.jpg" alt="Oh no"/>
-                <Typography variant="h4" component="p">Oh no, an error occurred.</Typography>
-                <Typography variant="h5" component="p">It seems the requested URL does no exist or you don't have enough privileges to see it.</Typography>
-                <Typography variant="h5" component="p">Go back sinner.</Typography>
-                <Button component={Link} to="/home" variant="contained">Go Home</Button>
-            </Paper>
-        </Container>
-    )
-}
+  return (
+    <Container maxWidth="md" sx={{ paddingTop: "2rem" }}>
+      <Paper elevation={3} sx={{
+        padding: "2rem",
+        textAlign: "center",
+        display: "flex",
+        flexFlow: "column",
+        gap: "1rem",
+      }}>
+        <img src="/jordi-error.jpg" alt="Oh no" />
+        <Typography variant="h4" component="p">
+          Oh no, an error occurred.
+        </Typography>
+        <Typography variant="h5" component="p">
+          It seems the requested URL does no exist or you don't have enough
+          privileges to see it.
+        </Typography>
+        <Typography variant="h5" component="p">
+          Go back sinner.
+        </Typography>
+        <Button component={Link} to="/home" variant="contained">
+          Go Home
+        </Button>
+      </Paper>
+    </Container>
+  );
+}