From 2c4bbb4d70c60a0aab1e0ac4e974f5a6b9ae8aa0 Mon Sep 17 00:00:00 2001
From: franco sanchez <franco_genta@hotmail.com>
Date: Tue, 7 Nov 2023 11:54:47 -0300
Subject: [PATCH] chore: type correction in hook useRefetchLocation and other
 changes

---
 .github/workflows/type-check.yml      |  4 ++-
 src/components/cards/MoreBooks.tsx    |  6 ++--
 src/components/cards/RelatedBooks.tsx | 43 +++++++++++++++++----------
 src/components/types.d.ts             |  8 +++--
 src/hooks/useRefetchLocation.tsx      | 27 ++++++++++++++---
 5 files changed, 62 insertions(+), 26 deletions(-)

diff --git a/.github/workflows/type-check.yml b/.github/workflows/type-check.yml
index 53d036e..046cff0 100644
--- a/.github/workflows/type-check.yml
+++ b/.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/typescript-error-reporter-action@v1.0.2
diff --git a/src/components/cards/MoreBooks.tsx b/src/components/cards/MoreBooks.tsx
index 641e3f6..62e4bd0 100644
--- a/src/components/cards/MoreBooks.tsx
+++ b/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 (
     <>
diff --git a/src/components/cards/RelatedBooks.tsx b/src/components/cards/RelatedBooks.tsx
index d007149..4a58a7e 100644
--- a/src/components/cards/RelatedBooks.tsx
+++ b/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>
     </>
   );
 }
diff --git a/src/components/types.d.ts b/src/components/types.d.ts
index 7c75dc7..00ac5de 100644
--- a/src/components/types.d.ts
+++ b/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,
diff --git a/src/hooks/useRefetchLocation.tsx b/src/hooks/useRefetchLocation.tsx
index c58817c..4e0589e 100644
--- a/src/hooks/useRefetchLocation.tsx
+++ b/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;
 }