search bar

components/layout/Header.js

@@ -8,11 +8,15 @@ import { Button, Container, Form, Nav, Navbar } from "react-bootstrap";
 import { getCurrentEndUser, loadUser } from "../../redux/actions/userActions";
 import { getCurrentEndUser, loadUser } from "../../redux/actions/userActions";
 import { useRouter } from "next/router";
 import { useRouter } from "next/router";
 import { getWishlists } from "../../redux/actions/activityAction";
 import { getWishlists } from "../../redux/actions/activityAction";
+import { Typeahead } from "react-bootstrap-typeahead";
+import axios from "axios";
 
 
 const Header = () => {
 const Header = () => {
   const { loadedUser } = useSelector(state => state.loadedUser);
   const { loadedUser } = useSelector(state => state.loadedUser);
   const { endUser } = useSelector(state => state.endUser);
   const { endUser } = useSelector(state => state.endUser);
-
+  const [open, setopen] = useState(false);
+  const [options, setoptions] = useState([]);
+  console.log("options", options);
   const dispatch = useDispatch();
   const dispatch = useDispatch();
   // console.log("user", loadedUser);
   // console.log("user", loadedUser);
   const [isSticky, setIsSticky] = useState(false);
   const [isSticky, setIsSticky] = useState(false);
@@ -61,7 +65,59 @@ const Header = () => {
             </Nav>
             </Nav>
             <Form className="d-flex me-3">
             <Form className="d-flex me-3">
               <div className="header-search">
               <div className="header-search">
-                <Form.Control type="search" placeholder="Search" className="me-2" aria-label="Search" />
+                <Typeahead
+                  open={open}
+                  id="select"
+                  placeholder="Search for products, brands or categories"
+                  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}
+                />
                 <Button className="search-icon" variant="outline-success">
                 <Button className="search-icon" variant="outline-success">
                   <span className="image-container">
                   <span className="image-container">
                     <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/search-icon.svg" />
                     <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/search-icon.svg" />