Merge pull request #4 from Wilcolab/search-box

add search box with filter

frontend/src/components/Home/Banner.js

@@ -1,15 +1,21 @@
 import React from "react";
 import logo from "../../imgs/logo.png";
 
+import SearchBox from "./SearchBox"
+
+
 const Banner = () => {
   return (
     <div className="banner text-white">
       <div className="container p-4 text-center">
-        <img src={logo}/>
+        <img src={logo} />
         <div>
-          <span>A place to </span>
-          <span id="get-part">get</span>
-          <span> the cool stuff.</span>
+          <div className="search_wrapper">
+            <span>A place to </span>
+            <span id="get-part">get</span>
+            <SearchBox />
+            <span> the cool stuff.</span>
+          </div>
         </div>
       </div>
     </div>

frontend/src/components/Home/SearchBox.js

@@ -0,0 +1,69 @@
+import React, { useState, useEffect } from 'react';
+import agentObj from '../../agent'; // Import the API agent
+import { debounce } from 'lodash'; // Use lodash for debouncing
+
+const SearchBox = () => {
+  const [searchTerm, setSearchTerm] = useState(''); // State to store the search input
+  const [items, setItems] = useState([]); // State to store the search results
+  const [loading, setLoading] = useState(false); // State to handle loading state
+
+  // Debounced function to fetch items based on search term
+  const debouncedSearch = debounce(async (term) => {
+    if (term.length >= 3) {
+      setLoading(true);
+      try {
+        const result = await agentObj.Items.all(1, term); // Fetch items based on search term
+        setItems(result.items); // Update items state with the search results
+      } catch (error) {
+        console.error('Error fetching search results:', error);
+      } finally {
+        setLoading(false);
+      }
+    } else {
+      setItems([]); // Clear results if search term is less than 3 characters
+    }
+  }, 500); // 500ms debounce delay
+
+  // Handle input change
+  const handleInputChange = (e) => {
+    setSearchTerm(e.target.value); // Update search term
+  };
+
+  // Use effect to trigger debounced search when searchTerm changes
+  useEffect(() => {
+    debouncedSearch(searchTerm); // Call debouncedSearch whenever the searchTerm changes
+    return () => {
+      debouncedSearch.cancel(); // Clean up debounce on unmount
+    };
+  }, [searchTerm]); // Depend on searchTerm to trigger effect
+
+  return (
+    <div className="search_box">
+      <input
+        type="text"
+        id="search-box"
+        value={searchTerm}
+        onChange={handleInputChange}
+        placeholder="What is it you truly desire?"
+      />
+      <i className="bi bi-search"></i>
+
+      {loading && <div>Loading...</div>} {/* Show loading indicator while fetching */}
+
+      <div className="search_results">
+        {items.length > 0 ? (
+          items.map((item) => (
+            <div key={item.slug} className="search_result_item">
+              <h3>{item.title}</h3>
+              <p>{item.description}</p>
+            </div>
+          ))
+        ) : (
+          <div>No results found</div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default SearchBox;

frontend/src/custom.scss

@@ -59,3 +59,34 @@ body {
 .user-info {
   min-width: 800px;
 }
+
+
+.search_wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  span {
+    margin: 0 3px;
+  }
+}
+
+.search_box {
+  background: transparent;
+  position: relative;
+  width: fit-content;
+  input {
+    border: none;
+    outline: none;
+    padding: 10px 0;
+    text-indent: 5px;
+    border-radius: 7px;
+  }
+
+  i {
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    color: #000;
+  }
+}

package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "lodash": "^4.17.21"
+  }
+}

yarn.lock

@@ -0,0 +1,8 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==