Video-45-Product-Search-Bar

Author: basir

README.md

@@ -44,7 +44,7 @@ $ cd node-javascript-ecommerce
 ```
 MONGODB_URL=mongodb://localhost/jsamazona
 JWT_SECRET=somethingsecret
-PAYPAL_CLIENT_ID=db
+PAYPAL_CLIENT_ID="your paypal client id" or sb
 ```
 
 ### 4. Run Backend
@@ -81,7 +81,7 @@ $ npm start
 
 ## Support
 
-- Q/A: https://webacademy.pro/amazona
+- Q/A: https://codingwithbasir.com
 - Contact Instructor: [Basir](mailto:basir.jafarzadeh@gmail.com)
 
 

backend/routers/productRouter.js

@@ -7,7 +7,15 @@ const productRouter = express.Router();
 productRouter.get(
   '/',
   expressAsyncHandler(async (req, res) => {
-    const products = await Product.find({});
+    const searchKeyword = req.query.searchKeyword
+      ? {
+          name: {
+            $regex: req.query.searchKeyword,
+            $options: 'i',
+          },
+        }
+      : {};
+    const products = await Product.find({ ...searchKeyword });
     res.send(products);
   })
 );

frontend/src/api.js

@@ -2,10 +2,13 @@ import axios from 'axios';
 import { apiUrl } from './config';
 import { getUserInfo } from './localStorage';
 
-export const getProducts = async () => {
+export const getProducts = async ({ searchKeyword = '' }) => {
   try {
+    let queryString = '?';
+    if (searchKeyword) queryString += `searchKeyword=${searchKeyword}&`;
+
     const response = await axios({
-      url: `${apiUrl}/api/products`,
+      url: `${apiUrl}/api/products${queryString}`,
       method: 'GET',
       headers: {
         'Content-Type': 'application/json',

frontend/src/components/Header.js

@@ -1,12 +1,20 @@
 import { getUserInfo } from '../localStorage';
+import { parseRequestUrl } from '../utils';
 
 const Header = {
   render: () => {
     const { name, isAdmin } = getUserInfo();
+    const { value } = parseRequestUrl();
     return ` 
   <div class="brand">
     <a href="/#/">jsamazona</a>
   </div>
+  <div class="search">
+  <form class="search-form"  id="search-form">
+    <input type="text" name="q" id="q" value="${value || ''}" /> 
+    <button type="submit"><i class="fa fa-search"></i></button>
+  </form>        
+  </div>
   <div>
   ${
     name
@@ -17,6 +25,14 @@ const Header = {
     ${isAdmin ? `<a href="/#/dashboard">Dashboard</a>` : ''}
   </div>`;
   },
-  after_render: () => {},
+  after_render: () => {
+    document
+      .getElementById('search-form')
+      .addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const searchKeyword = document.getElementById('q').value;
+        document.location.hash = `/?q=${searchKeyword}`;
+      });
+  },
 };
 export default Header;

frontend/src/srceens/HomeScreen.js

@@ -1,10 +1,11 @@
-import axios from 'axios';
 import Rating from '../components/Rating';
 import { getProducts } from '../api';
+import { parseRequestUrl } from '../utils';
 
 const HomeScreen = {
   render: async () => {
-    const products = await getProducts();
+    const { value } = parseRequestUrl();
+    const products = await getProducts({ searchKeyword: value });
     if (products.error) {
       return `<div class="error">${products.error}</div>`;
     }

frontend/src/utils.js

@@ -1,18 +1,26 @@
 import { getCartItems } from './localStorage';
 
 export const parseRequestUrl = () => {
-  const url = document.location.hash.toLowerCase();
-  const request = url.split('/');
+  const address = document.location.hash.slice(1).split('?')[0];
+  const queryString =
+    document.location.hash.slice(1).split('?').length === 2
+      ? document.location.hash.slice(1).split('?')[1]
+      : '';
+
+  const url = address.toLowerCase() || '/';
+  const r = url.split('/');
+  const q = queryString.split('=');
   return {
-    resource: request[1],
-    id: request[2],
-    verb: request[3],
+    resource: r[1],
+    id: r[2],
+    verb: r[3],
+    name: q[0],
+    value: q[1],
   };
 };
 export const rerender = async (component) => {
-  document.getElementById(
-    'main-container'
-  ).innerHTML = await component.render();
+  document.getElementById('main-container').innerHTML =
+    await component.render();
   await component.after_render();
 };
 

frontend/style.css

@@ -456,3 +456,34 @@ td {
 .charts > div {
   flex: 1;
 }
+/* search */
+
+.search {
+  width: 40%;
+}
+form.search-form input[type='text'] {
+  float: left;
+  width: 80%;
+  border-right: none;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+form.search-form button {
+  float: left;
+  width: 40px;
+  background: #f0c040;
+
+  border-left: none;
+  cursor: pointer;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+form.search-form button:hover {
+  background: #0b7dda;
+}
+/* Clear floats */
+form.search-form::after {
+  content: '';
+  clear: both;
+  display: table;
+}