empty query shows front page and loading spinner on new query

mrkyns · Apr 21, 2023 · 15fcfae · 15fcfae
1 parent babeb18
commit 15fcfae
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 11 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -39,7 +39,8 @@ function App() {
 
   useEffect(() => {
     if (isLoadingFront) return;
-    fetchByQuery(query, hitsPerPage, pageNum);
+    if (query) fetchByQuery(query, hitsPerPage, pageNum);
+    else fetchFrontPage();
   }, [query]);
 
   // first Run
@@ -66,6 +67,7 @@ function App() {
         loading={loading}
         filterBy={sortBy}
         query={query}
+        setLoading={setLoading}
       />
       <Footer />
       <Reagan />

diff --git a/src/components/Body.jsx b/src/components/Body.jsx
@@ -9,6 +9,7 @@ export default function Body({
   loading,
   query,
   sortBy,
+  setLoading,
 }) {
   const [hits, setHits] = useState([]);
 
@@ -36,22 +37,28 @@ export default function Body({
 
   return (
     <div className="Body">
-      <Search fetchedData={fetchedData} setQuery={setQuery} />
+      <Search
+        fetchedData={fetchedData}
+        setQuery={setQuery}
+        setLoading={setLoading}
+      />
       <ClimbingBoxLoader
         color="var(--accent)"
         loading={loading}
         cssOverride={override}
         size={25}
       />
 
-      <div className="pagination">
-        <Pagination
-          setHits={setHits}
-          itemsPerPage={20}
-          hits={hits}
-          query={query}
-        />
-      </div>
+      {loading ? null : (
+        <div className="pagination">
+          <Pagination
+            setHits={setHits}
+            itemsPerPage={20}
+            hits={hits}
+            query={query}
+          />
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/components/Search.jsx b/src/components/Search.jsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 
-export default function Search({ setQuery }) {
+export default function Search({ setQuery, setLoading }) {
   const [inputText, setInputText] = useState("");
 
   let inputHandler = (e) => {
@@ -13,7 +13,9 @@ export default function Search({ setQuery }) {
 
   let submitHandler = (e) => {
     e.preventDefault();
+    setLoading(true);
     setQuery(inputText);
+    setInputText("");
   };
 
   return (
@@ -25,6 +27,7 @@ export default function Search({ setQuery }) {
           type="search"
           placeholder="Enter your query"
           onChange={inputHandler}
+          value={inputText}
         />
         <button className="search_button">Search</button>
       </form>