feat: authentication and profiling are being implemented

Franqsanz · Dec 22, 2023 · 3e13fb9 · 3e13fb9
1 parent 83ddb5f
commit 3e13fb9
Show file tree

Hide file tree

Showing 6 changed files with 247 additions and 124 deletions.
diff --git a/src/components/nav/DesktopNav.tsx b/src/components/nav/DesktopNav.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { NavLink } from 'react-router-dom';
+import { NavLink, useNavigate } from 'react-router-dom';
 import { BsSun } from 'react-icons/bs';
 import { RiMoonLine } from 'react-icons/ri';
 import {
@@ -12,42 +12,85 @@ 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 { 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;
 
-  // let user = false;
-  // const [user, setUser] = useState(null);
-  // console.log(user);
-
-  // useEffect(() => {
-  //   fetch('http://localhost:9090/auth/login/check-user', {
-  //     method: 'GET',
-  //     // credentials: 'include',
-  //     headers: {
-  //       Accept: 'application/json',
-  //       'Content-Type': 'application/json',
-  //       // 'Access-Control-Allow-Credentials': true,
-  //     },
-  //   })
-  //     .then((response) => {
-  //       if (response.status === 200) return response.json();
-  //       throw new Error('authentication has been failed!');
-  //     })
-  //     .then((resObject) => {
-  //       // setUser(resObject.user);
-  //     })
-  //     .catch((err) => {
-  //       console.log(err);
-  //     });
-  // }, []);
+  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>
+    );
+  }
 
   return (
     <>
@@ -138,6 +181,7 @@ export function DesktopNav() {
               <Button
                 onClick={toggleColorMode}
                 bg='none'
+                ml='1'
                 _active={{ bg: 'none', outline: '2px solid #4299E1' }}
                 _hover={{ color: 'green.500' }}
               >
@@ -147,6 +191,7 @@ export function DesktopNav() {
                   <RiMoonLine size='20' />
                 )}
               </Button>
+              {profileMenu}
             </List>
           </Box>
         </Flex>

diff --git a/src/hooks/querys.ts b/src/hooks/querys.ts
@@ -16,6 +16,7 @@ import {
   getMoreBooks,
   getRelatedBooks,
   getMoreBooksAuthors,
+  getUserAndBooks,
   postBook,
 } from '../services/api';
 import { keys } from '../utils/utils';
@@ -144,6 +145,14 @@ function useBook(pathUrl: string | undefined) {
   });
 }
 
+function useProfile(id: string | undefined) {
+  return useSuspenseQuery({
+    queryKey: ['profile', id],
+    queryFn: () => getUserAndBooks(id),
+    gcTime: 3000,
+  });
+}
+
 export {
   useMutatePost,
   useAllFilterOptions,
@@ -155,4 +164,5 @@ export {
   useMoreBooks,
   useRelatedBooks,
   useMoreBooksAuthors,
+  useProfile,
 };
diff --git a/src/pages/profile/Profile.tsx b/src/pages/profile/Profile.tsx
@@ -1,109 +1,72 @@
 import React from 'react';
 import { useParams } from 'react-router-dom';
-import { Box, Container, Flex } from '@chakra-ui/react';
+import { Box, Flex, Image } from '@chakra-ui/react';
+
+import { MySimpleGrid } from '../../components/MySimpleGrid';
+import { Card } from '../../components/cards/Card';
+import { Aside } from '../../components/Aside';
+import { MainHead } from '../../components/Head';
+import ResultLength from '../../components/ResultLength';
+import { useAuth } from '../../store/AuthContext';
+import { useProfile } from '../../hooks/querys';
 
 export default function Profile() {
-  const { user } = useParams();
+  const { userId } = useParams();
+  const { data } = useProfile(userId);
+  const { currentUser } = useAuth();
 
   return (
     <>
-      <Flex justify='center' align='center' h='300px' border='1px'>
-        <Box as='h1' fontSize='3xl' textAlign='center'>
-          {user}
+      <MainHead
+        title={`${currentUser?.displayName as string} | XBuniverse`}
+        urlImage={currentUser?.photoURL as string}
+      />
+      <Flex justify='center' align='center' direction='column' h='300px'>
+        <Image src={currentUser?.photoURL as string} borderRadius='10' />
+        <Box as='h1' fontSize='3xl' mt='3' textAlign='center'>
+          {currentUser?.displayName}
         </Box>
       </Flex>
-      <Flex gap='3' p='7' justify='center'>
-        <Flex
-          flex='1'
-          bg='gray.50'
-          justify='center'
-          rounded='lg'
-          boxShadow='xl'
-          border='1px'
-        >
-          <Box p='5' textAlign='center'>
-            Opciones
-          </Box>
-        </Flex>
-        <Flex flex='3' gap='5' justify='end' flexWrap='wrap'>
-          <Box
-            boxShadow='xl'
-            rounded='lg'
-            w='270px'
-            h='270px'
-            border='1px'
-          ></Box>
-          <Box
-            boxShadow='xl'
-            rounded='lg'
-            w='270px'
-            h='270px'
-            border='1px'
-          ></Box>
-          <Box
-            boxShadow='xl'
-            rounded='lg'
-            w='270px'
-            h='270px'
-            border='1px'
-          ></Box>
-          <Box
-            boxShadow='xl'
-            rounded='lg'
-            w='270px'
-            h='270px'
-            border='1px'
-          ></Box>
-          <Box
-            boxShadow='xl'
-            rounded='lg'
-            w='270px'
-            h='270px'
-            border='1px'
-          ></Box>
-          <Box
-            boxShadow='xl'
-            rounded='lg'
-            w='270px'
-            h='270px'
-            border='1px'
-          ></Box>
-          <Box
-            boxShadow='xl'
-            rounded='lg'
-            w='270px'
-            h='270px'
-            border='1px'
-          ></Box>
-          <Box
-            boxShadow='xl'
-            rounded='lg'
-            w='270px'
-            h='270px'
-            border='1px'
-          ></Box>
-          <Box
-            boxShadow='xl'
-            rounded='lg'
-            w='270px'
-            h='270px'
-            border='1px'
-          ></Box>
-          <Box
-            boxShadow='xl'
-            rounded='lg'
-            w='270px'
-            h='270px'
-            border='1px'
-          ></Box>
-          <Box
-            boxShadow='xl'
-            rounded='lg'
-            w='270px'
-            h='270px'
-            border='1px'
-          ></Box>
-        </Flex>
+      <Flex
+        direction={{ base: 'column', md: 'row' }}
+        maxW='1700px'
+        m='0 auto'
+        px={{ base: 5, md: 10, '2xl': 16 }}
+      >
+        <Aside>
+          <ResultLength data={data.books} />
+          {/* {aboutCategoriesUI}
+          {asideFilter}  */}
+        </Aside>
+        <MySimpleGrid>
+          {data.books.map(
+            ({
+              id,
+              category,
+              language,
+              title,
+              authors,
+              synopsis,
+              sourceLink,
+              pathUrl,
+              image,
+            }) => (
+              <React.Fragment key={id}>
+                <Card
+                  id={id}
+                  category={category}
+                  language={language}
+                  title={title}
+                  authors={authors}
+                  synopsis={synopsis}
+                  sourceLink={sourceLink}
+                  pathUrl={pathUrl}
+                  image={image}
+                />
+              </React.Fragment>
+            ),
+          )}
+        </MySimpleGrid>
       </Flex>
     </>
   );

diff --git a/src/services/api.ts b/src/services/api.ts
@@ -68,14 +68,22 @@ async function getAllFilterOptions() {
   return data;
 }
 
-async function deleteBook(id: any) {
+async function deleteBook(id: string | undefined) {
   const data = await fetchData(`${API_URL}/book/delete/${id}`, {
     method: 'DELETE',
   });
 
   return data;
 }
 
+// Usuarios
+
+async function getUserAndBooks(id: string | undefined) {
+  const data = await fetchData(`${API_URL}/my-books/${id}`);
+
+  return data;
+}
+
 export {
   getAllBooks,
   getAllSearchBooks,
@@ -88,4 +96,5 @@ export {
   getMoreBooksAuthors,
   postBook,
   deleteBook,
+  getUserAndBooks,
 };