Merge pull request #53 from chingu-voyages/feature/results-loading-no…

…tification 'Loading' message when results loading
chingu-voyages · Nov 2, 2020 · 1c681c1 · 1c681c1
2 parents a161315 + be62b4e
commit 1c681c1
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 7 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -12,11 +12,12 @@ export default function App() {
   const [query, setQuery] = useState(undefined);
   const [orderBy, setOrderBy] = useState("relevance");
   const [pageNumber, setPageNumber] = useState(1);
-
+  const [areResultsLoading, setAreResultsLoading] = useState(false);
   const { books, error, isLastPage, queryHistory } = useBookSearch(
     query,
     orderBy,
-    pageNumber
+    pageNumber,
+    setAreResultsLoading
   ); // 'books' has search results
 
   const handleSubmit = (e, searchTerm, orderBy) => {
@@ -32,8 +33,13 @@ export default function App() {
   });
 
   function handleScroll() {
-    // if at the bottom of the page and the current page isn't the last page
-    if (window.innerHeight + document.documentElement.scrollTop === document.documentElement.offsetHeight && !isLastPage) {
+    // if at the bottom of the page && the current page isn't the last page && results aren't loading
+    if (
+      window.innerHeight + document.documentElement.scrollTop ===
+        document.documentElement.offsetHeight &&
+      !isLastPage &&
+      !areResultsLoading
+    ) {
       setPageNumber((prevPageNo) => prevPageNo + 1);
     }
   }
@@ -44,6 +50,7 @@ export default function App() {
       <Header />
       <Search handleSubmit={handleSubmit} error={error} queryHistory={queryHistory} />
       <CardList books={books.map(googleBookToAppBook)} isLastPage={isLastPage} />
+      <div>{areResultsLoading ? "Loading" : ""}</div>
       <Footer />
     </div>
   );
@@ -56,6 +63,7 @@ function googleBookToAppBook({ volumeInfo }) {
     subtitle: subtitle === undefined ? "" : subtitle,
     authors: authors === undefined ? [] : authors,
     publisher: publisher === undefined ? "" : publisher,
-    thumbnailImageLink: imageLinks === undefined ? "" : imageLinks.smallThumbnail,
+    thumbnailImageLink:
+      imageLinks === undefined ? "" : imageLinks.smallThumbnail,
   };
 }
diff --git a/src/hooks/useBookSearch.jsx b/src/hooks/useBookSearch.jsx
@@ -1,7 +1,12 @@
 import { useState, useEffect } from "react";
 import axios from "axios";
 
-export default function useBookSearch(query, orderBy, pageNumber) {
+export default function useBookSearch(
+  query,
+  orderBy,
+  pageNumber,
+  setAreResultsLoading
+) {
   const noOfCardsPerPage = 40;
   const [error, setError] = useState("");
   const [books, setBooks] = useState([]);
@@ -14,6 +19,7 @@ export default function useBookSearch(query, orderBy, pageNumber) {
     } else if (query.trim().length === 0) {
       setError("Please enter a search term");
     } else {
+      setAreResultsLoading(true);
       axios({
         method: "GET",
         url: `https://www.googleapis.com/books/v1/volumes`,
@@ -25,11 +31,14 @@ export default function useBookSearch(query, orderBy, pageNumber) {
         },
       })
         .then((res) => {
+          setAreResultsLoading(false);
+
           if (res.data.items && res.data.items.length < noOfCardsPerPage) {
             setIsLastPage(true);
           } else {
             setIsLastPage(false);
           }
+
           setBooks((prevBooks) => {
             if (pageNumber === 1) {
               setQueryHistory((q) => {
@@ -54,10 +63,11 @@ export default function useBookSearch(query, orderBy, pageNumber) {
           }
         })
         .catch((err) => {
+          setAreResultsLoading(false);
           setError(err.message);
         });
     }
-  }, [query, orderBy, pageNumber]);
+  }, [query, orderBy, pageNumber, setAreResultsLoading]);
 
   return { error, books, isLastPage, queryHistory };
 }