feat: implemented the option to delete and numerous changes in general

src/components/ModalConfirmation.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalBody,
+  ModalHeader,
+  ModalCloseButton,
+  ModalFooter,
+  Box,
+  Alert,
+  AlertIcon,
+  Button,
+} from '@chakra-ui/react';
+
+import { ModalOptionsAndConfirType } from './types';
+
+export function ModalConfirmation({
+  isOpen,
+  onClose,
+  onDeleteBook,
+  name,
+  isPending,
+}: ModalOptionsAndConfirType) {
+  return (
+    <>
+      <Modal isOpen={isOpen} onClose={onClose} size='md'>
+        <ModalOverlay backdropFilter='blur(7px)' />
+        <ModalContent>
+          <ModalHeader>Eliminar</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            ¿Está seguro que desea eliminar{' '}
+            <Box as='span' fontWeight='bold'>
+              "{name}"
+            </Box>
+            ?
+            <Alert
+              mt='6'
+              status='warning'
+              variant='left-accent'
+              borderRightRadius='lg'
+              fontSize='sm'
+            >
+              <AlertIcon />
+              El libro será eliminado de manera permanente y no se podrá
+              recuperar.
+            </Alert>
+          </ModalBody>
+          <ModalFooter gap='3'>
+            <Button
+              w='full'
+              onClick={onDeleteBook}
+              fontWeight='normal'
+              fontSize='sm'
+              loadingText='Eliminando...'
+              isLoading={isPending}
+              _hover={{ color: 'none' }}
+            >
+              Eliminar
+            </Button>
+            <Button
+              w='full'
+              onClick={onClose}
+              fontSize='sm'
+              fontWeight='normal'
+              _hover={{ color: 'none' }}
+            >
+              Cancelar
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}

src/components/ModalOptions.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+// import { NavLink } from 'react-router-dom';
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalBody,
+  ModalFooter,
+  Button,
+  Flex,
+} from '@chakra-ui/react';
+
+import { ModalOptionsAndConfirType } from './types';
+
+export function ModalOptions({
+  isOpen,
+  onClose,
+  onDeleteBook,
+}: ModalOptionsAndConfirType) {
+  return (
+    <>
+      <Modal isOpen={isOpen} onClose={onClose} size='xs'>
+        <ModalOverlay backdropFilter='blur(7px)' />
+        <ModalContent>
+          <ModalBody py='5'>
+            <Flex direction='column' gap='2'>
+              <Button
+                bg='red.400'
+                fontWeight='normal'
+                fontSize='sm'
+                _hover={{ color: 'none' }}
+                onClick={onDeleteBook}
+              >
+                Eliminar
+              </Button>
+              <Button
+                fontWeight='normal'
+                fontSize='sm'
+                _hover={{ color: 'none' }}
+              >
+                Editar
+              </Button>
+              <Button
+                fontWeight='normal'
+                fontSize='sm'
+                _hover={{ color: 'none' }}
+              >
+                Copiar enlace
+              </Button>
+            </Flex>
+          </ModalBody>
+          <ModalFooter justifyContent='center'>
+            <Button
+              w='full'
+              onClick={onClose}
+              // fontWeight='normal'
+              fontSize='sm'
+              _hover={{ color: 'none' }}
+            >
+              Cancelar
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}

src/components/types.d.ts

@@ -141,6 +141,12 @@ interface SkeletonType {
   showTags?: boolean;
 }
 
+interface ModalOptionsAndConfirType extends DisclosureType {
+  onDeleteBook: () => any | void;
+  name?: string;
+  isPending?: boolean;
+}
+
 interface BooksSectionType {
   title: string;
   data?: string;
@@ -191,4 +197,5 @@ export type {
   MenuType,
   AuthContextType,
   AuthProviderType,
+  ModalOptionsAndConfirType,
 };

src/hooks/querys.ts

@@ -20,6 +20,7 @@ import {
   postBook,
   postRegister,
   getUserAndBooks,
+  deleteBook,
 } from '../services/api';
 import { logOut } from '../services/firebase/auth';
 import { keys } from '../utils/utils';
@@ -176,6 +177,25 @@ function useProfile(id: string | undefined, token: string | null) {
   });
 }
 
+function useDeleteBook() {
+  const navigate = useNavigate();
+
+  return useMutation({
+    mutationKey: ['deleteBook'],
+    mutationFn: (id: string | undefined) => deleteBook(id),
+    onSuccess: (data) => {
+      if (data) {
+        // return navigate(`/profile/${data.info.user.uid}`, { replace: true });
+        return navigate('/explore', { replace: true });
+      }
+    },
+    onError: async (error) => {
+      console.error('Error en el servidor:', error);
+      await logOut();
+    },
+  });
+}
+
 export {
   useMutatePost,
   useAllFilterOptions,
@@ -189,4 +209,5 @@ export {
   useMoreBooksAuthors,
   useUserRegister,
   useProfile,
+  useDeleteBook,
 };

src/pages/Book.tsx

@@ -13,18 +13,26 @@ import {
   useDisclosure,
   Icon,
 } from '@chakra-ui/react';
-import { FiArrowLeft, FiExternalLink, FiShare2 } from 'react-icons/fi';
+import {
+  FiArrowLeft,
+  FiExternalLink,
+  FiShare2,
+  FiMoreHorizontal,
+} from 'react-icons/fi';
 import { BsTag } from 'react-icons/bs';
 import LazyLoad from 'react-lazy-load';
 
-import { useBook } from '../hooks/querys';
+import { useBook, useDeleteBook } from '../hooks/querys';
 import { handleImageLoad } from '../utils/utils';
 import { MainHead } from '../components/Head';
 import { MyTag } from '../components/MyTag';
 import { ModalShare } from '../components/ModalShare';
 import { MyLink } from '../components/MyLink';
 import { BooksSection } from '../components/BooksSection';
 import { ImageZoom } from '../components/ImageZoom';
+import { ModalOptions } from '../components/ModalOptions';
+import { ModalConfirmation } from '../components/ModalConfirmation';
+import { useAuth } from '../store/AuthContext';
 
 const Categories = lazy(() => import('../components/Categories'));
 const MoreBooksAuthors = lazy(
@@ -36,16 +44,55 @@ const MoreBooks = lazy(() => import('../components/cards/MoreBooks'));
 export default function Book() {
   const shareUrl = window.location.href;
   const { pathUrl } = useParams();
+  const { currentUser } = useAuth();
   const grayColor = useColorModeValue('gray.200', 'gray.600');
   const bgGrayCategory = useColorModeValue('gray.100', 'gray.700');
   const gradientColor = useColorModeValue('white', '#1A202C');
   const infoTextColor = useColorModeValue('gray.600', 'gray.400');
   const bgButton = useColorModeValue('white', 'black');
   const navigate = useNavigate();
-  const { isOpen, onOpen, onClose } = useDisclosure();
+  const {
+    isOpen: isOpenOptions,
+    onOpen: onOpenOptions,
+    onClose: onCloseOptions,
+  } = useDisclosure();
+  const {
+    isOpen: isOpenConfirmation,
+    onOpen: onOpenConfirmation,
+    onClose: onCloseConfirmation,
+  } = useDisclosure();
+  const {
+    isOpen: isOpenShare,
+    onOpen: onOpenShare,
+    onClose: onCloseShare,
+  } = useDisclosure();
   let uiLink;
+  let btnMoreOptions;
 
   const { data } = useBook(pathUrl);
+  const { mutate, isPending } = useDeleteBook();
+
+  const isCurrentUserAuthor = currentUser && currentUser.uid === data.userId;
+
+  if (currentUser && isCurrentUserAuthor) {
+    btnMoreOptions = (
+      <Button
+        mt={{ base: 1, md: 5 }}
+        fontWeight='500'
+        size='sm'
+        title='Más Opciones'
+        onClick={onOpenOptions}
+      >
+        <Flex align='center' justify='center'>
+          <Icon as={FiMoreHorizontal} />
+        </Flex>
+      </Button>
+    );
+  }
+
+  function handleDeleteBook() {
+    mutate(data.id);
+  }
 
   function handleGoBack() {
     navigate(-1);
@@ -95,13 +142,14 @@ export default function Book() {
         description={data.synopsis}
         urlImage={data.image.url}
       />
-      <Box
+      <Flex
         w='full'
         maxW='1255px'
         m='auto'
         px={{ base: 5, xl: 0 }}
         pt='4'
         pb='5'
+        justify='space-between'
       >
         <Button
           mt={{ base: 1, md: 5 }}
@@ -115,7 +163,23 @@ export default function Book() {
             Volver
           </Flex>
         </Button>
-      </Box>
+        {btnMoreOptions}
+      </Flex>
+      <ModalOptions
+        isOpen={isOpenOptions}
+        onClose={onCloseOptions}
+        onDeleteBook={onOpenConfirmation}
+      />
+      <ModalConfirmation
+        isOpen={isOpenConfirmation}
+        name={data.title}
+        onDeleteBook={handleDeleteBook}
+        isPending={isPending}
+        onClose={() => {
+          onCloseConfirmation();
+          onCloseOptions();
+        }}
+      />
       <Flex
         w='full'
         maxW='1300px'
@@ -281,7 +345,7 @@ export default function Book() {
               w={{ base: '100%', md: '130px' }}
               bg={bgButton}
               fontWeight='normal'
-              onClick={onOpen}
+              onClick={onOpenShare}
               p='6'
               border='1px'
               borderColor='green.600'
@@ -296,8 +360,8 @@ export default function Book() {
             </Button>
           </Flex>
           <ModalShare
-            isOpen={isOpen}
-            onClose={onClose}
+            isOpen={isOpenShare}
+            onClose={onCloseShare}
             shareUrl={shareUrl}
             data={data.title}
           />

src/pages/Home.tsx

@@ -88,7 +88,7 @@ export function Home() {
             >
               <Link
                 w={{ base: '250px', md: '200px' }}
-                to='/register'
+                to='/login'
                 as={NavLink}
                 border='1px'
                 bg={bgButton}
@@ -101,7 +101,7 @@ export function Home() {
                   bg: 'green.600',
                 }}
               >
-                Regístrate
+                Ingresar
               </Link>
               <Link
                 w={{ base: '250px', md: '200px' }}