Skip to content

Commit

Permalink
chore: some changes were made in the logic when displaying the book
Browse files Browse the repository at this point in the history
  • Loading branch information
@Franqsanz
Franqsanz committed Aug 29, 2024
1 parent 551fbfc commit 7d6655c
Show file tree
Hide file tree
Showing 3 changed files with 76 additions and 54 deletions.
7 changes: 4 additions & 3 deletions src/hooks/queries.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import {
postRegister,
getCheckUser,
getUserAndBooks,
updateFavoriteStatus,
patchToggleFavorite,
updateBook,
deleteBook,
deleteAccount,
Expand Down Expand Up @@ -190,10 +190,11 @@ function useBook(pathUrl: string | undefined, token?: string | null) {
});
}

function useFavoriteBook(body: boolean) {
function useFavoriteBook(body: any, isFavorite: boolean) {
return useMutation({
mutationKey: ['favoriteBook'],
mutationFn: (id: string) => updateFavoriteStatus(id, body),
mutationFn: (userId: string | undefined) =>
patchToggleFavorite(userId, body, isFavorite),
onError: (error) => {
console.error('Error updating favorite status');
},
Expand Down
111 changes: 64 additions & 47 deletions src/pages/Book.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,17 +83,26 @@ export default function Book() {
let btnFavorite;

const { data } = useBook(pathUrl, getToken);
let bookObject = data;

const [isFavorite, setIsFavorite] = useState<boolean>(data.isFavorite);
if (Array.isArray(bookObject)) {
const [obj] = data;

const { mutate: mutateFavorite } = useFavoriteBook(isFavorite);
bookObject = obj;
} else {
bookObject = data;
}

const [isFavorite, setIsFavorite] = useState<boolean>(bookObject.isFavorite);

const { mutate: mutateFavorite } = useFavoriteBook(bookObject.id, isFavorite);
const { mutate: mutateDelete, isSuccess, isPending } = useDeleteBook();

const isCurrentUserAuthor = currentUser && currentUser.uid === data.userId;
const isCurrentUserAuthor = currentUser && currentUser.uid === bookObject.userId;

useEffect(() => {
setIsFavorite(data.isFavorite);
}, [data.isFavorite]);
setIsFavorite(bookObject.isFavorite);
}, [bookObject.isFavorite]);

if (currentUser && isCurrentUserAuthor) {
btnMoreOptions = (
Expand All @@ -116,7 +125,7 @@ export default function Book() {
const newFavoriteStatus = !isFavorite;
setIsFavorite(newFavoriteStatus);

return await mutateFavorite(data.id);
return await mutateFavorite(currentUser?.uid);
}

if (currentUser) {
Expand Down Expand Up @@ -200,9 +209,9 @@ export default function Book() {
return (
<>
<MainHead
title={`${data.title} | XBuniverse`}
description={data.synopsis}
urlImage={data.image.url}
title={`${bookObject.title} | XBuniverse`}
description={bookObject.synopsis}
urlImage={bookObject.image.url}
/>
<Flex
as='section'
Expand Down Expand Up @@ -242,7 +251,7 @@ export default function Book() {
/>
<ModalConfirmation
isOpen={isOpenConfirmation}
title={data.title}
title={bookObject.title}
isStrong={true}
warningText='El libro será eliminado de manera permanente y no se podrá recuperar.'
onDeleteBook={handleDeleteBook}
Expand All @@ -254,17 +263,20 @@ export default function Book() {
/>
<ModalForm
isOpen={isOpenEdit}
id={data.id}
title={data.title}
authors={data.authors}
synopsis={data.synopsis}
year={data.year}
category={data.category}
numberPages={data.numberPages}
sourceLink={data.sourceLink}
language={data.language}
format={data.format}
image={{ url: data.image.url, public_id: data.image.public_id }}
id={bookObject.id}
title={bookObject.title}
authors={bookObject.authors}
synopsis={bookObject.synopsis}
year={bookObject.year}
category={bookObject.category}
numberPages={bookObject.numberPages}
sourceLink={bookObject.sourceLink}
language={bookObject.language}
format={bookObject.format}
image={{
url: bookObject.image.url,
public_id: bookObject.image.public_id,
}}
onClose={onCloseEdit}
/>
<Flex
Expand All @@ -287,8 +299,8 @@ export default function Book() {
<ImageZoom
w='230px'
h='340px'
src={data.image.url}
alt={`Imagen de "${data.title}"`}
src={bookObject.image.url}
alt={`Imagen de "${bookObject.title}"`}
rounded='md'
border='1px solid #A0AEC0'
boxShadow='xl'
Expand All @@ -305,7 +317,7 @@ export default function Book() {
left='0'
right='0'
position='absolute'
views={data.views}
views={bookObject.views}
bxSize='5'
/>
</Box>
Expand All @@ -320,12 +332,15 @@ export default function Book() {
mb='2'
>
<Box>
<Link as={NavLink} to={`/books/filter/category/${data.category[0]}`}>
<Link
as={NavLink}
to={`/books/filter/category/${bookObject.category[0]}`}
>
<MyTag
bg='green.50'
color='green.900'
icon={BsTag}
name={data.category[0]}
name={bookObject.category[0]}
size='lg'
tabIndex={-1}
/>
Expand All @@ -337,21 +352,21 @@ export default function Book() {
mt='5'
textTransform='uppercase'
>
{data.title}
{bookObject.title}
</Box>
<Flex
my='1'
fontSize={{ base: 'md', md: 'xl' }}
textTransform='uppercase'
flexWrap='wrap'
>
{data.authors.map((author, index) => (
{bookObject.authors.map((author, index) => (
<MyLink
external={false}
key={index}
href={`/books/filter/authors/${author}`}
data={author}
index={index !== data.authors.length - 1 && ','}
index={index !== bookObject.authors.length - 1 && ','}
/>
))}
</Flex>
Expand All @@ -360,7 +375,7 @@ export default function Book() {
Sinopsis
</Box>
<Text mt='3' mb='10' fontSize='md' whiteSpace='pre-wrap'>
{data.synopsis}
{bookObject.synopsis}
</Text>
</Box>
<Box p='2' fontSize='lg' bg={grayColor} roundedTop='lg'>
Expand All @@ -377,8 +392,8 @@ export default function Book() {
<Box as='span'>
<MyLink
external={false}
href={`/books/filter/year/${data.year}`}
data={data.year}
href={`/books/filter/year/${bookObject.year}`}
data={bookObject.year}
/>
</Box>
</Box>
Expand All @@ -388,7 +403,7 @@ export default function Book() {
<Box as='span'>N° paginas:</Box>
</Box>
<Box>
<Box as='span'>{data.numberPages}</Box>
<Box as='span'>{bookObject.numberPages}</Box>
</Box>
</Flex>
<Flex my='2'>
Expand All @@ -399,8 +414,8 @@ export default function Book() {
<Box as='span'>
<MyLink
external={false}
href={`/books/filter/language/${data.language}`}
data={data.language}
href={`/books/filter/language/${bookObject.language}`}
data={bookObject.language}
/>
</Box>
</Box>
Expand All @@ -410,7 +425,7 @@ export default function Book() {
<Box as='span'>Formato:</Box>
</Box>
<Box>
<Box as='span'>{data.format}</Box>
<Box as='span'>{bookObject.format}</Box>
</Box>
</Flex>
<Flex>
Expand All @@ -419,13 +434,13 @@ export default function Book() {
</Box>
<Box>
<Flex flexWrap='wrap' as='span'>
{data.category.map((category, index) => (
{bookObject.category.map((category, index) => (
<MyLink
external={false}
key={index}
href={`/books/filter/category/${category}`}
data={category}
index={index !== data.category.length - 1 && ','}
index={index !== bookObject.category.length - 1 && ','}
/>
))}
</Flex>
Expand Down Expand Up @@ -458,19 +473,21 @@ export default function Book() {
isOpen={isOpenShare}
onClose={onCloseShare}
shareUrl={shareUrl}
data={data.title}
data={bookObject.title}
/>
<BooksSection
title='Más libros del autor'
data={data.authors[0]}
data={bookObject.authors[0]}
booksComponent={
<MoreBooksAuthors id={data.id} currentBookId={pathUrl} />
<MoreBooksAuthors id={bookObject.id} currentBookId={pathUrl} />
}
/>
<BooksSection
title='Libros relacionados con'
data={data.category[0]}
booksComponent={<RelatedBooks id={data.id} currentBookId={pathUrl} />}
data={bookObject.category[0]}
booksComponent={
<RelatedBooks id={bookObject.id} currentBookId={pathUrl} />
}
/>
<BooksSection
title='Más libros en XBuniverse'
Expand Down Expand Up @@ -501,8 +518,8 @@ export default function Book() {
<ImageZoom
w='290px'
h='420px'
src={data.image.url}
alt={`Imagen de "${data.title}"`}
src={bookObject.image.url}
alt={`Imagen de "${bookObject.title}"`}
rounded='lg'
border='1px solid #A0AEC0'
boxShadow='lg'
Expand All @@ -517,7 +534,7 @@ export default function Book() {
<Image
w='290px'
h='420px'
src={data.image.url}
src={bookObject.image.url}
position='absolute'
bottom='710px'
left='6px'
Expand All @@ -533,7 +550,7 @@ export default function Book() {
left='0'
right='0'
position='absolute'
views={data.views}
views={bookObject.views}
bxSize='5'
/>
<Box
Expand Down
12 changes: 8 additions & 4 deletions src/services/api.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,11 +59,15 @@ 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}`, {
async function patchToggleFavorite(
userId: string | undefined,
body: any,
isFavorite: boolean,
) {
return await fetchData(`${API_URL}/books/favorite`, {
method: 'PATCH',
headers: { 'content-type': 'application/json' },
body: JSON.stringify({ id, isFavorite: body }),
body: JSON.stringify({ userId, id: body, isFavorite }),
});
}

Expand Down Expand Up @@ -142,7 +146,7 @@ export {
getMostViewedBooks,
getRelatedBooks,
getMoreBooksAuthors,
updateFavoriteStatus,
patchToggleFavorite,
postBook,
deleteBook,
updateBook,
Expand Down

0 comments on commit 7d6655c

Please sign in to comment.