chore: improvements in profiling, authentication and refactoring

src/components/nav/DesktopNav.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useState, useRef } from 'react';
-import { NavLink, useNavigate } from 'react-router-dom';
+import React from 'react';
+import { NavLink } from 'react-router-dom';
 import { BsSun } from 'react-icons/bs';
 import { RiMoonLine } from 'react-icons/ri';
 import {
@@ -12,83 +12,28 @@ import {
   useColorMode,
   useColorModeValue,
   useDisclosure,
-  Menu,
-  MenuButton,
-  MenuList,
-  MenuItem,
-  MenuGroup,
-  MenuDivider,
-  Image,
 } from '@chakra-ui/react';
-import { FaRegUserCircle } from 'react-icons/fa';
-import { FaPowerOff } from 'react-icons/fa6';
 
 import { navLink, accountLinks } from '../../data/links';
+import { MenuProfile } from '../../components/nav/menu/MenuProfile';
 import { InputSearch } from '../forms/filters/InputSearch';
 import { ModalFilter } from '../forms/filters/ModalFilter';
 import { useAuth } from '../../store/AuthContext';
-import { handleSignOut } from '../../services/firebase/auth';
 
 export function DesktopNav() {
   const { currentUser } = useAuth();
-  const navigate = useNavigate();
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { colorMode, toggleColorMode } = useColorMode();
   const bgNavColor = useColorModeValue('#ffffff8b', '#12121244');
   let profileMenu;
 
   if (currentUser) {
     profileMenu = (
-      <Menu isLazy>
-        <Button background='none' p='0' _hover={{ background: 'none' }} ml='2'>
-          <MenuButton
-            as={Box}
-            borderRadius='full'
-            _hover={{ border: '2px solid white' }}
-          >
-            <Image
-              src={currentUser?.photoURL as string}
-              w='35px'
-              h='35px'
-              borderRadius='full'
-            />
-          </MenuButton>
-        </Button>
-        <MenuList>
-          <MenuGroup
-            title={currentUser?.displayName as string}
-            fontSize='md'
-            textAlign='center'
-          >
-            <MenuItem
-              as={NavLink}
-              to={`/profile/${currentUser?.uid}`}
-              icon={<FaRegUserCircle size='17' />}
-              _hover={{ textDecoration: 'none' }}
-            >
-              Perfil
-            </MenuItem>
-          </MenuGroup>
-          <MenuDivider />
-          <MenuGroup>
-            <MenuItem
-              as={Button}
-              fontSize='md'
-              m='0'
-              fontWeight='normal'
-              borderRadius='0'
-              justifyContent='left'
-              icon={<FaPowerOff size='15px' />}
-              onClick={() => {
-                handleSignOut();
-                navigate('/');
-              }}
-            >
-              Cerrar Sessión
-            </MenuItem>
-          </MenuGroup>
-        </MenuList>
-      </Menu>
+      <MenuProfile
+        displayName={currentUser.displayName}
+        photoURL={currentUser.photoURL}
+        uid={currentUser.uid}
+      />
     );
   }
 
@@ -178,10 +123,11 @@ export function DesktopNav() {
                   </Link>
                 ))
               )} */}
+              {profileMenu}
               <Button
                 onClick={toggleColorMode}
                 bg='none'
-                ml='1'
+                ml='3'
                 _active={{ bg: 'none', outline: '2px solid #4299E1' }}
                 _hover={{ color: 'green.500' }}
               >
@@ -191,7 +137,6 @@ export function DesktopNav() {
                   <RiMoonLine size='20' />
                 )}
               </Button>
-              {profileMenu}
             </List>
           </Box>
         </Flex>

src/components/nav/menu/MenuProfile.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { NavLink, useNavigate } from 'react-router-dom';
+import {
+  Box,
+  Button,
+  useColorModeValue,
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem,
+  MenuGroup,
+  MenuDivider,
+  Image,
+} from '@chakra-ui/react';
+import { FaRegUserCircle } from 'react-icons/fa';
+import { FaPowerOff } from 'react-icons/fa6';
+import { logOut } from '../../../services/firebase/auth';
+
+interface MenuType {
+  displayName: string | null;
+  photoURL: string | null;
+  uid: string;
+}
+
+export function MenuProfile({ displayName, photoURL, uid }: MenuType) {
+  const navigate = useNavigate();
+  const colorBorder = useColorModeValue('black', 'white');
+
+  return (
+    <Menu isLazy>
+      <Button background='none' p='0' _hover={{ background: 'none' }} ml='4'>
+        <MenuButton
+          as={Box}
+          borderRadius='full'
+          _hover={{ border: `2px solid  ${colorBorder}` }}
+        >
+          <Image
+            src={photoURL as string}
+            w='35px'
+            h='35px'
+            borderRadius='full'
+          />
+        </MenuButton>
+      </Button>
+      <MenuList>
+        <MenuGroup
+          title={displayName as string}
+          fontSize='md'
+          textAlign='center'
+        >
+          <MenuItem
+            as={NavLink}
+            to={`/profile/${uid}`}
+            icon={<FaRegUserCircle size='15px' />}
+            _hover={{ textDecoration: 'none' }}
+          >
+            Perfil
+          </MenuItem>
+        </MenuGroup>
+        <MenuDivider />
+        <MenuGroup>
+          <MenuItem
+            as={Button}
+            fontSize='md'
+            m='0'
+            fontWeight='normal'
+            borderRadius='0'
+            justifyContent='left'
+            icon={<FaPowerOff size='15px' />}
+            onClick={() => {
+              logOut();
+              navigate('/', { replace: true });
+            }}
+          >
+            Cerrar Sessión
+          </MenuItem>
+        </MenuGroup>
+      </MenuList>
+    </Menu>
+  );
+}

src/pages/profile/Profile.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useParams } from 'react-router-dom';
-import { Box, Flex, Image } from '@chakra-ui/react';
+import { Box, Flex, Image, useColorModeValue } from '@chakra-ui/react';
 
 import { MySimpleGrid } from '../../components/MySimpleGrid';
 import { Card } from '../../components/cards/Card';
@@ -14,18 +14,28 @@ export default function Profile() {
   const { userId } = useParams();
   const { data } = useProfile(userId);
   const { currentUser } = useAuth();
+  const bgCover = useColorModeValue('gray.100', 'gray.700');
 
   return (
     <>
       <MainHead
         title={`${currentUser?.displayName as string} | XBuniverse`}
         urlImage={currentUser?.photoURL as string}
       />
-      <Flex justify='center' align='center' direction='column' h='300px'>
+      <Flex
+        justify='center'
+        align='center'
+        direction='column'
+        h='300px'
+        bg={bgCover}
+      >
         <Image src={currentUser?.photoURL as string} borderRadius='10' />
         <Box as='h1' fontSize='3xl' mt='3' textAlign='center'>
           {currentUser?.displayName}
         </Box>
+        <Box as='span' fontSize='sm' textAlign='center'>
+          {currentUser?.email}
+        </Box>
       </Flex>
       <Flex
         direction={{ base: 'column', md: 'row' }}

src/services/firebase/auth.tsx

@@ -4,7 +4,7 @@ import { Button, useColorModeValue } from '@chakra-ui/react';
 import { GrGoogle } from 'react-icons/gr';
 import { GoogleAuthProvider, signInWithPopup, signOut } from 'firebase/auth';
 
-import { logIn, logOut } from './config';
+import { logIn } from './config';
 
 const provider = new GoogleAuthProvider();
 
@@ -63,8 +63,12 @@ function SignIn() {
 //   }
 // }
 
-function handleSignOut() {
-  logOut();
+async function logOut() {
+  try {
+    await signOut(logIn);
+  } catch (error) {
+    console.error('Error al cerrar sesión:', error);
+  }
 }
 
-export { SignIn, handleSignOut };
+export { SignIn, logOut };

src/services/firebase/config.ts

@@ -1,6 +1,6 @@
 import { initializeApp } from 'firebase/app';
 // import { getAnalytics } from 'firebase/analytics';
-import { getAuth, signOut } from 'firebase/auth';
+import { getAuth } from 'firebase/auth';
 
 const firebaseConfig = {
   apiKey: import.meta.env.VITE_API_KEY,
@@ -16,11 +16,3 @@ const app = initializeApp(firebaseConfig);
 // const analytics = getAnalytics(app);
 
 export const logIn = getAuth(app);
-
-export async function logOut() {
-  try {
-    await signOut(logIn);
-  } catch (error) {
-    console.error('Error al cerrar sesión:', error);
-  }
-}