fix: removing repeated code creating a new component for the error me…

…ssages.
Arquisoft · Mar 25, 2024 · 4acdcd2 · 4acdcd2
1 parent 23a8f14
commit 4acdcd2
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 23 deletions.
diff --git a/webapp/src/components/ErrorMessageAlert.jsx b/webapp/src/components/ErrorMessageAlert.jsx
@@ -0,0 +1,20 @@
+import React from "react";
+import { Alert, AlertIcon, AlertTitle, AlertDescription } from "@chakra-ui/react";
+
+const ErrorMessageAlert = ({ errorMessage, t, errorWhere }) => {
+    return (
+        errorMessage && (
+            <Alert status='error' rounded="1rem" margin={"1vh 0vw"}>
+                <AlertIcon />
+                <AlertTitle>
+                    {errorMessage && errorMessage.type === "unknown"
+                        ? t(errorWhere)
+                        : errorMessage.type}
+                </AlertTitle>
+                <AlertDescription>{errorMessage.message}</AlertDescription>
+            </Alert>
+        )
+    );
+};
+
+export default ErrorMessageAlert;
diff --git a/webapp/src/pages/Login.jsx b/webapp/src/pages/Login.jsx
@@ -3,12 +3,13 @@ import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { FaLock, FaAddressCard } from "react-icons/fa";
 import { Center } from "@chakra-ui/layout";
-import { Heading, Input, InputGroup, Stack, InputLeftElement, chakra, Box, Avatar, FormControl, InputRightElement, IconButton, Alert, AlertIcon, AlertTitle, AlertDescription } from "@chakra-ui/react";
+import { Heading, Input, InputGroup, Stack, InputLeftElement, chakra, Box, Avatar, FormControl, InputRightElement, IconButton} from "@chakra-ui/react";
 import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons';
 import ButtonEf from '../components/ButtonEf';
 import '../styles/AppView.css';
 import { isUserLogged, login } from "../components/auth/AuthUtils";
-import { logoutUser } from "../components/game/Logout"; // Importa la función logoutUser
+import { logoutUser } from "../components/game/Logout";
+import ErrorMessageAlert from "../components/ErrorMessageAlert";
 
 export default function Login() {
 
@@ -72,14 +73,7 @@ export default function Login() {
             <Stack flexDir={"column"} mb="2" justifyContent="center" alignItems={"center"}>
                 <Avatar bg="blue.500" />
                 <Heading as="h2" color="blue.400">{t("common.login")}</Heading>
-                {
-                    errorMessage &&
-                    <Alert status='error' rounded="1rem" margin={"1vh 0vw"}>
-                        <AlertIcon />
-                        <AlertTitle>{(errorMessage && errorMessage.type === "unknown" ? t("error.login") : errorMessage.type)}</AlertTitle>
-                        <AlertDescription>{errorMessage.message}</AlertDescription>
-                    </Alert>
-                }
+                <ErrorMessageAlert errorMessage={errorMessage} t={t} errorWhere={"error.login"}/>
                 <Box minW={{ md: "400px" }} shadow="2xl">
                     <Stack spacing={4} p="1rem" backgroundColor="whiteAlpha.900" boxShadow="md" rounded="1rem">
                         <FormControl>

diff --git a/webapp/src/pages/Signup.jsx b/webapp/src/pages/Signup.jsx
@@ -1,14 +1,13 @@
 import { Center } from "@chakra-ui/layout";
-import { Heading, Input, InputGroup, Stack, InputLeftElement, 
-            chakra, Box, Avatar, FormControl, InputRightElement, 
-            FormHelperText, IconButton, Alert, AlertIcon, AlertTitle, AlertDescription } from "@chakra-ui/react";
+import { Heading, Input, InputGroup, Stack, InputLeftElement, chakra, Box, Avatar, FormControl, InputRightElement, FormHelperText, IconButton} from "@chakra-ui/react";
 import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons'
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { FaUserAlt, FaLock, FaAddressCard } from "react-icons/fa";
 import { register } from "../components/auth/AuthUtils";
 import ButtonEf from '../components/ButtonEf';
+import ErrorMessageAlert from "../components/ErrorMessageAlert";
 
 export default function Signup() {
     const [email, setEmail] = useState("");
@@ -71,14 +70,7 @@ export default function Signup() {
                 <Heading as="h2" color="blue.400">
                     {t("common.register")}
                 </Heading>
-                {
-                    errorMessage && 
-                    <Alert status='error'rounded="1rem" margin={"1vh 0vw"}>
-                        <AlertIcon />
-                        <AlertTitle>{(errorMessage && errorMessage.type === "unknown" ? t("error.register") : errorMessage.type)}</AlertTitle>
-                        <AlertDescription>{errorMessage.message}</AlertDescription>
-                    </Alert>
-                }
+                <ErrorMessageAlert errorMessage={errorMessage} t={t} errorWhere={"error.register"}/>
                 <Box minW={{ md: "400px" }} shadow="2xl">
                     <Stack spacing={4} p="1rem" backgroundColor="whiteAlpha.900" boxShadow="md" rounded="1rem">
                         <FormControl>

diff --git a/webapp/src/tests/Login.test.js b/webapp/src/tests/Login.test.js
@@ -5,7 +5,7 @@ import { MemoryRouter } from 'react-router';
 import Login from '../pages/Login';
 import { login as mockLogin } from '../components/auth/AuthUtils';
 import * as AuthUtils from '../components/auth/AuthUtils';
-import {logoutUser} from "components/game/Logout";
+import { logoutUser } from "../components/game/Logout";
 
 jest.mock('../components/auth/AuthUtils', () => ({
   isUserLogged: jest.fn(),
@@ -112,5 +112,5 @@ describe('Login Component', () => {
         expect.any(Function)
       );
     });
-  });
+  }); 
 });