chore: useRefetchLocation hook deprecated and other changes

Franqsanz · Sep 4, 2024 · 95d7cf7 · 95d7cf7
1 parent edbf8c9
commit 95d7cf7
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 50 deletions.
diff --git a/src/components/cards/MoreBooks.tsx b/src/components/cards/MoreBooks.tsx
@@ -2,18 +2,16 @@ import React from 'react';
 
 import { RelatedCard } from '@components/cards/RelatedCard';
 import { ContainerRCard } from '@components/cards/ContainerRCard';
-import { CardType, RelatedBooksType } from '@components/types';
+import { CardType } from '@components/types';
 import { useMoreBooks } from '@hooks/queries';
-import { useRefetchLocation } from '@hooks/useRefetchLocation';
 
-export default function MoreBooks({ currentBookId }: RelatedBooksType) {
-  const { data, refetch } = useMoreBooks();
-  const moreBooks = useRefetchLocation({ currentBookId, data, refetch });
+export default function MoreBooks({ id }) {
+  const { data, refetch } = useMoreBooks(id);
 
   return (
     <>
       <ContainerRCard>
-        {moreBooks.map(({ id, title, authors, pathUrl }: CardType) => (
+        {data.map(({ id, title, authors, pathUrl }: CardType) => (
           <React.Fragment key={id}>
             <RelatedCard
               title={title}

diff --git a/src/components/cards/MoreBooksAuthors.tsx b/src/components/cards/MoreBooksAuthors.tsx
@@ -3,17 +3,15 @@ import { Box, Text } from '@chakra-ui/react';
 
 import { RelatedCard } from '@components/cards/RelatedCard';
 import { ContainerRCard } from '@components/cards/ContainerRCard';
-import { CardType, RelatedBooksType } from '@components/types';
+import { CardType } from '@components/types';
 import { useMoreBooksAuthors } from '@hooks/queries';
-import { useRefetchLocation } from '@hooks/useRefetchLocation';
 
-export default function MoreBooksAuthors({ currentBookId, id }: RelatedBooksType) {
+export default function MoreBooksAuthors({ id }) {
   const { data, refetch } = useMoreBooksAuthors(id);
-  const moreBooksAuthors = useRefetchLocation({ currentBookId, data, refetch });
   let uiCard;
 
-  if (moreBooksAuthors.length > 0) {
-    uiCard = moreBooksAuthors.map(({ id, title, authors, pathUrl }: CardType) => (
+  if (data.length > 0) {
+    uiCard = data.map(({ id, title, authors, pathUrl }: CardType) => (
       <React.Fragment key={id}>
         <RelatedCard
           title={title}

diff --git a/src/components/cards/RelatedBooks.tsx b/src/components/cards/RelatedBooks.tsx
@@ -3,17 +3,15 @@ import { Box, Text } from '@chakra-ui/react';
 
 import { RelatedCard } from '@components/cards/RelatedCard';
 import { ContainerRCard } from '@components/cards/ContainerRCard';
-import { CardType, RelatedBooksType } from '@components/types';
+import { CardType } from '@components/types';
 import { useRelatedBooks } from '@hooks/queries';
-import { useRefetchLocation } from '@hooks/useRefetchLocation';
 
-export default function RelatedBooks({ currentBookId, id }: RelatedBooksType) {
+export default function RelatedBooks({ id }) {
   const { data, refetch } = useRelatedBooks(id);
-  const relatedBooks = useRefetchLocation({ currentBookId, data, refetch });
   let uiCard;
 
-  if (relatedBooks.length > 0) {
-    uiCard = relatedBooks.map(({ id, title, authors, pathUrl }: CardType) => (
+  if (data.length > 0) {
+    uiCard = data.map(({ id, title, authors, pathUrl }: CardType) => (
       <React.Fragment key={id}>
         <RelatedCard
           title={title}

diff --git a/src/hooks/queries.ts b/src/hooks/queries.ts
@@ -137,21 +137,21 @@ function useFilter(query: string | undefined, param: string | undefined) {
   });
 }
 
-function useMoreBooks() {
+function useMostViewedBooks(query) {
   return useSuspenseQuery({
-    queryKey: [keys.random],
-    queryFn: getMoreBooks,
+    queryKey: [keys.mostViewed, query],
+    queryFn: () => getMostViewedBooks(query),
     refetchOnWindowFocus: false,
     gcTime: 3000,
     staleTime: 50000,
     retry: false,
   });
 }
 
-function useMostViewedBooks(query) {
+function useMoreBooks(id: string | undefined) {
   return useSuspenseQuery({
-    queryKey: [keys.mostViewed, query],
-    queryFn: () => getMostViewedBooks(query),
+    queryKey: [keys.random, id],
+    queryFn: () => getMoreBooks(id),
     refetchOnWindowFocus: false,
     gcTime: 3000,
     staleTime: 50000,

diff --git a/src/pages/Book.tsx b/src/pages/Book.tsx
@@ -106,6 +106,23 @@ export default function Book() {
 
   const isCurrentUserAuthor = currentUser && currentUser.uid === bookObject.userId;
 
+  useEffect(() => {
+    if (successFavorite) {
+      myToast({
+        title: isFavorite ? 'Se agrego a favoritos' : 'Se quito de favoritos',
+        icon: FaCheckCircle,
+        iconColor: 'green.700',
+        bgColor: 'black',
+        width: '200px',
+        color: 'whitesmoke',
+        align: 'center',
+        padding: '1',
+        fntSize: 'md',
+        bxSize: 5,
+      });
+    }
+  }, [successFavorite]);
+
   useEffect(() => {
     setIsFavorite(bookObject.isFavorite);
   }, [bookObject.isFavorite, location.pathname]);
@@ -134,21 +151,6 @@ export default function Book() {
     return await mutateFavorite(currentUser?.uid);
   }
 
-  if (successFavorite) {
-    myToast({
-      title: isFavorite ? 'Se agrego a favoritos' : 'Se quito de favoritos',
-      icon: FaCheckCircle,
-      iconColor: 'green.700',
-      bgColor: 'black',
-      width: '200px',
-      color: 'whitesmoke',
-      align: 'center',
-      padding: '1',
-      fntSize: 'md',
-      bxSize: 5,
-    });
-  }
-
   if (currentUser) {
     btnFavorite = (
       <Tooltip
@@ -498,20 +500,16 @@ export default function Book() {
           <BooksSection
             title='Más libros del autor'
             data={bookObject.authors[0]}
-            booksComponent={
-              <MoreBooksAuthors id={bookObject.id} currentBookId={pathUrl} />
-            }
+            booksComponent={<MoreBooksAuthors id={bookObject.id} />}
           />
           <BooksSection
             title='Libros relacionados con'
             data={bookObject.category[0]}
-            booksComponent={
-              <RelatedBooks id={bookObject.id} currentBookId={pathUrl} />
-            }
+            booksComponent={<RelatedBooks id={bookObject.id} />}
           />
           <BooksSection
             title='Más libros en XBuniverse'
-            booksComponent={<MoreBooks currentBookId={pathUrl} />}
+            booksComponent={<MoreBooks id={bookObject.id} />}
           />
         </Flex>
         <Flex

diff --git a/src/services/api.ts b/src/services/api.ts
@@ -39,14 +39,14 @@ async function getBooksFilter(query: string | undefined, param: string | undefin
   return await fetchData(`${API_URL}/books?${query}=${param}`);
 }
 
-async function getMoreBooks() {
-  return await fetchData(`${API_URL}/books/more-books`);
-}
-
 async function getMostViewedBooks(query: string) {
   return await fetchData(`${API_URL}/books/most-viewed-books?detail=${query}`);
 }
 
+async function getMoreBooks(id: string | undefined) {
+  return await fetchData(`${API_URL}/books/more-books/${id}`);
+}
+
 async function getRelatedBooks(id: string | undefined) {
   return await fetchData(`${API_URL}/books/related-books/${id}`);
 }