chore: type correction in hook useRefetchLocation and other changes

.github/workflows/type-check.yml

@@ -1,4 +1,4 @@
-name: type check
+name: Type Check
 
 on:
   pull_request:
@@ -24,3 +24,5 @@ jobs:
         run: npm ci
       - name: Run TypeScript type check
         run: npm run ts-lint
+      - name: Typecheck
+        uses: andoshin11/[email protected]

src/components/cards/MoreBooks.tsx

@@ -2,13 +2,13 @@ import React from 'react';
 
 import { RelatedCard } from './RelatedCard';
 import { ContainerRCard } from './ContainerRCard';
-import { CardType, ReleatedBooksType } from '../types';
+import { CardType, RelatedBooksType } from '../types';
 import { useMoreBooks } from '../../hooks/querys';
 import { useRefetchLocation } from '../../hooks/useRefetchLocation';
 
-export default function MoreBooks({ currentBookId }: ReleatedBooksType) {
+export default function MoreBooks({ currentBookId }: RelatedBooksType) {
   const { data, refetch } = useMoreBooks();
-  const moreBooks = useRefetchLocation(currentBookId, data, refetch);
+  const moreBooks = useRefetchLocation({ currentBookId, data, refetch });
 
   return (
     <>

src/components/cards/RelatedBooks.tsx

@@ -1,29 +1,42 @@
 import React from 'react';
+import { Box, Text } from '@chakra-ui/react';
 
 import { RelatedCard } from './RelatedCard';
 import { ContainerRCard } from './ContainerRCard';
-import { CardType, ReleatedBooksType } from '../types';
+import { CardType, RelatedBooksType } from '../types';
 import { useRelatedBooks } from '../../hooks/querys';
 import { useRefetchLocation } from '../../hooks/useRefetchLocation';
 
-export default function RelatedBooks({ currentBookId, id }: ReleatedBooksType) {
+export default function RelatedBooks({ currentBookId, id }: RelatedBooksType) {
   const { data, refetch } = useRelatedBooks(id);
-  const relatedBooks = useRefetchLocation(currentBookId, data, refetch);
+  const relatedBooks = useRefetchLocation({ currentBookId, data, refetch });
+  let uiCard;
+
+  if (relatedBooks.length > 0) {
+    uiCard = relatedBooks.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 libros relacionados.
+      </Text>
+    );
+  }
 
   return (
     <>
-      <ContainerRCard>
-        {relatedBooks.map(({ id, title, authors, pathUrl }: CardType) => (
-          <React.Fragment key={id}>
-            <RelatedCard
-              title={title}
-              authors={authors}
-              pathUrl={pathUrl}
-              refetchQueries={refetch}
-            />
-          </React.Fragment>
-        ))}
-      </ContainerRCard>
+      <ContainerRCard>{uiCard}</ContainerRCard>
     </>
   );
 }

src/components/types.d.ts

@@ -91,9 +91,11 @@ interface ModalType extends DisclosureType {
   data?: string;
 }
 
-interface ReleatedBooksType {
-  id?: string;
+interface RelatedBooksType
+  extends Omit<CardType, 'title' | 'authors' | 'pathUrl'> {
+  data?: any;
   currentBookId?: string | undefined;
+  refetch?: () => void;
 }
 
 interface SelectType extends Omit<SelectBooksType, 'label'> {
@@ -149,7 +151,7 @@ export type {
   ModalCroppType,
   ModalCropperType,
   ModalType,
-  ReleatedBooksType,
+  RelatedBooksType,
   DrawerType,
   LanguageAndYearType,
   BookSearchResultsType,

src/hooks/useRefetchLocation.tsx

@@ -1,23 +1,42 @@
 import { useState, useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 
-export function useRefetchLocation(currentBookId, data, refetch) {
+import { RelatedBooksType } from '../components/types';
+
+type Book = {
+  pathUrl: string;
+};
+
+export function useRefetchLocation({
+  currentBookId,
+  data,
+  refetch,
+}: RelatedBooksType) {
   const location = useLocation();
   const pathname = location.pathname;
   const [previousPathname, setPreviousPathname] = useState(pathname);
-  const [relatedBooks, setRelatedBooks] = useState([]);
+  const [relatedBooks, setRelatedBooks] = useState<any[]>([]);
 
   useEffect(() => {
-    const filteredBooks = data.filter((book) => {
+    const filteredBooks = data.filter((book: Book) => {
+      if (book.pathUrl === currentBookId) {
+        if (refetch !== undefined) {
+          refetch();
+        }
+      }
+
       return book.pathUrl !== currentBookId;
     });
 
     setRelatedBooks(filteredBooks);
 
     if (pathname !== previousPathname) {
-      refetch();
+      if (refetch !== undefined) {
+        refetch();
+      }
       setPreviousPathname(pathname);
     }
   }, [data, currentBookId, pathname, refetch, previousPathname]);
+
   return relatedBooks;
 }