avanzando las barra de busqueda

src/front/js/component/navbar.js

@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useState } from "react";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { Context } from "../store/appContext";
 import { privateUser } from "../apiservices/callToApi";
 
@@ -8,27 +8,33 @@ export const Navbar = () => {
 	const { store } = useContext(Context);
 	const [isVerified, setIsVerified] = useState(null);
 	const [search, setSearch] = useState("");
+	const navigate = useNavigate();
 
-	let products = [];
-	const phones = store.phones;
-	const tvs = store.tvs;
-	const laptops = store.laptops;
-
-	products = phones.concat(laptops, tvs);
-
-	console.log(products);
-
-
-
+	const searcher = (e) => {
+		setSearch(e.target.value)
+	};
 
 	const checkout = async () =>{
 		const verified = await privateUser()
 		setIsVerified(verified)};
 
+
+	const verifiedSearch = () => {
+		if(search){
+			navigate('/search-product')
+		}else{
+			navigate('/')
+		};
+	};
+
 	useEffect(()=>{
 		checkout();
 	},[]);
 
+	useEffect(()=>{
+		verifiedSearch();
+	},[search])
+
 	const logOut = () => {
 		sessionStorage.removeItem('token');
 		sessionStorage.removeItem('idUser')
@@ -47,7 +53,7 @@ export const Navbar = () => {
 					</button>
 					<div className="d-flex">
 						<form className="d-flex" role="search">
-							<input className="form-control me-2" type="search" placeholder="Search" aria-label="Search"></input>
+							<input className="form-control me-2" onChange={(e)=>searcher(e)} type="search" placeholder="Search" aria-label="Search"></input>
 						</form>
 						<div className="collapse navbar-collapse" id="navbarSupportedContent">
 							<ul className="navbar-nav me-auto mb-2 mb-lg-0">

src/front/js/layout.js

@@ -17,6 +17,7 @@ import { Catalog } from "./pages/catalog";
 import { VistaIndividualTv } from "./pages/vistaIndividualTV";
 import { VistaIndividualLaptop } from "./pages/vistaIndividualLaptop";
 import { Cart } from "./pages/cart";
+import { SearchProduct } from "./pages/SearchProduct";
 
 
 //create your first component
@@ -45,6 +46,7 @@ const Layout = () => {
                             <Route element={<Catalog productList="phones" />} path="/phones-catalog" />
                             <Route element={<Catalog productList="tvs" />} path="/tvs-catalog" />
                             <Route element={<Catalog productList="laptops" />} path="/laptops-catalog" />
+                            <Route element={<SearchProduct/>} path="/search-product" />
 
                             <Route element={<Cart />} path="/cart" />
 

src/front/js/pages/SearchProduct.js

@@ -0,0 +1,19 @@
+import React, { useContext } from "react";
+import { Context } from "../store/appContext";
+import { CatalogProductCard } from "../component/catalog-product-card";
+
+export const SearchProduct = () => {
+    const {store} = useContext(Context);
+
+    let products = [];
+	const phones = store.phones;
+	const tvs = store.tvs;
+	const laptops = store.laptops;
+
+	products = phones.concat(laptops, tvs);
+    return (
+        <>
+            <h1> soy yo</h1>
+        </>
+    )
+}