diff --git a/src/hooks/queries.ts b/src/hooks/queries.ts index b9f6cd1..17774b9 100644 --- a/src/hooks/queries.ts +++ b/src/hooks/queries.ts @@ -26,6 +26,7 @@ import { deleteBook, deleteAccount, getBooksFilterPaginated, + getFindAllBookFavorite, } from '@services/api'; import { useAccountActions } from '@hooks/useAccountActions'; import { keys } from '@utils/utils'; @@ -192,7 +193,7 @@ function useBook(pathUrl: string | undefined, token?: string | null) { function useFavoriteBook(body: any, isFavorite: boolean) { return useMutation({ - mutationKey: ['favoriteBook'], + mutationKey: [keys.favoriteBook], mutationFn: (userId: string | undefined) => patchToggleFavorite(userId, body, isFavorite), onError: (error) => { @@ -258,6 +259,23 @@ function useProfile( }); } +function useAllFavoriteByUser(userId: string | undefined) { + return useInfiniteQuery({ + queryKey: [keys.userFavoriteBooks, userId], + queryFn: ({ pageParam }) => getFindAllBookFavorite(userId, pageParam), + initialPageParam: 0, + getNextPageParam: (lastPage) => { + if (lastPage.info.nextPage === null) return; + + return lastPage.info.nextPage; + }, + enabled: !!userId, + gcTime: 0, + staleTime: 0, + retry: false, + }); +} + function useDeleteBook() { return useMutation({ mutationKey: [keys.deleteBook], @@ -314,6 +332,7 @@ export { useCheckUser, useUserData, useProfile, + useAllFavoriteByUser, useUpdateBook, useDeleteBook, useDeleteAccount, diff --git a/src/pages/Favorites.tsx b/src/pages/Favorites.tsx new file mode 100644 index 0000000..8729946 --- /dev/null +++ b/src/pages/Favorites.tsx @@ -0,0 +1,55 @@ +import React from 'react'; + +import { useAllFavoriteByUser } from '@hooks/queries'; +import { useAuth } from '@contexts/AuthContext'; +import { MySimpleGrid } from '@components/ui/MySimpleGrid'; +import { Card } from '@components/cards/Card'; +import { CardType } from '@components/types'; +import { MainHead } from '@components/layout/Head'; +import { ContainerTitle } from '@components/layout/ContainerTitle'; + +export default function Favorites() { + const { currentUser } = useAuth(); + const uid = currentUser?.uid; + const { data, fetchNextPage, isFetchingNextPage } = useAllFavoriteByUser(uid); + + return ( + <> + + + + {data?.pages.map((page, index) => ( + + {page.results.map( + ({ + id, + category, + language, + title, + authors, + synopsis, + sourceLink, + pathUrl, + image, + }: CardType) => ( + + + + ), + )} + + ))} + + + ); +} diff --git a/src/routes.tsx b/src/routes.tsx index 05ca754..fea5d1c 100644 --- a/src/routes.tsx +++ b/src/routes.tsx @@ -20,7 +20,7 @@ const MostViewed = lazy(() => import('@pages/MostViewed')); const Book = lazy(() => import('@pages/Book')); const Search = lazy(() => import('@pages/Search')); const NewBook = lazy(() => import('@pages/NewBook')); -// const Profile = lazy(() => import('@pages/profile/Profile')); +const Favorites = lazy(() => import('@pages/Favorites')); export const routes = createBrowserRouter([ { @@ -45,6 +45,10 @@ export const routes = createBrowserRouter([ path: '/most-viewed', element: , }, + { + path: '/my-favorites', + element: , + }, { path: '/new-post', element: ( diff --git a/src/services/api.ts b/src/services/api.ts index e4d0099..83dce6f 100644 --- a/src/services/api.ts +++ b/src/services/api.ts @@ -128,6 +128,12 @@ async function getUserAndBooks( ); } +async function getFindAllBookFavorite(userId: string | undefined, page: number) { + return await fetchData( + `${API_URL}/users/${userId}/my-favorites?limit=10&page=${page}`, + ); +} + async function deleteAccount(id: string | undefined) { return await fetchData(`${API_URL}/users/${id}`, { method: 'DELETE', @@ -154,5 +160,6 @@ export { postRegister, getCheckUser, getUserAndBooks, + getFindAllBookFavorite, deleteAccount, }; diff --git a/src/utils/utils.ts b/src/utils/utils.ts index d020ac3..444417c 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -15,12 +15,14 @@ const keys = { relatedBooks: 'RelatedBooks', moreBooksAuthors: 'MoreBooksAuthors', mostViewed: 'MostViewed', + favoriteBook: 'FavoriteBook', userRegister: 'UserRegister', updateBook: 'UpdateBook', deleteBook: 'DeleteBook', profile: 'Profile', checkUser: 'CheckUser', userData: 'UserData', + userFavoriteBooks: 'UserFavoriteBooks', deleteAccount: 'DeleteAccount', };