feat: the option to add to favorites has been implemented

Franqsanz · Aug 28, 2024 · d9c9a11 · d9c9a11
1 parent cd258bd
commit d9c9a11
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 8 deletions.
diff --git a/src/components/skeletons/SkeletonDBook.tsx b/src/components/skeletons/SkeletonDBook.tsx
@@ -15,7 +15,10 @@ export function SkeletonDetailsBook() {
         justify='space-between'
       >
         <Skeleton w='100px' h='30px' rounded='lg'></Skeleton>
-        <Skeleton w='40px' h='30px' rounded='lg'></Skeleton>
+        <Flex gap='2'>
+          <Skeleton w='40px' h='30px' rounded='lg'></Skeleton>
+          <Skeleton w='40px' h='30px' rounded='lg'></Skeleton>
+        </Flex>
       </Flex>
       <Flex
         w='full'

diff --git a/src/hooks/queries.ts b/src/hooks/queries.ts
@@ -21,6 +21,7 @@ import {
   postRegister,
   getCheckUser,
   getUserAndBooks,
+  updateFavoriteStatus,
   updateBook,
   deleteBook,
   deleteAccount,
@@ -189,6 +190,16 @@ function useBook(pathUrl: string | undefined, token?: string | null) {
   });
 }
 
+function useFavoriteBook(body: boolean) {
+  return useMutation({
+    mutationKey: ['favoriteBook'],
+    mutationFn: (id: string) => updateFavoriteStatus(id, body),
+    onError: (error) => {
+      console.error('Error updating favorite status');
+    },
+  });
+}
+
 // Usuarios
 
 function useUserRegister(body: any) {
@@ -295,6 +306,9 @@ export {
   useMostViewedBooks,
   useRelatedBooks,
   useMoreBooksAuthors,
+  useFavoriteBook,
+
+  // Usuarios
   useUserRegister,
   useCheckUser,
   useUserData,

diff --git a/src/pages/Book.tsx b/src/pages/Book.tsx
@@ -1,4 +1,4 @@
-import React, { lazy, Suspense } from 'react';
+import React, { lazy, Suspense, useEffect, useState } from 'react';
 import { useParams, useNavigate, NavLink } from 'react-router-dom';
 import {
   Box,
@@ -22,11 +22,12 @@ import {
 } from 'react-icons/fi';
 import { BsTag } from 'react-icons/bs';
 import { FaCheckCircle } from 'react-icons/fa';
+import { MdOutlineFavoriteBorder, MdOutlineFavorite } from 'react-icons/md';
 import LazyLoad from 'react-lazy-load';
 import Atropos from 'atropos/react';
 import 'atropos/css';
 
-import { useBook, useDeleteBook } from '@hooks/queries';
+import { useBook, useFavoriteBook, useDeleteBook } from '@hooks/queries';
 import { handleImageLoad } from '@utils/utils';
 import { MainHead } from '@components/layout/Head';
 import { MyTag } from '@components/ui/MyTag';
@@ -79,12 +80,21 @@ export default function Book() {
   } = useDisclosure();
   let uiLink;
   let btnMoreOptions;
+  let btnFavorite;
 
   const { data } = useBook(pathUrl, getToken);
-  const { mutate, isSuccess, isPending } = useDeleteBook();
+
+  const [isFavorite, setIsFavorite] = useState<boolean>(data.isFavorite);
+
+  const { mutate: mutateFavorite } = useFavoriteBook(isFavorite);
+  const { mutate: mutateDelete, isSuccess, isPending } = useDeleteBook();
 
   const isCurrentUserAuthor = currentUser && currentUser.uid === data.userId;
 
+  useEffect(() => {
+    setIsFavorite(data.isFavorite);
+  }, [data.isFavorite]);
+
   if (currentUser && isCurrentUserAuthor) {
     btnMoreOptions = (
       <Tooltip label='Más Opciones' fontSize='sm' bg='black' color='white'>
@@ -102,6 +112,33 @@ export default function Book() {
     );
   }
 
+  async function handleToggleFavorite() {
+    const newFavoriteStatus = !isFavorite;
+    setIsFavorite(newFavoriteStatus);
+
+    return await mutateFavorite(data.id);
+  }
+
+  if (currentUser) {
+    btnFavorite = (
+      <Tooltip
+        label={isFavorite ? 'Eliminar de Favoritos' : 'Agregar a Favoritos'}
+        fontSize='sm'
+        bg='black'
+        color='white'
+      >
+        <Button mt={{ base: 1, md: 5 }} size='sm' onClick={handleToggleFavorite}>
+          <Flex align='center' justify='center'>
+            <Icon
+              as={isFavorite ? MdOutlineFavorite : MdOutlineFavoriteBorder}
+              boxSize={5}
+            />
+          </Flex>
+        </Button>
+      </Tooltip>
+    );
+  }
+
   if (isSuccess) {
     myToast({
       title: 'Libro eliminado',
@@ -118,15 +155,15 @@ export default function Book() {
       bxSize: 5,
     });
 
-    navigate('/explore', { replace: true });
+    return navigate('/explore', { replace: true });
   }
 
   function handleDeleteBook() {
-    mutate(data.id);
+    return mutateDelete(data.id);
   }
 
   function handleGoBack() {
-    navigate(-1);
+    return navigate(-1);
   }
 
   if (data.sourceLink === '') {
@@ -189,7 +226,10 @@ export default function Book() {
             Volver
           </Flex>
         </Button>
-        {btnMoreOptions}
+        <Flex gap='2'>
+          {btnFavorite}
+          {btnMoreOptions}
+        </Flex>
       </Flex>
       <ModalOptions
         isOpen={isOpenOptions}

diff --git a/src/services/api.ts b/src/services/api.ts
@@ -59,6 +59,14 @@ async function getAllFilterOptions() {
   return await fetchData(`${API_URL}/books/options`);
 }
 
+async function updateFavoriteStatus(id: string | undefined, body: any) {
+  return await fetchData(`${API_URL}/books/favorite/${id}`, {
+    method: 'PATCH',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify({ id, isFavorite: body }),
+  });
+}
+
 async function postBook(books: any) {
   return await fetchData(`${API_URL}/books`, {
     method: 'POST',
@@ -134,6 +142,7 @@ export {
   getMostViewedBooks,
   getRelatedBooks,
   getMoreBooksAuthors,
+  updateFavoriteStatus,
   postBook,
   deleteBook,
   updateBook,