chore: numerous changes were made and a new section in Book.tsx was a…

…dded

.github/workflows/links.yml

@@ -0,0 +1,16 @@
+name: Links (Fail Fast)
+
+on:
+  push:
+  pull_request:
+
+jobs:
+  linkChecker:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Link Checker
+        uses: lycheeverse/[email protected]
+        with:
+          fail: true

src/components/cards/Card.tsx

@@ -66,7 +66,7 @@ export function Card({
                   bg='green.50'
                   color='green.900'
                   icon={BsTag}
-                  name={category[0]}
+                  name={category && category[0]}
                   size='md'
                   isFocused={false}
                   tabIndex={-1}

src/components/cards/ContainerRCard.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Flex, useColorModeValue } from '@chakra-ui/react';
+
+export function ContainerRCard({ children }: { children: React.ReactNode }) {
+  const colorCard = useColorModeValue('gray.900', 'gray.100');
+
+  return (
+    <>
+      <Flex flexWrap={{ base: 'wrap', xl: 'nowrap' }} color={colorCard}>
+        {children}
+      </Flex>
+    </>
+  );
+}

src/components/cards/MoreBooks.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { RelatedCard } from './RelatedCard';
+import { ContainerRCard } from './ContainerRCard';
+import { CardType, ReleatedBooksType } from '../types';
+import { useMoreBooks } from '../../hooks/querys';
+import { useRefetchLocation } from '../../hooks/useRefetchLocation';
+
+export default function MoreBooks({ currentBookId }: ReleatedBooksType) {
+  const { data, refetch } = useMoreBooks();
+  const moreBooks = useRefetchLocation(currentBookId, data, refetch);
+
+  // const moreBooks = data.filter((book: any) => {
+  //   if (book.pathUrl === currentBookId) {
+  //     refetch();
+  //   }
+
+  //   return book.pathUrl !== currentBookId;
+  // });
+
+  return (
+    <>
+      <ContainerRCard>
+        {moreBooks.map(({ id, title, authors, pathUrl }: CardType) => (
+          <React.Fragment key={id}>
+            <RelatedCard
+              id={id}
+              title={title}
+              authors={authors}
+              pathUrl={pathUrl}
+              refetchQueries={refetch}
+            />
+          </React.Fragment>
+        ))}
+      </ContainerRCard>
+    </>
+  );
+}

src/components/cards/RelatedBooks.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { RelatedCard } from './RelatedCard';
+import { ContainerRCard } from './ContainerRCard';
+import { CardType, ReleatedBooksType } from '../types';
+import { useRelatedBooks } from '../../hooks/querys';
+import { useRefetchLocation } from '../../hooks/useRefetchLocation';
+
+export default function RelatedBooks({ currentBookId, id }: ReleatedBooksType) {
+  const { data, refetch } = useRelatedBooks(id);
+  const relatedBooks = useRefetchLocation(currentBookId, data, refetch);
+
+  return (
+    <>
+      <ContainerRCard>
+        {relatedBooks.map(({ id, title, authors, pathUrl }: CardType) => (
+          <React.Fragment key={id}>
+            <RelatedCard
+              id={id}
+              title={title}
+              authors={authors}
+              pathUrl={pathUrl}
+              refetchQueries={refetch}
+            />
+          </React.Fragment>
+        ))}
+      </ContainerRCard>
+    </>
+  );
+}

src/components/types.d.ts

@@ -24,7 +24,7 @@ interface CardType {
   title: string;
   synopsis?: string;
   authors: string[];
-  category: string[];
+  category?: string[];
   year?: number;
   language?: number;
   sourceLink?: string;
@@ -92,7 +92,8 @@ interface ModalType extends DisclosureType {
 }
 
 interface ReleatedBooksType {
-  currentBookId: string | undefined;
+  id?: string;
+  currentBookId?: string | undefined;
 }
 
 interface SelectType extends Omit<SelectBooksType, 'label'> {

src/hooks/querys.ts

@@ -13,6 +13,7 @@ import {
   getBook,
   getBooksFilter,
   getMoreBooks,
+  getRelatedBooks,
   postBook,
 } from '../services/api';
 import { keys } from '../utils/utils';
@@ -113,6 +114,17 @@ function useMoreBooks() {
   });
 }
 
+function useRelatedBooks(id: string | undefined) {
+  return useQuery({
+    queryKey: [keys.relatedBooks],
+    queryFn: () => getRelatedBooks(id),
+    suspense: true,
+    refetchOnWindowFocus: false,
+    cacheTime: 3000,
+    staleTime: 60000,
+  });
+}
+
 function useBook(pathUrl: string | undefined) {
   return useQuery({
     queryKey: [keys.one, pathUrl],
@@ -132,4 +144,5 @@ export {
   useBook,
   useFilter,
   useMoreBooks,
+  useRelatedBooks,
 };

src/hooks/useRefetchLocation.tsx

@@ -0,0 +1,23 @@
+import { useState, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+export function useRefetchLocation(currentBookId, data, refetch) {
+  const location = useLocation();
+  const [previousPathname, setPreviousPathname] = useState(location.pathname);
+  const [relatedBooks, setRelatedBooks] = useState([]);
+
+  useEffect(() => {
+    const filteredBooks = data.filter((book) => {
+      return book.pathUrl !== currentBookId;
+    });
+
+    setRelatedBooks(filteredBooks);
+
+    if (location.pathname !== previousPathname) {
+      refetch();
+      setPreviousPathname(location.pathname);
+    }
+  }, [data, currentBookId, location.pathname, refetch, previousPathname]);
+
+  return relatedBooks;
+}

src/pages/Book.tsx

@@ -25,7 +25,8 @@ import { ModalShare } from '../components/ModalShare';
 import { MyLink } from '../components/MyLink';
 
 const Categories = lazy(() => import('../components/Categories'));
-const RelatedPost = lazy(() => import('../components/RelatedPost'));
+const RelatedBooks = lazy(() => import('../components/cards/RelatedBooks'));
+const MoreBooks = lazy(() => import('../components/cards/MoreBooks'));
 
 export default function Book() {
   const shareUrl = window.location.href;
@@ -114,7 +115,7 @@ export default function Book() {
         w='full'
         maxW='1300px'
         m='auto'
-        mb='25'
+        mb={{ base: 25, md: 32 }}
         align='flex-start'
         direction={{ base: 'column', lg: 'row-reverse' }}
       >
@@ -314,6 +315,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 }}
+            >
+              Libros relacionados con{' '}
+              <Box as='span' fontWeight='semibold'>
+                {data.category[0]}
+              </Box>
+            </Box>
+            <Suspense
+              fallback={
+                <Box p='3'>
+                  <Spinner size='lg' />
+                </Box>
+              }
+            >
+              <Box>
+                <RelatedBooks id={data.id} currentBookId={pathUrl} />
+              </Box>
+            </Suspense>
+          </Flex>
+          <Box my='10'>
+            <Divider borderColor='gray.400' />
+          </Box>
           <Flex direction='column'>
             <Box
               p='2'
@@ -332,7 +361,7 @@ export default function Book() {
               }
             >
               <Box>
-                <RelatedPost currentBookId={pathUrl} />
+                <MoreBooks currentBookId={pathUrl} />
               </Box>
             </Suspense>
           </Flex>

src/services/api.ts

@@ -50,6 +50,12 @@ async function getMoreBooks() {
   return data;
 }
 
+async function getRelatedBooks(id: string | undefined) {
+  const data = await fetchData(`${API_URL}/books/related-books/${id}`);
+
+  return data;
+}
+
 async function getAllFilterOptions() {
   const data = await fetchData(`${API_URL}/books/options`);
 
@@ -72,6 +78,7 @@ export {
   getBooksFilter,
   getAllFilterOptions,
   getMoreBooks,
+  getRelatedBooks,
   postBook,
   deleteBook,
 };

src/utils/utils.ts

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