added in-memory cache to improve performance and loading times

spencer-rafada · Jan 31, 2024 · 79c4444 · 79c4444
1 parent 7afe34a
commit 79c4444
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 15 deletions.
diff --git a/src/app/books/components/BookComponent.tsx b/src/app/books/components/BookComponent.tsx
@@ -17,7 +17,10 @@ export default function BookComponent({ book }: { book: any }) {
         data-testid='book-component-mobile'
       >
         <NextLink
-          href={`/books/${book.editions.docs[0].key.replace('/books/', '')}`}
+          href={`/books/${book.editions.docs?.[0]?.key?.replace(
+            '/books/',
+            ''
+          )}`}
           passHref
         >
           <Inset clip='padding-box'>
@@ -49,7 +52,7 @@ export default function BookComponent({ book }: { book: any }) {
   return (
     <Card asChild variant='classic'>
       <NextLink
-        href={`/books/${book.editions.docs[0].key.replace('/books/', '')}`}
+        href={`/books/${book.editions.docs?.[0]?.key?.replace('/books/', '')}`}
         passHref
       >
         <Flex gap='5'>
@@ -88,19 +91,19 @@ export default function BookComponent({ book }: { book: any }) {
             </Text>
             <Box>
               <Text data-testid='book-publisher'>
-                Published by: {book.editions?.docs?.[0].publisher?.[0]},{' '}
+                Published by: {book.editions?.docs?.[0]?.publisher?.[0]},{' '}
               </Text>
               <Text data-testid='book-publish-date'>
-                {book.editions?.docs?.[0].publish_date?.[0]} -{' '}
+                {book.editions?.docs?.[0]?.publish_date?.[0]} -{' '}
               </Text>
               <Text data-testid='book-language'>
-                {book.editions?.docs?.[0].language?.[0].toUpperCase()}
+                {book.editions?.docs?.[0]?.language?.[0].toUpperCase()}
               </Text>
             </Box>
-            {book.editions?.docs?.[0].isbn && (
+            {book.editions?.docs?.[0]?.isbn && (
               <Box data-testid='book-isbn'>
                 <Text size='2'>ISBN: </Text>
-                {book.editions?.docs?.[0].isbn?.map(
+                {book.editions?.docs?.[0]?.isbn?.map(
                   (isbn: string, key: any) => {
                     return (
                       <span key={key}>

diff --git a/src/app/providers/SearchProvider.tsx b/src/app/providers/SearchProvider.tsx
@@ -9,6 +9,8 @@ import React, {
   useState,
 } from 'react'
 
+let cache = new Map()
+
 interface SearchContextProps {
   search: string
   setSearch: Dispatch<SetStateAction<string>>
@@ -40,14 +42,21 @@ export const SearchProvider = ({ children }: { children: ReactNode }) => {
   const [searchResult, setSearchResult] = useState<Object[]>([])
 
   const getBooks = async () => {
-    const res = await fetch(
-      `https://openlibrary.org/search.json?q=${encodeURIComponent(
-        search
-      )}&fields=key,title,author_name,editions,isbn,publish_date,ratings_average,ratings_count,publisher,author_key,language,first_sentence,person,place,subject`
-    )
-    const data = await res.json()
-    setLastSearch(data.q)
-    setSearchResult(data.docs)
+    if (cache.has(search.toLowerCase())) {
+      const cachedData = cache.get(search.toLowerCase())
+      setLastSearch(search)
+      setSearchResult(cachedData.docs)
+    } else {
+      const res = await fetch(
+        `https://openlibrary.org/search.json?q=${encodeURIComponent(
+          search
+        )}&fields=key,title,author_name,editions,isbn,publish_date,ratings_average,ratings_count,publisher,author_key,language,first_sentence,person,place,subject`
+      )
+      const data = await res.json()
+      cache.set(search.toLowerCase(), data)
+      setLastSearch(data.q)
+      setSearchResult(data.docs)
+    }
   }
 
   return (