fixes load more

src/App.css

@@ -1,3 +1,7 @@
+* {
+  caret-color: transparent;
+}
+
 .main {
   background-image: url('../src/assets/chris-lawton-zvKx6ixUhWQ-unsplash.jpg');
   background-size: cover;

src/App.jsx

@@ -11,6 +11,8 @@ import Modal from "./components/Modal/Modal";
 import ModalContextProvider from "./context/ModalContextProvider";
 import LoadMore from "./components/LoadMore/LoadMore";
 import LoadMoreContextProvider from "./context/LoadMoreContextProvider";
+import LoadingSpinner from "./components/LoadingSpinner/LoadingSpinner";
+import LoadingSpinnerContextProvider from "./context/LoadingSpinnerContextProvider";
 
 function App() {
   console.log("Im in App");
@@ -26,21 +28,24 @@ function App() {
     <ErrorContextProvider>
       <ModalContextProvider>
         <LoadMoreContextProvider>
-          <div className="main">
-            <div className="container__header">
-              <Header />
-              <Searchbar handleSubmit={handleSubmit} />
+          <LoadingSpinnerContextProvider>
+            <div className="main">
+              <div className="container__header">
+                <Header />
+                <Searchbar handleSubmit={handleSubmit} />
+              </div>
             </div>
-          </div>
+            <LoadingSpinner />
 
-          <div className="books__container">
-            {searchTerm && <BookLoader searchTerm={searchTerm} />}
-          </div>
+            <div className="books__container">
+              {searchTerm && <BookLoader searchTerm={searchTerm} />}
 
-          <LoadMore />
-          <Modal />
-          <Error />
-          <Footer />
+              <LoadMore />
+              <Modal />
+              <Error />
+              <Footer />
+            </div>
+          </LoadingSpinnerContextProvider>
         </LoadMoreContextProvider>
       </ModalContextProvider>
     </ErrorContextProvider>

src/components/BookLoader.jsx/BookLoader.jsx

@@ -5,12 +5,15 @@ import { useEffect, useState, useContext } from "react";
 import { ErrorContext } from "../../context/ErrorContextProvider";
 import { LoadMoreContext } from "../../context/LoadMoreContextProvider";
 import LoadMore from "../LoadMore/LoadMore";
+import { LoadingSpinnerContext } from "../../context/LoadingSpinnerContextProvider";
 
 function BookLoader({ searchTerm }) {
   //const [query, setQuery] = useState(null);
   const [booksData, setBooksData] = useState(null);
   let { errorMessage, setErrorMessage } = useContext(ErrorContext);
-  let { maxResults, setMaxResults } = useContext(LoadMoreContext);
+  let { maxResults, setMaxResults, showLoadMore, setShowLoadMore } =
+    useContext(LoadMoreContext);
+  const { isLoading, setIsLoading } = useContext(LoadingSpinnerContext);
 
   console.log("BookLoader receieved search term from App.jsx ", searchTerm);
   console.log(
@@ -22,10 +25,11 @@ function BookLoader({ searchTerm }) {
 
   useEffect(() => {
     console.log("useEffect called");
+    setMaxResults(10);
 
     if (searchTerm != null) {
-      setMaxResults(10);
       console.log("i am going to make a request to server");
+      setIsLoading(true);
       getBooksList(searchTerm, maxResults)
         .then((booksData) => {
           setBooksData(booksData);
@@ -56,16 +60,21 @@ function BookLoader({ searchTerm }) {
 
     if (searchTerm != null) {
       console.log("i am going to make a request to server");
+
       getBooksList(searchTerm, maxResults)
         .then((booksData) => {
           setBooksData(booksData);
           console.log(
             "*****Received books data from getBooksList**** ",
             booksData
           );
+          setShowLoadMore(true);
         })
         .catch((e) => {
-          console.log("AN ERROR OCCURED WHILE FETCHING BOOKS", e.message);
+          console.log(
+            "AN ERROR OCCURED WHILE FETCHING BOOKS IN LOAD MORE USE EFFECT",
+            e.message
+          );
         });
     }
   }, [maxResults]);

src/containers/Card.jsx → src/components/Card/Card.jsx

@@ -1,7 +1,7 @@
 import styles from "./Card.module.scss";
 import { useContext } from "react";
-import { ModalContext } from "../context/ModalContextProvider";
-import Modal from "../components/Modal/Modal";
+import { ModalContext } from "../../context/ModalContextProvider";
+import Modal from "../Modal/Modal";
 
 function Card(book) {
   console.log("i am in Card");

src/components/LoadMore/LoadMore.jsx

@@ -1,15 +1,23 @@
 import React, { useContext } from "react";
 import { LoadMoreContext } from "../../context/LoadMoreContextProvider";
+import styles from "./LoadMore.module.scss";
 
 function LoadMore() {
-  let { maxResults, setMaxResults } = useContext(LoadMoreContext);
+  let { maxResults, setMaxResults, showLoadMore, setShowLoadMore } =
+    useContext(LoadMoreContext);
 
   const loadMoreHandler = () => {
     setMaxResults(maxResults + 10);
   };
 
   return (
-    <>{maxResults && <button onClick={loadMoreHandler}>Load More</button>}</>
+    <div className={styles.container}>
+      {showLoadMore && (
+        <button onClick={loadMoreHandler} className={styles.container__button}>
+          Load More
+        </button>
+      )}
+    </div>
   );
 }
 

src/components/LoadMore/LoadMore.module.scss

@@ -0,0 +1,12 @@
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &__button {
+    font-size: 1em;
+    padding: 5px;
+    background-color: hsl(0, 0%, 0%, 0.5);
+    color: white;
+  }
+}

src/components/LoadingSpinner/LoadingSpinner.jsx

@@ -0,0 +1,10 @@
+import React, { useContext } from "react";
+import { LoadingSpinnerContext } from "../../context/LoadingSpinnerContextProvider";
+
+function LoadingSpinner() {
+  const { isLoading, setIsLoading } = useContext(LoadingSpinnerContext);
+  console.log("value of is loading is", isLoading);
+  return <>{isLoading && <div></div>}</>;
+}
+
+export default LoadingSpinner;

src/containers/ShowBooksList.jsx

@@ -1,14 +1,18 @@
-import Card from "./Card";
-import styles from "./Card.module.scss";
+import Card from "../components/Card/Card.jsx";
+import styles from "../components/Card/Card.module.scss";
 import { useContext } from "react";
 import { ErrorContext } from "../context/ErrorContextProvider";
 import { ModalContext } from "../context/ModalContextProvider";
+import { LoadingSpinnerContext } from "../context/LoadingSpinnerContextProvider.jsx";
+import { LoadMoreContext } from "../context/LoadMoreContextProvider.jsx";
 
 function ShowBooksList(data) {
   //qksjfksanfdjksnf
 
   let { errorMessage, setErrorMessage } = useContext(ErrorContext);
   let { completeData, setCompleteData } = useContext(ModalContext);
+  let { isLoading, setIsLoading } = useContext(LoadingSpinnerContext);
+  let { maxResults, setMaxResults } = useContext(LoadMoreContext);
 
   let title = "";
   let authors = "";
@@ -53,6 +57,9 @@ function ShowBooksList(data) {
       const full_description = book.volumeInfo.description;
       description = full_description.replace(/^(.{50}[^\s]*).*/, "$1"); //this shows only 50 characters plus any subsequent non-space characters.
       thumbnail = book.volumeInfo.imageLinks.thumbnail + "&fife=w20000-h20000";
+
+      //Show Load More button
+      setMaxResults(10);
     } catch {
       (e) => {
         console.log(e.message);

src/context/LoadMoreContextProvider.jsx

@@ -5,8 +5,11 @@ export const LoadMoreContext = createContext(null);
 
 function LoadMoreContextProvider({ children }) {
   const [maxResults, setMaxResults] = useState(null);
+  const [showLoadMore, setShowLoadMore] = useState(false);
   return (
-    <LoadMoreContext.Provider value={{ maxResults, setMaxResults }}>
+    <LoadMoreContext.Provider
+      value={{ maxResults, setMaxResults, showLoadMore, setShowLoadMore }}
+    >
       {children}
     </LoadMoreContext.Provider>
   );

src/context/LoadingSpinnerContextProvider.jsx

@@ -0,0 +1,15 @@
+/* eslint-disable react/prop-types */
+import React, { createContext, useState } from "react";
+
+export const LoadingSpinnerContext = createContext(null);
+
+function LoadingSpinnerContextProvider({ children }) {
+  const [isLoading, setIsLoading] = useState(false);
+  return (
+    <LoadingSpinnerContext.Provider value={{ isLoading, setIsLoading }}>
+      {children}
+    </LoadingSpinnerContext.Provider>
+  );
+}
+
+export default LoadingSpinnerContextProvider;