import axios from "axios"; import Image from "next/image"; import { useRouter } from "next/router"; import React, { useState } from "react"; import { Button } from "react-bootstrap"; import { Typeahead } from "react-bootstrap-typeahead"; import "react-bootstrap-typeahead/css/Typeahead.css"; import { useDispatch } from "react-redux"; import { setActivityFilters } from "../../redux/actions/activityAction"; const SearchBar = () => { const [open, setopen] = useState(false); const [options, setoptions] = useState([]); const dispatch = useDispatch(); const router = useRouter(); console.log("options", options); return ( <> <section className="searchbar-session"> <div className="container"> <div className="row"> <div className="col-12"> <div className="searchbar-h"> <Typeahead open={open} id="select" placeholder="Search for products, brands or categories" onBlur={()=> { setopen(false) }} onChange={selected => { console.log("selected", selected); // router.push("/listing"); if (selected[0]?.label.includes("experience")) { // console.log("jjja"); router.push(`/activities/${selected[0].id}`); } if (selected[0]?.label.includes("category")) { router.push(`/listing?category=${selected[0].id}`); // dispatch(setActivityFilters({ filters: { category: selected[0].id, subCategories: [] } })); } // Handle selections... }} onInputChange={async e => { console.log(e); if (e.length > 1) { const config = { headers: { "Content-Type": "application/json" } }; const res = await axios.post(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/experience/get-search-response`, { string: e }, config); console.log("res", res.data); if (res.data.success) { let opts = res.data.data.categories?.map(item => { return { id: item.id, label: `${item.name} - category` }; }); console.log("here", opts); if (opts?.length > 0) { const a = res.data.data.activities?.map(item => { return { id: item.id, label: `${item.name} - experience` }; }); opts = [...opts, ...a]; } else { opts = res.data.data.activities?.map(item => { return { id: item.id, label: `${item.name} - experience` }; }); } console.log("opts", opts); setoptions(opts); setopen(true); } } else { setopen(false); } }} options={options} /> {/* <input type="text" /> */} <Button className="search-icon"> <span className="image-container"> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/search-icon.svg" /> </span> </Button> </div> </div> </div> </div> </section> </> ); }; export default SearchBar;