Added Search Filter

Nandita10062001 · Oct 24, 2024 · 8438db3 · 8438db3
1 parent 1d9d479
commit 8438db3
Show file tree

Hide file tree

Showing 9 changed files with 148 additions and 4 deletions.
diff --git a/client/public/index.html b/client/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="client\public\favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta

diff --git a/client/src/App.js b/client/src/App.js
@@ -18,12 +18,14 @@ import Profile from './pages/user/Profile.js';
 import Orders from './pages/user/Orders.js';
 import Products from './pages/Admin/Products.js';
 import UpdateProduct from './pages/Admin/UpdateProduct.js';
+import SearchPage from './pages/SearchPage.js';
 
 function App() {
   return (
     <>
       <Routes>
         <Route path="/" element={<HomePage />} />
+        <Route path="/search" element={<SearchPage />} />
         <Route path="/dashboard" element={<PrivateRoute />}>
           <Route path="user" element={<Dashboard />} />
           <Route path="user/profile" element={<Profile />} />

diff --git a/client/src/components/Form/SearchInput.js b/client/src/components/Form/SearchInput.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import { useSearch } from '../../context/Search';
+import axios from 'axios';
+import { useNavigate } from 'react-router-dom';
+
+const SearchInput = () => {
+  const [values, setValues] = useSearch();
+  const navigate = useNavigate();
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      const { data } = await axios.get(
+        `${process.env.REACT_APP_API}/api/v1/product/search/${values.keyword}`
+      );
+      setValues({ ...values, result: data });
+      navigate('/search');
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  return (
+    <div>
+      <form className="d-flex me-3" role="search" onSubmit={handleSubmit}>
+        <input
+          className="form-control me-2"
+          type="search"
+          placeholder="Search"
+          aria-label="Search"
+          value={values.keyword}
+          onChange={(e) => setValues({ ...values, keyword: e.target.value })}
+        />
+        <button className="btn btn-outline-success" type="submit">
+          Search
+        </button>
+      </form>
+    </div>
+  );
+};
+
+export default SearchInput;
diff --git a/client/src/components/Layout/Header.js b/client/src/components/Layout/Header.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { NavLink, Link, useNavigate } from 'react-router-dom';
 import { useAuth } from '../../context/Auth';
 import { toast } from 'react-toastify';
+import SearchInput from '../Form/SearchInput';
 
 const Header = () => {
   const [auth, setAuth] = useAuth();
@@ -39,6 +40,7 @@ const Header = () => {
               🛒 E-Commerce App
             </Link>
             <ul className="navbar-nav ms-auto mb-2 mb-lg-0">
+              <SearchInput/>
               <li className="nav-item">
                 <NavLink className="nav-link" aria-current="page" to="/">
                   Home

diff --git a/client/src/context/Search.js b/client/src/context/Search.js
@@ -0,0 +1,20 @@
+import { useState, useContext, createContext } from 'react';
+const SearchContext = createContext();
+
+const SearchProvider = ({ children }) => {
+  const [search, setSearch] = useState({
+    keyword: '',
+    results: [],
+  });
+
+  return (
+    <SearchContext.Provider value={[search, setSearch]}>
+      {children}
+    </SearchContext.Provider>
+  );
+};
+
+//custom hook
+const useSearch = () => useContext(SearchContext);
+
+export { useSearch, SearchProvider };
diff --git a/client/src/index.js b/client/src/index.js
@@ -5,14 +5,17 @@ import App from './App';
 import reportWebVitals from './reportWebVitals';
 import { BrowserRouter } from 'react-router-dom';
 import { AuthProvider } from './context/Auth';
+import { SearchProvider } from './context/Search';
 import 'antd/dist/reset.css';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <AuthProvider>
-    <BrowserRouter>
-      <App />
-    </BrowserRouter>
+    <SearchProvider>
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    </SearchProvider>
   </AuthProvider>
 );
 

diff --git a/client/src/pages/SearchPage.js b/client/src/pages/SearchPage.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import { useSearch } from '../context/Search';
+import Layout from '../components/Layout/Layout';
+
+const SearchPage = () => {
+  const [values, setValues] = useSearch();
+  return (
+    <Layout title={'Search Results'}>
+      <div className="container">
+        <div className="text-center">
+          <h1>Search Results</h1>
+          <h6>
+            {values?.result.length < 1
+              ? 'No Products Found'
+              : `Found ${values?.result.length}`}
+          </h6>
+          <div className="d-flex flex-wrap mt-4">
+            {values?.result.map((p) => (
+              <div key={p._id} className="col-lg-3 col-md-4 col-sm-6 mb-4">
+                {' '}
+                <div className="card m-2">
+                  <img
+                    src={`${process.env.REACT_APP_API}/api/v1/product/product-photo/${p._id}`}
+                    className="card-img-top"
+                    alt={p.name}
+                  />
+                  <div className="card-body">
+                    <div className="d-flex justify-content-between">
+                      <h5 className="card-title">{p.name}</h5>
+                      <h5>{p.price}$</h5>
+                    </div>
+                    <p className="card-text">
+                      {p.description.substring(0, 25)}...
+                    </p>
+                    <button class="btn btn-info ms-1">More Details</button>
+                    <button class="btn btn-secondary ms-1">Add to Cart</button>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default SearchPage;
diff --git a/controllers/productController.js b/controllers/productController.js
@@ -239,3 +239,26 @@ export const productListController = async (req, res) => {
     });
   }
 };
+
+//search-product
+export const searchProductController = async (req, res) => {
+  try {
+    const { keyword } = req.params;
+    const result = await productModel
+      .find({
+        $or: [
+          { name: { $regex: keyword, $options: 'i' } },
+          { description: { $regex: keyword, $options: 'i' } },
+        ],
+      })
+      .select('-photo');
+    res.json(result);
+  } catch (error) {
+    console.log(error);
+    res.status(400).send({
+      success: false,
+      message: 'Error in Search Product API',
+      error,
+    });
+  }
+};
diff --git a/routes/productRoutes.js b/routes/productRoutes.js
@@ -9,6 +9,7 @@ import {
   productFilterController,
   productListController,
   productPhotoController,
+  searchProductController,
   updateProductController,
 } from '../controllers/productController.js';
 import formidable from 'express-formidable';
@@ -54,4 +55,7 @@ router.get('/product-count', productCountController);
 //product-per-page
 router.get('/product-list/:page', productListController);
 
+//search-product 
+router.get('/search/:keyword', searchProductController)
+
 export default router;