From 6afb897ce9f14ba7b887ebbf9dd32935eb2d2607 Mon Sep 17 00:00:00 2001 From: Elliot Axel Noriega Date: Wed, 21 Aug 2024 18:34:12 -0600 Subject: [PATCH 1/4] =?UTF-8?q?Refactorizaci=C3=B3n=20de=20componentes=20h?= =?UTF-8?q?ijos=20de=20Layout=20de=20autenticacion,=20para=20evitar=20codi?= =?UTF-8?q?go=20repetido=20y=20que=20no=20se=20vuelva=20a=20renderizar=20e?= =?UTF-8?q?l=20componente?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- cosiap_frontend/src/App.jsx | 18 ++- .../layouts/LayoutBaseAuthenticator.jsx | 22 ++- .../common/utility/LoginRequiredRoutes.jsx | 2 +- .../src/components/users/Inicio.jsx | 4 +- .../src/components/users/Login/Login.jsx | 7 +- .../users/Password/ResetPassword.jsx | 51 +++---- .../users/Password/ResetPasswordForm.jsx | 5 +- .../components/users/Register/Register.jsx | 137 +++++++++--------- 8 files changed, 129 insertions(+), 117 deletions(-) diff --git a/cosiap_frontend/src/App.jsx b/cosiap_frontend/src/App.jsx index c676329..feef957 100644 --- a/cosiap_frontend/src/App.jsx +++ b/cosiap_frontend/src/App.jsx @@ -9,6 +9,7 @@ import Register from './components/users/Register/Register'; import ResetPassword from './components/users/Password/ResetPassword'; import Inicio from "./components/users/Inicio"; import { useState } from 'react'; +import LayoutBaseAuthenticator from './components/common/layouts/LayoutBaseAuthenticator'; function App() { @@ -28,17 +29,20 @@ function App() { - {/* Rutas publicas */} - } /> - } /> - } /> - } /> + {/* Rutas públicas */} + + {/* Componente del layout */} + }> + {/* Componentes hijos del layout autenticador */} + } /> + } /> + } /> + } /> + {/* Rutas protegidas */} }> - } /> - diff --git a/cosiap_frontend/src/components/common/layouts/LayoutBaseAuthenticator.jsx b/cosiap_frontend/src/components/common/layouts/LayoutBaseAuthenticator.jsx index 6ea0ecf..59464bf 100644 --- a/cosiap_frontend/src/components/common/layouts/LayoutBaseAuthenticator.jsx +++ b/cosiap_frontend/src/components/common/layouts/LayoutBaseAuthenticator.jsx @@ -1,5 +1,17 @@ +import { useNavigate, useLocation, Outlet } from "react-router-dom"; +import { useEffect, useState } from "react"; + +export default function LayoutBaseAuthenticator({children}) { + + // Contiene la informacion de la url actual + const location = useLocation(); + const [sectionURL, setSectionURL] = useState(""); + + useEffect(() => { + setSectionURL(location.pathname.split('/').filter(Boolean).pop()); + console.log(sectionURL) + }, [location]); // Si location cambia, se ejecutara el useEffect -export default function LayoutBaseAuthenticator({title, children}) { return ( <>
@@ -34,11 +46,15 @@ export default function LayoutBaseAuthenticator({title, children}) {

- {title} + { sectionURL === 'authentication' ? 'Iniciar sesión' : ( + sectionURL === 'register' ? 'Registrarse' : ( + sectionURL === 'reset_password' ? 'Restablecer contraseña' : '' + ) + ) }

- {children} + {/* Renderiza los componentes hijos */} diff --git a/cosiap_frontend/src/components/common/utility/LoginRequiredRoutes.jsx b/cosiap_frontend/src/components/common/utility/LoginRequiredRoutes.jsx index b921962..784e8ac 100644 --- a/cosiap_frontend/src/components/common/utility/LoginRequiredRoutes.jsx +++ b/cosiap_frontend/src/components/common/utility/LoginRequiredRoutes.jsx @@ -5,7 +5,7 @@ export const LoginRequiredRoutes = () => { const { token } = useAutenticacion(); if (token === null) { - return ; + return ; } else if (token === undefined) { return null; // O un spinner de carga o marcador de posición } else { diff --git a/cosiap_frontend/src/components/users/Inicio.jsx b/cosiap_frontend/src/components/users/Inicio.jsx index 84cfb12..a874d22 100644 --- a/cosiap_frontend/src/components/users/Inicio.jsx +++ b/cosiap_frontend/src/components/users/Inicio.jsx @@ -95,9 +95,7 @@ export default function Inicio() { {/* Aqui se pondrian los componentes */}
-
- dsadssa -
+
diff --git a/cosiap_frontend/src/components/users/Login/Login.jsx b/cosiap_frontend/src/components/users/Login/Login.jsx index 2c90335..36a3f67 100644 --- a/cosiap_frontend/src/components/users/Login/Login.jsx +++ b/cosiap_frontend/src/components/users/Login/Login.jsx @@ -8,13 +8,13 @@ export function Login( {setViewPageLoader} ) { const navigate = useNavigate(); return ( - + <>

¿Haz olvidado tu contraseña?

navigate('reset_password')}> - Reestablecer contraseña + Restablecer contraseña

¿Aun no tienes cuenta? @@ -22,6 +22,7 @@ export function Login( {setViewPageLoader} ) {

navigate('register')}> Registrate

- + + ); } \ No newline at end of file diff --git a/cosiap_frontend/src/components/users/Password/ResetPassword.jsx b/cosiap_frontend/src/components/users/Password/ResetPassword.jsx index 951c8a5..69c72de 100644 --- a/cosiap_frontend/src/components/users/Password/ResetPassword.jsx +++ b/cosiap_frontend/src/components/users/Password/ResetPassword.jsx @@ -45,33 +45,30 @@ export default function ResetPassword({ setViewPageLoader }){ } return ( - -
- { - viewChangePasswordForm ? ( - <> - - - ) : ( - <> -
-

- Se le enviara un correo para restablecer la contraseña -

-
- - - ) - } -
- - +
+ { + viewChangePasswordForm ? ( + <> + + + ) : ( + <> +
+

+ Se le enviara un correo para restablecer la contraseña +

+
+ + + ) + } +
); } \ No newline at end of file diff --git a/cosiap_frontend/src/components/users/Password/ResetPasswordForm.jsx b/cosiap_frontend/src/components/users/Password/ResetPasswordForm.jsx index cc3f253..0543fe6 100644 --- a/cosiap_frontend/src/components/users/Password/ResetPasswordForm.jsx +++ b/cosiap_frontend/src/components/users/Password/ResetPasswordForm.jsx @@ -21,16 +21,15 @@ export default function ResetPasswordForm({ setViewPageLoader }){ const handleFormSubmission = async (data) => { setViewPageLoader(true); - try { const response = await api.usuarios.restablecerPassword(data); console.log('Password reset succesfuly: ', response.data); - setEmailSent(true); + } catch (error) { console.error('Password reset failed: ', error); console.log(error.response.data); - setFormError(error.response.data); } + setEmailSent(true); setViewPageLoader(false); } return ( diff --git a/cosiap_frontend/src/components/users/Register/Register.jsx b/cosiap_frontend/src/components/users/Register/Register.jsx index 4ecbdae..d0501ca 100644 --- a/cosiap_frontend/src/components/users/Register/Register.jsx +++ b/cosiap_frontend/src/components/users/Register/Register.jsx @@ -48,77 +48,74 @@ export default function Register({setViewPageLoader} ) { } return ( - - - { - verifySuccess === null ? ( - !sentEmail ? ( - <> - -

- Iniciar sesión -

- - ) : ( - <> -
-
-

¡Correo de confirmación
enviado!

-
-
-

Se ha enviado un correo
electrónico para confirmar la
creación de tu cuenta.

-
-
-
- -
- - ) - ) : - ( - <> -
-
-

- {verifySuccess ? ( - <> - ¡Haz confirmado la - creación de tu cuenta! - - ) : ( - <> - Lo sentimos, tu token - de verificación ha expirado. - - )} -

-
-
-

- {verifySuccess ? ( - <> - Ahora puedes iniciar sesión con
- tus credenciales - - ) : ( - <> - Realiza de nuevo tu registro para
- un nuevo enlace de verificación - - )} -

-
+ + verifySuccess === null ? ( + !sentEmail ? ( + <> + +

+ Iniciar sesión +

+ + ) : ( + <> +
+
+

¡Correo de confirmación
enviado!

-
- +
+

Se ha enviado un correo
electrónico para confirmar la
creación de tu cuenta.

- - ) - } - +
+
+ +
+ + ) + ) : + ( + <> +
+
+

+ {verifySuccess ? ( + <> + ¡Haz confirmado la + creación de tu cuenta! + + ) : ( + <> + Lo sentimos, tu token + de verificación ha expirado. + + )} +

+
+
+

+ {verifySuccess ? ( + <> + Ahora puedes iniciar sesión con
+ tus credenciales + + ) : ( + <> + Realiza de nuevo tu registro para
+ un nuevo enlace de verificación + + )} +

+
+
+
+ +
+ + ) + ); } \ No newline at end of file -- GitLab From 6451590bd9479d83ad0e8046fd06ed64bf62bf27 Mon Sep 17 00:00:00 2001 From: Elliot Axel Noriega Date: Thu, 22 Aug 2024 20:51:14 -0600 Subject: [PATCH 2/4] Correccion de detalles --- .../src/components/users/Inicio.jsx | 104 ------------------ .../components/users/Register/Register.jsx | 11 +- .../users/Register/RegisterForm.jsx | 1 - 3 files changed, 3 insertions(+), 113 deletions(-) delete mode 100644 cosiap_frontend/src/components/users/Inicio.jsx diff --git a/cosiap_frontend/src/components/users/Inicio.jsx b/cosiap_frontend/src/components/users/Inicio.jsx deleted file mode 100644 index a874d22..0000000 --- a/cosiap_frontend/src/components/users/Inicio.jsx +++ /dev/null @@ -1,104 +0,0 @@ -import { useState, useEffect, useRef } from "react"; -import Navbar from "@/components/common/layouts/LayoutsNavigation/Navbar/Navbar"; -import Sidebar from "@/components/common/layouts/LayoutsNavigation/Sidebar/Sidebar"; -import SettingsToggle from "@/components/common/layouts/LayoutsNavigation/SettingsToggle"; -import Settings from "@/components/common/layouts/LayoutsNavigation/Settings"; - -const linksItemsSolicitante = [ - { - nameIcon: 'library_books', - nameItem: 'Modalidades', - isSelected: true - }, - { - nameIcon: 'history', - nameItem: 'Historial', - isSelected: false - }, - { - nameIcon: 'mark_as_unread', - nameItem: 'Recepción de ayuda', - isSelected: false - }, - { - nameIcon: 'help', - nameItem: 'Ayuda', - isSelected: false, - subMenu: [ - { - nameItem: 'Manual', - isSelected: false - }, - { - nameItem: 'Chat', - isSelected: false - } - ] - }, - - { - nameIcon: 'account_circle', - nameItem: 'Perfil', - isSelected: false - } -]; - - - -export default function Inicio() { - // Estado para controlar la visibilidad de los menus de pantalla chicas - const [viewMenu, setViewMenu] = useState(false); - const [selectedNav, setSelectedNav] = useState("sidebar"); - const [viewSettings, setViewSettings] = useState(false); - - const settingsRef = useRef(); - const settingsToggleRef = useRef(); - - // Efecto para manejar los clics fuera de settings - useEffect(() => { - function handleClickOutside(event) { - // Cierra el menú si se hace clic fuera de él y de su botón de toggle - if (settingsRef.current && !settingsRef.current.contains(event.target) && - settingsToggleRef.current && !settingsToggleRef.current.contains(event.target)) { - setViewSettings(false); - } - } - // Añade el event listener para detectar clics fuera de los elementos - document.addEventListener("mousedown", handleClickOutside); - // Remueve el event listener cuando el componente se desmonte - return () => { - document.removeEventListener("mousedown", handleClickOutside); - }; - }, []); - - return ( - <> -
- - {selectedNav === 'navbar' && ( - - )} - {selectedNav === 'sidebar' && ( - - )} - -
-
setViewSettings(!viewSettings)} - > - -
- {viewSettings && ( - - )} - - {/* Aqui se pondrian los componentes */} -
- -
-
-
- - ); -} \ No newline at end of file diff --git a/cosiap_frontend/src/components/users/Register/Register.jsx b/cosiap_frontend/src/components/users/Register/Register.jsx index d0501ca..0da1add 100644 --- a/cosiap_frontend/src/components/users/Register/Register.jsx +++ b/cosiap_frontend/src/components/users/Register/Register.jsx @@ -42,18 +42,13 @@ export default function Register({setViewPageLoader} ) { } } - - function navigateLogin(){ - navigate('/authentication'); - } - return ( verifySuccess === null ? ( !sentEmail ? ( <> -

+

navigate('/authentication')}> Iniciar sesión

@@ -68,7 +63,7 @@ export default function Register({setViewPageLoader} ) {
-
@@ -110,7 +105,7 @@ export default function Register({setViewPageLoader} ) {
-
diff --git a/cosiap_frontend/src/components/users/Register/RegisterForm.jsx b/cosiap_frontend/src/components/users/Register/RegisterForm.jsx index 153e0db..9c51347 100644 --- a/cosiap_frontend/src/components/users/Register/RegisterForm.jsx +++ b/cosiap_frontend/src/components/users/Register/RegisterForm.jsx @@ -1,7 +1,6 @@ import { RegisterInput } from "./RegisterInput"; import { RegisterInputPassword } from "./RegisterInputPassword"; import { useState } from "react"; -import { ErrorDisplay } from '@/components/common/ui/ErrorDisplay'; import { useForm } from "react-hook-form"; import { yupResolver } from "@hookform/resolvers/yup"; import { RegisterValidationSchema } from "@/components/FormsValidations"; -- GitLab From 5a9f3859275d767ce1a7ed8cea0e3a11d8bbefc3 Mon Sep 17 00:00:00 2001 From: Elliot Axel Noriega Date: Thu, 22 Aug 2024 20:53:01 -0600 Subject: [PATCH 3/4] =?UTF-8?q?Reestructuraci=C3=B3n=20de=20layaout=20de?= =?UTF-8?q?=20navegaci=C3=B3n=20haciendolo=20un=20componente=20padre=20y?= =?UTF-8?q?=20cambio=20de=20variable=20isSelected=20de=20las=20variables?= =?UTF-8?q?=20dependiendo=20de=20la=20url?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- cosiap_frontend/src/components/Inicio.jsx | 10 ++ .../layouts/LayoutBaseAuthenticator.jsx | 5 +- .../common/layouts/LayoutBaseNavigation.jsx | 129 ++++++++++++++++++ .../LayoutsNavigation/Navbar/MobileMenu.jsx | 17 ++- .../LayoutsNavigation/Navbar/NavbarBrand.jsx | 8 +- .../LayoutsNavigation/Navbar/NavbarLinks.jsx | 17 ++- .../layouts/LayoutsNavigation/Settings.jsx | 12 +- .../LayoutsNavigation/Sidebar/Sidebar.jsx | 5 +- .../Sidebar/SidebarBrand.jsx | 8 +- .../Sidebar/SidebarLinks.jsx | 16 ++- 10 files changed, 199 insertions(+), 28 deletions(-) create mode 100644 cosiap_frontend/src/components/Inicio.jsx create mode 100644 cosiap_frontend/src/components/common/layouts/LayoutBaseNavigation.jsx diff --git a/cosiap_frontend/src/components/Inicio.jsx b/cosiap_frontend/src/components/Inicio.jsx new file mode 100644 index 0000000..16cacd1 --- /dev/null +++ b/cosiap_frontend/src/components/Inicio.jsx @@ -0,0 +1,10 @@ + +export default function Inicio() { + + + return ( + <> + + + ); +} \ No newline at end of file diff --git a/cosiap_frontend/src/components/common/layouts/LayoutBaseAuthenticator.jsx b/cosiap_frontend/src/components/common/layouts/LayoutBaseAuthenticator.jsx index 59464bf..008eab3 100644 --- a/cosiap_frontend/src/components/common/layouts/LayoutBaseAuthenticator.jsx +++ b/cosiap_frontend/src/components/common/layouts/LayoutBaseAuthenticator.jsx @@ -1,15 +1,15 @@ -import { useNavigate, useLocation, Outlet } from "react-router-dom"; +import { useLocation, Outlet } from "react-router-dom"; import { useEffect, useState } from "react"; export default function LayoutBaseAuthenticator({children}) { // Contiene la informacion de la url actual const location = useLocation(); + const [sectionURL, setSectionURL] = useState(""); useEffect(() => { setSectionURL(location.pathname.split('/').filter(Boolean).pop()); - console.log(sectionURL) }, [location]); // Si location cambia, se ejecutara el useEffect return ( @@ -46,6 +46,7 @@ export default function LayoutBaseAuthenticator({children}) {

+ {/* Dependiendo de la url es el titulo de la sección */} { sectionURL === 'authentication' ? 'Iniciar sesión' : ( sectionURL === 'register' ? 'Registrarse' : ( sectionURL === 'reset_password' ? 'Restablecer contraseña' : '' diff --git a/cosiap_frontend/src/components/common/layouts/LayoutBaseNavigation.jsx b/cosiap_frontend/src/components/common/layouts/LayoutBaseNavigation.jsx new file mode 100644 index 0000000..1b5bca0 --- /dev/null +++ b/cosiap_frontend/src/components/common/layouts/LayoutBaseNavigation.jsx @@ -0,0 +1,129 @@ +import { useState, useEffect, useRef } from "react"; +import { useLocation, Outlet } from "react-router-dom"; +import Navbar from "@/components/common/layouts/LayoutsNavigation/Navbar/Navbar"; +import Sidebar from "@/components/common/layouts/LayoutsNavigation/Sidebar/Sidebar"; +import SettingsToggle from "@/components/common/layouts/LayoutsNavigation/SettingsToggle"; +import Settings from "@/components/common/layouts/LayoutsNavigation/Settings"; + + +const linksItemsSolicitante = [ + { + nameIcon: 'library_books', + nameItem: 'Modalidades', + navigate: '/modalidades', + isSelected: false + }, + { + nameIcon: 'history', + nameItem: 'Historial', + navigate: '/historial', + isSelected: false + }, + { + nameIcon: 'mark_as_unread', + nameItem: 'Recepción de ayuda', + navigate: '/recepcion_ayuda', + isSelected: false + }, + { + nameIcon: 'help', + nameItem: 'Ayuda', + isSelected: false, + subMenu: [ + { + nameItem: 'Manual', + isSelected: false, + navigate: '/ayuda/manual', + } + ] + }, + { + nameIcon: 'account_circle', + nameItem: 'Perfil', + navigate: '/perfil', + isSelected: false + } +]; + +export default function LayoutBaseNavigation() { + const [viewMenu, setViewMenu] = useState(false); + const [selectedNav, setSelectedNav] = useState("vertical"); + const [viewSettings, setViewSettings] = useState(false); + const [links, setLinks] = useState([...linksItemsSolicitante]); + + const settingsRef = useRef(); + const settingsToggleRef = useRef(); + + const location = useLocation(); + const [sectionURL, setSectionURL] = useState(""); + + useEffect(() => { + setSectionURL(location.pathname.split('/').filter(Boolean).pop()); + }, [location]); + + useEffect(() => { + const updatedLinks = links.map(link => { + // Verificación directa basada en 'nameItem' y 'navigate' + const isSelected = link.nameItem.toLowerCase() === sectionURL.toLowerCase() || + link.navigate?.split('/').pop().toLowerCase() === sectionURL.toLowerCase(); + + // Actualizar submenú si existe + const updatedSubMenu = link.subMenu?.map(sub => ({ + ...sub, + isSelected: sub.nameItem.toLowerCase() === sectionURL.toLowerCase() || + sub.navigate?.split('/').pop().toLowerCase() === sectionURL.toLowerCase() + })); + + // Marcar padre si algún subelemento está seleccionado + const isParentSelected = updatedSubMenu?.some(sub => sub.isSelected); + + return { + ...link, + isSelected: isSelected || isParentSelected, + ...(updatedSubMenu && { subMenu: updatedSubMenu }) + }; + }); + + setLinks(updatedLinks); + }, [sectionURL]); + + useEffect(() => { + function handleClickOutside(event) { + if (settingsRef.current && !settingsRef.current.contains(event.target) && + settingsToggleRef.current && !settingsToggleRef.current.contains(event.target)) { + setViewSettings(false); + } + } + document.addEventListener("mousedown", handleClickOutside); + return () => { + document.removeEventListener("mousedown", handleClickOutside); + }; + }, []); + + return ( +
+ {selectedNav === 'horizontal' && ( + + )} + {selectedNav === 'vertical' && ( + + )} + +
+
setViewSettings(!viewSettings)} + > + +
+ {viewSettings && ( + + )} + +
+ +
+
+
+ ); +} diff --git a/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Navbar/MobileMenu.jsx b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Navbar/MobileMenu.jsx index fd5ac53..c0f4107 100644 --- a/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Navbar/MobileMenu.jsx +++ b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Navbar/MobileMenu.jsx @@ -1,6 +1,9 @@ import { useState } from "react"; +import { useNavigate } from "react-router-dom"; export default function MobileMenu({ menuRef, linksItems }) { + const navigate = useNavigate(); + // useState para manejar la visibilidad del submenú de "Ayuda" const [viewSubMenuHelp, setViewSubMenuHelp] = useState(false); @@ -15,8 +18,8 @@ export default function MobileMenu({ menuRef, linksItems }) { linksItems.map((item) => ( <> {/* Enlace principal de cada ítem del menú */} - @@ -72,13 +77,17 @@ export default function MobileMenu({ menuRef, linksItems }) { // Componente para renderizar el submenú de "Ayuda" function SubMenuAyuda({ viewSubMenuHelp, items }) { + const navigate = useNavigate(); + return ( // Si el submenú está visible, mapea sus ítems para generar enlaces viewSubMenuHelp && ( items.map((item) => ( + ${item.isSelected ? 'cursor-pointer text-[var(--principal-mf)] border-l-4 border-[var(--principal-f)]' + : 'cursor-pointer hover:text-[var(--principal-mf)] hover:border-l-4 hover:border-[var(--principal-f)]'}`} + onClick={() => navigate(item.navigate)} + > {item.nameItem} {/* Nombre del ítem del submenú */} diff --git a/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Navbar/NavbarBrand.jsx b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Navbar/NavbarBrand.jsx index f78b21a..72c3dff 100644 --- a/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Navbar/NavbarBrand.jsx +++ b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Navbar/NavbarBrand.jsx @@ -1,9 +1,15 @@ +import { useNavigate } from "react-router-dom"; + + export default function NavbarBrand() { + const navigate = useNavigate(); + return ( <> {/* Contenedor del texto "COSIAP" */}
-
+
navigate('/inicio')}>
cosiap diff --git a/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Navbar/NavbarLinks.jsx b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Navbar/NavbarLinks.jsx index ddbef7d..0e70a2a 100644 --- a/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Navbar/NavbarLinks.jsx +++ b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Navbar/NavbarLinks.jsx @@ -1,6 +1,8 @@ import { useState, useEffect, useRef } from "react"; +import { useNavigate } from "react-router-dom"; export default function NavbarLinks({ linksItems, notificationsToggle }) { + const navigate = useNavigate(); // Estado para controlar la visibilidad del submenú de ayuda const [viewMenuHelp, setViewMenuHelp] = useState(false); @@ -39,16 +41,17 @@ export default function NavbarLinks({ linksItems, notificationsToggle }) { linksItems ? ( linksItems.map((item, key) => (
- { // Al hacer clic en 'Ayuda', alternar la visibilidad del submenú if (item.nameItem === 'Ayuda') { setViewMenuHelp(!viewMenuHelp); + }else{ + navigate(item.navigate) } }} > @@ -90,10 +93,10 @@ export default function NavbarLinks({ linksItems, notificationsToggle }) { // Verifica si 'Ayuda' tiene un submenú y lo renderiza linksItems.find(item => item.nameItem === 'Ayuda').subMenu ? ( linksItems.find(item => item.nameItem === 'Ayuda').subMenu.map((subItem, key) => ( -
+
navigate(subItem.navigate)} > {subItem.nameItem} diff --git a/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Settings.jsx b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Settings.jsx index a8e39f9..44c4898 100644 --- a/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Settings.jsx +++ b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Settings.jsx @@ -9,19 +9,19 @@ export default function Settings( {settingsRef, selectedNav, setSelectedNav} ){
diff --git a/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Sidebar/Sidebar.jsx b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Sidebar/Sidebar.jsx index 45deddd..e4fb6de 100644 --- a/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Sidebar/Sidebar.jsx +++ b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Sidebar/Sidebar.jsx @@ -1,4 +1,5 @@ import { useState, useRef, useEffect } from "react"; +import { useNavigate } from "react-router-dom"; import MobileMenuToggle from "@/components/common/layouts/LayoutsNavigation/MobileMenuToggle"; import NotificationToggle from "@/components/common/layouts/LayoutsNavigation/NotificationToggle"; import SidebarLinks from "@/components/common/layouts/LayoutsNavigation/Sidebar/SidebarLinks"; @@ -7,6 +8,7 @@ import Notifications from "@/components/common/layouts/LayoutsNavigation/Sidebar import MobileMenu from "@/components/common/layouts/LayoutsNavigation/Sidebar/MobileMenu"; export default function Sidebar( {linksItems, viewMenu, setViewMenu} ){ + const navigate = useNavigate(); // Estado para controlar la visibilidad de las notificaciones const [viewNotifications, setViewNotifications] = useState(false); @@ -55,7 +57,8 @@ export default function Sidebar( {linksItems, viewMenu, setViewMenu} ){ {/* Contenedor de parte superior */}
-
+
navigate('/inicio')}>
cosiap diff --git a/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Sidebar/SidebarBrand.jsx b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Sidebar/SidebarBrand.jsx index f466461..3dde7c5 100644 --- a/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Sidebar/SidebarBrand.jsx +++ b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Sidebar/SidebarBrand.jsx @@ -1,6 +1,10 @@ +import { useNavigate } from "react-router-dom"; + export default function SidebarBrand(){ + const navigate = useNavigate(); + return ( - <> +
navigate('/inicio')} className="cursor-pointer">
@@ -9,6 +13,6 @@ export default function SidebarBrand(){ cosiap
- +
); } \ No newline at end of file diff --git a/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Sidebar/SidebarLinks.jsx b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Sidebar/SidebarLinks.jsx index 171e707..d5b456f 100644 --- a/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Sidebar/SidebarLinks.jsx +++ b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Sidebar/SidebarLinks.jsx @@ -1,16 +1,17 @@ import { useState } from "react"; +import { useNavigate } from "react-router-dom"; export default function SidebarLinks( {linksItems} ) { + const navigate = useNavigate(); const [viewSubMenuHelp, setViewSubMenuHelp] = useState(false); - return ( // Si existe linksItems, mapea cada uno para generar enlaces linksItems ? ( linksItems.map((item) => ( <> {/* Enlace principal de cada ítem del menú */} - @@ -53,13 +56,16 @@ export default function SidebarLinks( {linksItems} ) { // Componente para renderizar el submenú de "Ayuda" function SubMenuAyuda({ viewSubMenuHelp, items }) { + const navigate = useNavigate(); return ( // Si el submenú está visible, mapea sus ítems para generar enlaces viewSubMenuHelp && ( items.map((item) => ( - + navigate(item.navigate)} + > {item.nameItem} {/* Nombre del ítem del submenú */} -- GitLab From bd4b9e245df88eb2949ddc4f24a71006e19a3f33 Mon Sep 17 00:00:00 2001 From: Elliot Axel Noriega Date: Thu, 22 Aug 2024 21:14:39 -0600 Subject: [PATCH 4/4] Coreccion de detalle --- .../src/components/common/layouts/LayoutBaseNavigation.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/cosiap_frontend/src/components/common/layouts/LayoutBaseNavigation.jsx b/cosiap_frontend/src/components/common/layouts/LayoutBaseNavigation.jsx index 1b5bca0..1c1cae1 100644 --- a/cosiap_frontend/src/components/common/layouts/LayoutBaseNavigation.jsx +++ b/cosiap_frontend/src/components/common/layouts/LayoutBaseNavigation.jsx @@ -109,7 +109,7 @@ export default function LayoutBaseNavigation() { )} -
+
setViewSettings(!viewSettings)} @@ -120,7 +120,7 @@ export default function LayoutBaseNavigation() { )} -
+
-- GitLab