style: favorites view is being created

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,

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 (
+    <>
+      <MainHead title='Mis Favoritos | XBuniverse' />
+      <ContainerTitle title='Mis Favoritos' />
+      <MySimpleGrid>
+        {data?.pages.map((page, index) => (
+          <React.Fragment key={index}>
+            {page.results.map(
+              ({
+                id,
+                category,
+                language,
+                title,
+                authors,
+                synopsis,
+                sourceLink,
+                pathUrl,
+                image,
+              }: CardType) => (
+                <React.Fragment key={id}>
+                  <Card
+                    id={id}
+                    category={category}
+                    language={language}
+                    title={title}
+                    authors={authors}
+                    synopsis={synopsis}
+                    sourceLink={sourceLink}
+                    pathUrl={pathUrl}
+                    image={image}
+                  />
+                </React.Fragment>
+              ),
+            )}
+          </React.Fragment>
+        ))}
+      </MySimpleGrid>
+    </>
+  );
+}

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: <MostViewed />,
       },
+      {
+        path: '/my-favorites',
+        element: <Favorites />,
+      },
       {
         path: '/new-post',
         element: (

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,
 };

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',
 };