Add search products functionality (fixes #136)

src/App.jsx

@@ -19,12 +19,12 @@ import CheckNow from "./Components/CheckNow";
 import "./index.css";
 import Signup from "./Pages/Signup";
 import NotFound from "./Pages/NotFound";
+import Search from "./Pages/Search";
 
 const App = () => {
   return (
     <Router>
       <Navbar />
-
       <div className="bg-white text-black dark:bg-black dark:text-white min-h-screen">
         <Routes>
           <Route path="/login" element={<LoginWithFooter />} />
@@ -42,6 +42,7 @@ const App = () => {
           <Route path="*" element={<NotFound />} />
           <Route path="/user/paymentsuccess" element={<PaymentSuccess />} />
           <Route path="/user/paymentfail" element={<PaymentFail />} />
+            <Route path="/search" element={<Search/>} />
         </Routes>
       </div>
 

src/Components/Navbar.jsx

@@ -4,8 +4,10 @@ import { ShopContext } from "../Context/ShopContext";
 import { SavedContext } from "../Context/SavedContext";
 import Cart from "../assets/cart_icon.png";
 import Wishlist from "../assets/wishlist_icon.png";
+import { Search } from "@mui/icons-material";
 import DarkModeToggle from './DarkModeToggle'
 
+
 const Navbar = () => {
   const { getCartQuantity } = useContext(ShopContext);
   const { getListQuantity } = useContext(SavedContext);
@@ -57,6 +59,10 @@ const Navbar = () => {
             Login
           </Link>
         </button>
+        <Link to="/search">
+
+          <div className="cursor-pointer mr-2"><Search /></div>
+        </Link>
         <Link to="/cart">
           <img src={Cart} alt="cart" className="w-6 h-6 cursor-pointer filter dark:invert" />
         </Link>

src/Pages/Search.jsx

@@ -0,0 +1,88 @@
+import { useContext, useState } from "react";
+import Footer from "../Components/Footer";
+import { SearchOutlined } from "@mui/icons-material";
+import { ShopContext } from "../Context/ShopContext";
+import Item from "../Components/Item";
+
+function Search() {
+
+    const [category, setCategory] = useState("all")
+    const [searchKey, setSearchKey] = useState("")
+    const { all_products } = useContext(ShopContext);
+    const [searchResults, setSearchResults] = useState([])
+
+    const onCategoryChange = (val) => {
+        setCategory(val)
+    }
+
+    const onSearchKeyChange = (val) => {
+        setSearchKey(val.toLowerCase())
+        setSearchResults([])
+    }
+
+    const onSearch = () => {
+        if (searchKey === "") return;
+
+        console.log(searchKey)
+
+        const filteredProducts = all_products.filter((product) => {
+            if (category === "all") return product.name.toLowerCase().includes(searchKey)
+            return product.category === category && product.name.toLowerCase().includes(searchKey)
+        })
+
+        setSearchResults(filteredProducts)
+        console.log("hello".toLowerCase().includes("HELLO".toLowerCase()))
+        console.log(filteredProducts);
+
+    }
+
+
+    return (
+
+        <>
+            <section className="p-5 min-h-screen">
+
+                <div className="w-full flex *:py-2 *:px-4 shadow-lg rounded-full">
+                    <select
+                        className="rounded-full border-2 hover:border-orange-500 outline-none"
+                        onChange={(e) => onCategoryChange(e.target.value)}
+                    >
+                        <option value="all">All</option>
+                        <option value="women">Women</option>
+                        <option value="men">Men</option>
+                        <option value="kid">Kids</option>
+                    </select>
+                    <input
+                        type="search"
+                        placeholder="Search entire fashion here..."
+                        className="flex-1 outline-none"
+                        onChange={(e) => onSearchKeyChange(e.target.value)}
+                    />
+                    <button
+                        className="bg-orange-500 rounded-r-full hover:bg-orange-600 text-white"
+                        onClick={onSearch}
+                    ><SearchOutlined /></button>
+                </div>
+
+
+                {
+                    searchResults.length === 0 ? 
+                        <p className="text-center mt-40">No items to display!</p> :
+                        <div className="grid place-items-start mt-5 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
+                            {searchResults.map((product) => {
+                                return <Item data={product} key={product.id} />;
+                            })}
+                        </div>
+                }
+
+
+
+
+            </section>
+            <Footer />
+        </>
+    )
+
+}
+
+export default Search;