Refactor code

pruebas/01-reading-list/tonysantana1492/src/App.tsx

@@ -1,41 +1,21 @@
-import { useCallback, useEffect } from 'react'
+import { useEffect } from 'react'
 
 import { Books, Favorites, Loading, SideMenu } from './components'
-import { useBook, useLocalStore } from './hooks'
+import { useBook } from './hooks'
 import { useMenu } from './store'
 
 export const App = () => {
-  const { favorites, getBooks, updateFavorites: setFavoritesFromLocalStore, loading, setLoading } = useBook()
-  const { getFromLocalStorage } = useLocalStore()
+  const { favorites, getBooks, loading, updateFromLocalStorage } = useBook()
   const { isOpen } = useMenu()
 
-  const updateFromLocalStorage = useCallback(() => {
-    const favorites = getFromLocalStorage()
-    setFavoritesFromLocalStore({ updatedFavorites: favorites })
-  }, [getFromLocalStorage, setFavoritesFromLocalStore])
-
-  const handlegetBooks = useCallback(async () => {
-    setLoading(true)
-
-    try {
-      await getBooks()
-      updateFromLocalStorage()
-    } catch (error) {
-      console.error(error)
-    } finally {
-      setLoading(false)
-    }
-  }, [getBooks, setLoading, updateFromLocalStorage])
-
   useEffect(() => {
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    handlegetBooks()
-  }, [handlegetBooks])
+    getBooks()
+  }, [getBooks])
 
   useEffect(() => {
     window.addEventListener('storage', updateFromLocalStorage)
     return () => { window.removeEventListener('storage', updateFromLocalStorage) }
-  }, [setFavoritesFromLocalStore, getFromLocalStorage, updateFromLocalStorage])
+  }, [updateFromLocalStorage])
 
   if (loading) {
     return <Loading />
@@ -44,7 +24,7 @@ export const App = () => {
   return (
 		<main className="flex flex-row pt-4 h-screen">
 			<Books />
-			<section className="hidden lg:flex">{favorites.length > 0 && <Favorites />}</section>
+			<aside className="hidden lg:flex">{favorites.length > 0 && <Favorites />}</aside>
 			{isOpen && <SideMenu />}
 		</main>
   )

pruebas/01-reading-list/tonysantana1492/src/components/BookList.tsx

@@ -12,7 +12,7 @@ export const BookList: React.FC<Props> = ({ books }) => {
   }
 
   return (
-		<ul className="grid grid-cols-[repeat(auto-fill,_minmax(300px,_1fr))] gap-5 w-full overflow-hidden overflow-y-auto">
+		<ul className="grid grid-cols-[repeat(auto-fill,minmax(300px,1fr))] gap-5 w-full overflow-hidden overflow-y-auto scrollbar-gutter-stable">
 			{books.map(book => <BookItem key={book.title} book={book} />)}
 		</ul>
   )

pruebas/01-reading-list/tonysantana1492/src/components/Image.tsx

@@ -12,7 +12,7 @@ export const Image: React.FC<Props> = ({ alt, src, className }) => {
 
   return (
 		<div className={className}>
-			{loading ? <ImgSkeletonScreen /> : <img alt={alt} src={src} className="object-cover w-full h-full" />}
+			{loading ? <ImgSkeletonScreen /> : <img alt={alt} src={src} loading='lazy' className="object-cover w-full h-full" />}
 		</div>
   )
 }

pruebas/01-reading-list/tonysantana1492/src/components/PageFilter.tsx

@@ -16,7 +16,7 @@ export const PageFilter: React.FC<Props> = ({ pageFilter, maxPages, updatePageFi
   return (
 		<div className="flex flex-col justify-center items-center w-2/4">
 			<div className='flex justify-between w-full items-center mb-3'>
-				<label className='text-xs font-bold text-gray-500' htmlFor={idRange}>Pages:</label>
+				<label className='text-xs font-bold text-gray-500' htmlFor={idRange}>Max pages:</label>
 				<p className='text-xs font-bold text-white bg-slate-900 px-2 rounded-full'>{pageFilter}</p>
 			</div>
 			<input role='filter-page' className='w-full h-2 bg-gray-300 rounded-lg appearance-none cursor-pointer accent-gray-800' id={idRange} type="range" onChange={handleChange} value={pageFilter} min={0} max={maxPages} />

pruebas/01-reading-list/tonysantana1492/src/hooks/useBook.ts

@@ -9,20 +9,29 @@ import { useLocalStore } from './useLocalStore'
 export const useBook = () => {
   const { books, setBooks, favorites, setFavorites, setMaxPages, maxPages } = useBookStore()
   const { genreFilter, pageFilter, updatePageFilter, titleFilter } = useFilter()
-  const { setToLocalStorage } = useLocalStore()
+  const { setToLocalStorage, getFromLocalStorage } = useLocalStore()
   const [loading, setLoading] = useState(true)
 
   const getBooks = useCallback(async () => {
-    const data = await bookService()
-    setBooks(data)
+    setLoading(true)
 
-    const maxPages = data.reduce((acumulator, { pages }) => {
-      if (acumulator > pages) return acumulator
-      return pages
-    }, 0)
+    try {
+      const data = await bookService()
+      setBooks(data)
+      updateFromLocalStorage()
 
-    updatePageFilter({ page: maxPages })
-    setMaxPages(maxPages)
+      const maxPages = data.reduce((acumulator, { pages }) => {
+        if (acumulator > pages) return acumulator
+        return pages
+      }, 0)
+
+      updatePageFilter({ page: maxPages })
+      setMaxPages(maxPages)
+    } catch (error) {
+      console.error(error)
+    } finally {
+      setLoading(false)
+    }
   }, [setBooks, setMaxPages, updatePageFilter])
 
   const addFavorite = ({ newFavorite }: { newFavorite: Book }) => {
@@ -47,6 +56,11 @@ export const useBook = () => {
     [favorites, updateFavorites]
   )
 
+  const updateFromLocalStorage = useCallback(() => {
+    const favorites = getFromLocalStorage()
+    updateFavorites({ updatedFavorites: favorites })
+  }, [getFromLocalStorage, updateFavorites])
+
   const availablesBooks = useMemo(() => {
     return books.filter(availableBook => {
       if (favorites.length === 0) return true
@@ -75,6 +89,6 @@ export const useBook = () => {
     maxPages,
     updateFavorites,
     loading,
-    setLoading
+    updateFromLocalStorage
   }
 }