Search suggestion

1 files changed, 38 insertions, 3 deletions

diff --git a/src/components/Header.js b/src/components/Header.js
index 2a33df63..e3d8d41d 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -4,17 +4,19 @@ import ShoppingCartIcon from "../icons/shopping-cart.svg";
 import SearchIcon from "../icons/search.svg";
 import MenuIcon from "../icons/menu.svg";
 import ChevronRightIcon from "../icons/chevron-right.svg";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import Head from "next/head";
 import Logo from "../images/logo.png";
 import { useRouter } from "next/router";
 import { getAuth } from "../helpers/auth";
+import axios from "axios";
 
 
 export default function Header({ title }) {
   const router = useRouter();
   const { q = '' } = router.query;
   const [searchQuery, setSearchQuery] = useState(q);
+  const [suggestions, setSuggestions] = useState([]);
   const searchQueryRef = useRef();
   const [isMenuActive, setIsMenuActive] = useState(false);
   const [auth, setAuth] = useState();
@@ -24,9 +26,30 @@ export default function Header({ title }) {
   }, [auth]);
 
   useEffect(() => {
-    if (q) searchQueryRef.current.blur();
+    if (q) {
+      searchQueryRef.current.blur();
+      setSuggestions([]);
+    };
   }, [q])
 
+  const clickSuggestion = (value) => {
+    console.log(value);
+    router.push(`/shop/search?q=${value}`, undefined, { scroll: false });
+  }
+
+  const getSuggestion = useCallback(async () => {
+    if (searchQuery.trim().length > 0) {
+      let result = await axios(`${process.env.SELF_HOST}/api/shop/suggest?q=${searchQuery.trim()}`);
+      setSuggestions(result.data.suggest.mySuggester[searchQuery.trim()].suggestions);
+    } else {
+      setSuggestions([]);
+    }
+  }, [searchQuery]);
+
+  useEffect(() => {
+    if (document.activeElement == searchQueryRef.current) getSuggestion();
+  }, [getSuggestion]);
+
   const openMenu = () => setIsMenuActive(true);
   const closeMenu = () => setIsMenuActive(false);
 
@@ -101,15 +124,17 @@ export default function Header({ title }) {
             </button>
           </div>
         </div>
-        <form onSubmit={searchSubmit} className="flex mt-2">
+        <form onSubmit={searchSubmit} className="relative flex mt-2">
             <input 
               ref={searchQueryRef}
               type="text" 
               name="q" 
               onChange={(e) => setSearchQuery(e.target.value)} 
+              onFocus={getSuggestion}
               value={searchQuery} 
               className="form-input rounded-r-none border-r-0 focus:ring-0" 
               placeholder="Ketikan nama, merek, part number"
+              autoComplete="false"
             />
             <button 
               type="submit" 
@@ -118,8 +143,18 @@ export default function Header({ title }) {
             >
               <SearchIcon />
             </button>
+            {suggestions.length > 1 ? (
+              <div className="absolute w-full top-[50px] rounded-b bg-white border border-gray-200">
+                {suggestions.map((suggestion, index) => (
+                  <p onClick={() => clickSuggestion(suggestion.term)} className="w-full p-2" key={index}>{suggestion.term}</p>
+                ))}
+              </div>
+            ) : ''}
         </form>
       </div>
+      {suggestions.length > 1 ? (
+        <div className="fixed top-0 left-0 w-full h-full bg-gray-900/60 z-40" onClick={() => setSuggestions([])}></div>
+      ) : ''}
     </>
   )
 }
\ No newline at end of file