Merge pull request #79 from Arquisoft/feat/webapp/new-dashboard

Feat/webapp/new dashboard

webapp/public/locales/en/translation.json

@@ -9,8 +9,12 @@
         },
         "play": "Play",
         "login": "Log in",
+        "logout": "Log Out",
         "register": "Register",
-        "submit": "Submit"
+        "submit": "Submit",
+        "rules": "Rules",
+        "dashboard": "User's Dashboard",
+        "goBack": "Go Back"
     },
     "session": {
         "username": "Username",

webapp/public/locales/es/translation.json

@@ -9,7 +9,12 @@
         },
         "play": "Jugar",
         "login": "Iniciar sesión",
-        "register": "Registrarse"
+        "logout": "Salir",
+        "register": "Registrarse",
+        "submit": "Enviar",
+        "rules": "Reglas",
+        "dashboard": "Panel de Usuario",
+        "goBack": "Volver"
     },
     "session": {
         "username": "Nombre de usuario",

webapp/src/components/ButtonEf.jsx

@@ -5,7 +5,17 @@ import '../styles/AppView.css';
 
 const ButtonEf = ({ dataTestId, variant, colorScheme, text, onClick }) => {
     return (
-      <Button type="submit" data-testid={dataTestId} variant={variant} colorScheme={colorScheme} margin={"10px"} className={"custom-button effect1"} onClick={onClick}>{text}</Button>
+      <Button 
+        type="submit" 
+        data-testid={dataTestId} 
+        variant={variant} 
+        colorScheme={colorScheme} 
+        margin={"10px"} 
+        className={"custom-button effect1"} 
+        onClick={onClick}
+      >
+        {text}
+      </Button>
     );
 };
 

webapp/src/components/Router.jsx

@@ -1,6 +1,8 @@
 import React from "react";
 import Root from "../pages/Root";
 import Login from "../pages/Login";
+import Dashboard from "../pages/Dashboard";
+import Rules from "../pages/Rules";
 import Signup from "../pages/Signup";
 import { Route,createRoutesFromElements } from "react-router-dom";
 
@@ -9,5 +11,7 @@ export default createRoutesFromElements(
       <Route index element={<Root />} />
       <Route path="/signup" element={<Signup />} />
       <Route path="/login" element={<Login />}/>
+      <Route path="/dashboard" element={<Dashboard />}/>
+      <Route path="/dashboard/rules" element={<Rules />}/>
     </Route>
   )

webapp/src/pages/Dashboard.jsx

@@ -0,0 +1,33 @@
+import { Center } from "@chakra-ui/layout";
+import { Grid, Flex, Heading, Button, Box } from "@chakra-ui/react";
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import ButtonEf from '../components/ButtonEf';
+
+export default function Dashboard() {
+    const navigate = useNavigate();
+    const { t } = useTranslation();
+
+    return (
+        <Center display="flex" flexDirection="column" w="100wh" h="100vh" bg="blue.50" justifyContent="center" alignItems="center">
+          <Heading as="h2" color="blue.400">{t("common.dashboard")}</Heading>
+
+          <Box bg="white" p={4} borderRadius="md" boxShadow="md" mt={4} mb={4} w="fit-content">
+            <Grid templateColumns="repeat(3, 1fr)" gap={4}>
+              <ButtonEf dataTestId={"Rules"} variant={"outline"} colorScheme={"blue"} text={t("common.rules")} onClick={() => navigate("/dashboard/rules")}/>
+              <ButtonEf dataTestId={"Play"} variant={"solid"} colorScheme={"blue"} text={t("common.play")} onClick={() => navigate("/dashboard/game")}/>
+              <Button isDisabled data-testid={"Statistics"} type="submit" colorScheme={"blue"} margin={"10px"} className={"custom-button effect1"} onClick={() => navigate("/dashboard/statistics")}>
+                {t("common.statistics.title")}
+              </Button>
+            </Grid>
+
+            <Flex direction="row" justifyContent="center" alignItems="center">
+              <Button type="submit" colorScheme="red" margin={"10px"} className={"custom-button effect1"} onClick={() => navigate("/login")} w="100%">
+                {t("common.logout")}
+              </Button>
+            </Flex>
+          </Box>
+        </Center>
+    );
+}

webapp/src/pages/Rules.jsx

@@ -0,0 +1,31 @@
+import { Center } from "@chakra-ui/layout";
+import { Text, Flex, Heading, Button, Box } from "@chakra-ui/react";
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+export default function Rules() {
+    const navigate = useNavigate();
+    const { t } = useTranslation();
+
+    return (
+        <Center display="flex" flexDirection="column" w="100wh" h="100vh" bg="blue.50" justifyContent="center" alignItems="center">
+            <Heading as="h2" color="blue.400">{t("common.rules")}</Heading>
+
+            <Box bg="white" p={4} borderRadius="md" boxShadow="md" mt={4} mb={4} w={{ base: "90%", md: "70%", lg: "50%" }} textAlign={"justify"}>
+                <Text>The <strong>WIQ</strong> game consists of quick games of 9 rounds. In each round there is one question and two possible answers. The key to earning points lies in choosing the correct answer.</Text>
+                <br/>
+                <Text>There is only one correct answer.</Text>
+                <br/>
+                <Text>You have to select a question before time runs out.</Text>
+                <br/>
+                <Text>To start playing you have to click on the Play button.</Text>
+                <Flex direction="row" justifyContent="center" alignItems="center">
+                    <Button data-testid={"GoBack"} type="submit" variant="solid" colorScheme="blue" margin={"10px"} className={"custom-button effect1"} onClick={() => navigate("/dashboard")} w="100%">
+                        {t("common.goBack")}
+                    </Button>
+                </Flex>
+            </Box>
+        </Center>
+    );
+}

webapp/src/tests/Dashboard.test.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router';
+import Dashboard from '../pages/Dashboard';
+
+describe('Dashboard component', () => {
+  it('renders dashboard elements correctly', async () => {
+    const { getByText } = render(<MemoryRouter><Dashboard/></MemoryRouter>);
+
+    // Check if the heading is rendered
+    expect(getByText("common.dashboard")).toBeInTheDocument();
+
+    // Check if the buttons are rendered
+    expect(screen.getByTestId('Rules')).toBeInTheDocument();
+    expect(screen.getByTestId('Play')).toBeInTheDocument();
+    expect(screen.getByTestId('Statistics')).toBeInTheDocument();
+
+    // Check if the logout button is rendered
+    expect(screen.getByText(/logout/i)).toBeInTheDocument();
+  });
+
+  it('navigates to the rules route on button click', () => {
+    // Render the component
+    render(<MemoryRouter><Dashboard /></MemoryRouter>);
+
+    const rulesButton = screen.getByTestId('Rules');
+    fireEvent.click(rulesButton);
+
+    // Check the change of path
+    expect(screen.getByText("common.rules")).toBeInTheDocument();
+  });
+
+  it('do not navigates to the statistics route on button click', () => {
+    // Render the component
+    render(<MemoryRouter><Dashboard /></MemoryRouter>);
+
+    const statisticsButton = screen.getByTestId('Statistics');
+    fireEvent.click(statisticsButton);
+
+    // Check the change of path
+    expect(screen.getByText("common.dashboard")).toBeInTheDocument();
+  });
+
+  // Test the play and log out buttons.
+});

webapp/src/tests/Rules.test.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { MemoryRouter } from 'react-router';
+import Rules from '../pages/Rules';
+
+describe('Rules component', () => {
+  it('renders rules elements correctly', async () => {
+    const { getByText, getByTestId } = render(<MemoryRouter><Rules/></MemoryRouter>);
+
+    // Check if the heading is rendered
+    expect(getByText("common.rules")).toBeInTheDocument();
+
+    // Check if the button is rendered
+    expect(getByTestId('GoBack')).toBeInTheDocument();
+  });
+});

webapp/src/tests/Signup.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, fireEvent, waitFor, getByTestId, getAllByTestId } from '@testing-library/react';
 import axios from 'axios';
-import { MemoryRouter, createMemoryRouter } from 'react-router';
+import { MemoryRouter } from 'react-router';
 import Signup from '../pages/Signup';
 
 describe('Signup Component', () => {
@@ -17,7 +17,7 @@ describe('Signup Component', () => {
   });
 
   it('toggles password visibility', () => {
-    const { getByPlaceholderText, getAllByRole } = render(<MemoryRouter><Signup /></MemoryRouter>);
+    const { getByPlaceholderText } = render(<MemoryRouter><Signup /></MemoryRouter>);
 
     const passwordInput = getByPlaceholderText('session.password');
     const confirmPasswordInput = getByPlaceholderText('session.confirm_password');
@@ -35,7 +35,7 @@ describe('Signup Component', () => {
     axiosMock.mockResolvedValueOnce({ status: 202 }); // Accepted status code
 
     // Render the Signup component
-    const { getByPlaceholderText, getByText } = render(<MemoryRouter><Signup /></MemoryRouter>);
+    const { getByPlaceholderText } = render(<MemoryRouter><Signup /></MemoryRouter>);
 
     // Get form elements and submit button by their text and placeholder values
     const emailInput = getByPlaceholderText('session.email');