diff --git a/src/components/skeletons/SkeletonDBook.tsx b/src/components/skeletons/SkeletonDBook.tsx
index 9b1ae2b..b69abd4 100644
--- a/src/components/skeletons/SkeletonDBook.tsx
+++ b/src/components/skeletons/SkeletonDBook.tsx
@@ -15,7 +15,10 @@ export function SkeletonDetailsBook() {
justify='space-between'
>
-
+
+
+
+
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
index 840979f..9f96e96 100644
--- 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(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 = (
@@ -102,6 +112,33 @@ export default function Book() {
);
}
+ async function handleToggleFavorite() {
+ const newFavoriteStatus = !isFavorite;
+ setIsFavorite(newFavoriteStatus);
+
+ return await mutateFavorite(data.id);
+ }
+
+ if (currentUser) {
+ btnFavorite = (
+
+
+
+ );
+ }
+
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
- {btnMoreOptions}
+
+ {btnFavorite}
+ {btnMoreOptions}
+