feat: added to see books by the same author in related form

src/components/cards/MoreBooksAuthors.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Box, Text } from '@chakra-ui/react';
+
+import { RelatedCard } from './RelatedCard';
+import { ContainerRCard } from './ContainerRCard';
+import { CardType, RelatedBooksType } from '../types';
+import { useMoreBooksAuthors } from '../../hooks/querys';
+import { useRefetchLocation } from '../../hooks/useRefetchLocation';
+
+export default function MoreBooksAuthors({
+  currentBookId,
+  id,
+}: RelatedBooksType) {
+  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) => (
+        <React.Fragment key={id}>
+          <RelatedCard
+            title={title}
+            authors={authors}
+            pathUrl={pathUrl}
+            refetchQueries={refetch}
+          />
+        </React.Fragment>
+      ),
+    );
+  } else {
+    uiCard = (
+      <Text ml='4' fontStyle='italic' textAlign='center'>
+        <Box as='span' fontStyle='normal'>
+          🔍 📚
+        </Box>{' '}
+        No se encontraron más libros del mismo autor.
+      </Text>
+    );
+  }
+
+  return (
+    <>
+      <ContainerRCard>{uiCard}</ContainerRCard>
+    </>
+  );
+}

src/hooks/querys.ts

@@ -15,6 +15,7 @@ import {
   getBooksFilter,
   getMoreBooks,
   getRelatedBooks,
+  getMoreBooksAuthors,
   postBook,
 } from '../services/api';
 import { keys } from '../utils/utils';
@@ -124,6 +125,16 @@ function useRelatedBooks(id: string | undefined) {
   });
 }
 
+function useMoreBooksAuthors(id: string | undefined) {
+  return useSuspenseQuery({
+    queryKey: [keys.moreBooksAuthors, id],
+    queryFn: () => getMoreBooksAuthors(id),
+    refetchOnWindowFocus: false,
+    gcTime: 3000,
+    staleTime: 50000,
+  });
+}
+
 function useBook(pathUrl: string | undefined) {
   return useSuspenseQuery({
     queryKey: [keys.one, pathUrl],
@@ -143,4 +154,5 @@ export {
   useFilter,
   useMoreBooks,
   useRelatedBooks,
+  useMoreBooksAuthors,
 };

src/pages/Book.tsx

@@ -25,6 +25,9 @@ import { ModalShare } from '../components/ModalShare';
 import { MyLink } from '../components/MyLink';
 
 const Categories = lazy(() => import('../components/Categories'));
+const MoreBooksAuthors = lazy(
+  () => import('../components/cards/MoreBooksAuthors'),
+);
 const RelatedBooks = lazy(() => import('../components/cards/RelatedBooks'));
 const MoreBooks = lazy(() => import('../components/cards/MoreBooks'));
 
@@ -298,6 +301,34 @@ export default function Book() {
           <Box my='10'>
             <Divider borderColor='gray.400' />
           </Box>
+          <Flex direction='column'>
+            <Box
+              p='2'
+              mb='3'
+              fontSize={{ base: 'xl', md: '2xl' }}
+              textAlign={{ base: 'center', lg: 'left' }}
+              ml={{ base: 0, lg: 2 }}
+            >
+              Más libros del autor{' '}
+              <Box as='span' fontWeight='semibold'>
+                {data.authors[0]}
+              </Box>
+            </Box>
+            <Suspense
+              fallback={
+                <Box p='3'>
+                  <Spinner size='lg' />
+                </Box>
+              }
+            >
+              <Box>
+                <MoreBooksAuthors id={data.id} currentBookId={pathUrl} />
+              </Box>
+            </Suspense>
+          </Flex>
+          <Box my='10'>
+            <Divider borderColor='gray.400' />
+          </Box>
           <Flex direction='column'>
             <Box
               p='2'

src/services/api.ts

@@ -56,6 +56,12 @@ async function getRelatedBooks(id: string | undefined) {
   return data;
 }
 
+async function getMoreBooksAuthors(id: string | undefined) {
+  const data = await fetchData(`${API_URL}/books/more-books-authors/${id}`);
+
+  return data;
+}
+
 async function getAllFilterOptions() {
   const data = await fetchData(`${API_URL}/books/options`);
 
@@ -79,6 +85,7 @@ export {
   getAllFilterOptions,
   getMoreBooks,
   getRelatedBooks,
+  getMoreBooksAuthors,
   postBook,
   deleteBook,
 };

src/utils/utils.ts

@@ -12,6 +12,7 @@ const keys = {
   filter: 'BooksFilter',
   random: 'BooksRandom',
   relatedBooks: 'RelatedBooks',
+  moreBooksAuthors: 'MoreBooksAuthors',
 };
 
 function handleImageLoad(e: React.SyntheticEvent) {