From def5c78dd6435365b2f69bf6aee82068f6cf013c Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <rafizadanly@gmail.com>
Date: Wed, 23 Nov 2022 13:33:06 +0700
Subject: Search suggestion

---
 src/components/Filter.js      |  6 +++---
 src/components/Header.js      | 41 ++++++++++++++++++++++++++++++++++++++---
 src/pages/api/shop/suggest.js | 12 ++++++++++++
 3 files changed, 53 insertions(+), 6 deletions(-)
 create mode 100644 src/pages/api/shop/suggest.js

(limited to 'src')

diff --git a/src/components/Filter.js b/src/components/Filter.js
index a07beff3..fd9387d7 100644
--- a/src/components/Filter.js
+++ b/src/components/Filter.js
@@ -62,7 +62,7 @@ const Filter = ({
   }
 
   return (
-    <div className={`fixed w-full z-[60] py-8 px-4 ring ring-gray-300 bg-white rounded-t-3xl idt-transition ${isActive ? 'bottom-0' : 'bottom-[-100%]'}`}>
+    <div className={`fixed w-full z-[60] py-6 px-4 ring ring-gray-300 bg-white rounded-t-3xl idt-transition ${isActive ? 'bottom-0' : 'bottom-[-100%]'}`}>
       <div className="flex justify-between items-center mb-5">
         <h2 className="text-xl font-semibold">Filter Produk</h2>
         <button onClick={closeFilter}>
@@ -92,11 +92,11 @@ const Filter = ({
           <label>Harga</label>
           <div className="flex gap-x-4 mt-2 items-center">
             <input className="form-input" value={priceFrom} onChange={(e) => setPriceFrom(e.target.value)}/>
-            <span>-</span>
+            <span>&mdash;</span>
             <input className="form-input" value={priceTo} onChange={(e) => setPriceTo(e.target.value)}/>
           </div>
         </div>
-        <button type="submit" className="btn-yellow font-semibold mt-4 w-full">
+        <button type="submit" className="btn-yellow font-semibold mt-2 w-full">
           Terapkan Filter
         </button>
         {selectedBrand || selectedCategory || priceFrom > 0 || priceTo > 0 ? (
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
diff --git a/src/pages/api/shop/suggest.js b/src/pages/api/shop/suggest.js
new file mode 100644
index 00000000..6db1a851
--- /dev/null
+++ b/src/pages/api/shop/suggest.js
@@ -0,0 +1,12 @@
+import axios from "axios";
+
+export default async function handler(req, res) {
+  const { q } = req.query;
+
+  let result = await axios(process.env.SOLR_HOST + `/solr/products/suggest?suggest=true&suggest.dictionary=mySuggester&suggest.q=${q}`);
+  try {
+    res.status(200).json(result.data);
+  } catch (error) {
+    res.status(400).json({ error: error.message });
+  }
+}
\ No newline at end of file
-- 
cgit v1.2.3