import Image from "next/image"; import Link from "./Link"; 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 { 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(); useEffect(() => { if (!auth) setAuth(getAuth()) }, [auth]); useEffect(() => { 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); const searchSubmit = (e) => { e.preventDefault(); if (searchQuery.length > 0) { router.push(`/shop/search?q=${searchQuery}`, undefined, { scroll: false }); } else { searchQueryRef.current.focus(); } } return ( <> {title}

{auth ? (

Hi, {auth.name}

) : ( <> Masuk Daftar )}

{auth ? ( Profil Saya

) : ''} Semua Brand

Blog Indoteknik

{suggestions.length > 1 ? (

setSuggestions([])}>

) : ''} ) }