Front End > Products > Price Filter and Search Filter added

Author: WebDeveloperGuide

web_panel/src/components/Filters.js

@@ -1,27 +1,23 @@
-import React from 'react';
+import React,{useState} from 'react';
 
-const Filters = () => {
+const Filters = (props) => {
+
+	const {priceFilter, changePrice, changeSearch} = props;
+	
 	return(
 			<>
 			    <div className="filters">
 			        <div className="filters-container">
 			          {/* search */}
 			          <form className="input-form">
-			            <input type="text" className="search-input" placeholder="search..." />
-			          </form>
-			          {/* categories */}
-			          <h5>Company</h5>
-			          <article className="companies">
-			            <button className="company-btn">all</button>
-			            <button className="company-btn">ikea</button>
-			            <button className="company-btn">marcos</button>
-			          </article>
+			            <input type="text" className="search-input" placeholder="search..." onChange={changeSearch}/>
+			          </form>			          
 			          {/* price */}
 			          <h5>Price</h5>
 			          <form className="price-form">
-			            <input type="range" className="price-filter" min={0} defaultValue={50} max={100} />
+			            <input type="range" className="price-filter w-100" min={0} defaultValue={priceFilter} max={10000} onChange={changePrice} />
 			          </form>
-			          <span className="price-value">Value : $80</span>
+			          <span className="price-value">Value : ${priceFilter}</span>
 			        </div>
 			      </div>
 			</>

web_panel/src/components/Products.js

@@ -1,4 +1,4 @@
-import React,{useEffect} from 'react';
+import React,{useEffect,useState} from 'react';
 import {useSelector,useDispatch} from 'react-redux';
 import Filters from './Filters';
 import Product from './Product';
@@ -7,29 +7,65 @@ import Loading from '../components/Loading';
 
 const Products = () => {
 
-	const products = useSelector((state)=> state.allProducts.products);
+	const [currentPage, setCurrentPage] = useState(0);	
+	const [priceFilter,setPriceFilter] = useState(10000);
+	const [searchTerm, setSearchTerm] = useState('');
+	const [sortByFilter, setSortByFilter] = useState('');
+
+	const changePrice = (e) => {
+		setPriceFilter(e.target.value)		
+	}
+
+	const changeSearch = (e) => {
+		setSearchTerm(e.target.value)		
+	}
+
+	const allProducts = useSelector((state)=> state.allProducts);
+	const { products, numOfPages, sortBy, searchText, price } = allProducts;	
+
+
 	const renderList = products.map((product)=>{
 		return(
 			<Product detail={product} key={product._id}/>
 			)
 	})
 
 	const dispatch = useDispatch();
+	let pageNum = 0;
+  	let productsPerPage = 9;
+  	
 
 	useEffect(()=>{
-		dispatch(getProducts());
+		dispatch(getProducts(pageNum,productsPerPage, sortBy, searchText, price));
 	},[])
 
+
+	//Call Function after stop typing text
+  	useEffect(() => {
+	    const delaySearchFunc = setTimeout(() => {
+	      setCurrentPage(0);
+		  dispatch(getProducts(pageNum,productsPerPage, sortByFilter, searchTerm, priceFilter));	      
+	    }, 1500)
+
+	    return () => clearTimeout(delaySearchFunc)
+	}, [searchTerm, priceFilter])
+
+  	const handleSortBy = (e) => {
+  		const sortByValue = e.target.value;
+  		setCurrentPage(0);
+  		dispatch(getProducts(pageNum,productsPerPage, sortByValue, searchText, price));
+  	}
+
 	return(
 			<>
 			    <section className="products">
-			        <Filters/>
+			        <Filters priceFilter={priceFilter} changePrice={changePrice} changeSearch={changeSearch}/>
 			        {
 			        	(Object.keys(products).length === 0) ? 
 						<Loading/> :
 						<div className="products-container">
 				          {renderList}
-				        </div>	
+				        </div>
 			        }			        
 			      </section>
 			</>

web_panel/src/redux/actions/productActions.js

@@ -3,12 +3,16 @@ import axios from 'axios';
 import { toast } from "react-toastify";
 import {ToastObjects} from "../../util/toastObject";
 
-export const getProducts = () => async(dispatch) =>{
+export const getProducts = (pageNum,productsPerPage,sortBy,searchText,price) => async(dispatch) =>{
 	try{
-		const response = await axios.get("products");
+		const response = await axios.get(`products?page=${pageNum}&limit=${productsPerPage}&sortBy=${sortBy}&searchText=${searchText}&price=${price}`);
 		const responseData = response.data;
+
+		responseData['sortBy'] = sortBy;
+    	responseData['searchText'] = searchText;
+    	responseData['price'] = price;
 
-		dispatch({ type: ActionTypes.FETCH_PRODUCTS, payload: responseData.data });
+		dispatch({ type: ActionTypes.FETCH_PRODUCTS, payload: responseData });
 
 	} catch (error){
 

web_panel/src/redux/reducers/productReducer.js

@@ -2,13 +2,17 @@ import { ActionTypes } from '../constants';
 
 const initialState = {
 	products:[],
-	productDetail:[]
+	productDetail:[],
+	numOfPages:0,
+	sortBy: '',
+	searchText:'',
+	price:'10000'
 }
 
 export const productReducer = (state = initialState,{type,payload}) => {
 	switch(type){
 		case ActionTypes.FETCH_PRODUCTS:
-			return {...state,products:payload};
+			return {...state,products:payload.data, numOfPages:payload.numOfPages, sortBy:payload.sortBy, searchText:payload.searchText, price:payload.price};
 		case ActionTypes.SET_PRODUCT_DETAIL:
 			return {...state,productDetail:payload};
 		case ActionTypes.RESET_PRODUCT_DETAIL:

web_services/routes/product.js

@@ -44,27 +44,46 @@ router.get("/", async (req,res)=>{
   		const pageNum = parseInt(req.query.page || "0"); //Products page number
   		const sortByVal = (req.query.sortBy || "_id"); //Products sort by
 		const searchText = (req.query.searchText || ""); //Products search text
+		const priceFilter = (req.query.price || ""); //Products search text
 
 
   		let sortObject = {};
-  		let searchObject = {};
+  		let filterObj = {};
+  		let searchTextObj = {};
+  		let priceObject = {};
   		sortByField = sortByVal;
   		if(sortByVal == 'name'){
   			sortByField = 'title'; 
   		}
 
   		if(searchText !== ''){
-  			searchObject = {$or:[{ title: { $regex: searchText, $options:'i' }}
-  								,{ description: { $regex: searchText, $options:'i' } }
-  								]};
+  				searchTextObj = {
+							       $or : [
+							          { title: { $regex: searchText, $options:'i' } },
+	  								  { description: { $regex: searchText, $options:'i' } }
+							       ]
+							    };
+
+  		}
+
+  		if(priceFilter !== ''){
+  			priceObject = 	{price: {$lte: priceFilter}};
   		}
 
-  		sortObject[sortByField] = 1;
+
+	    filterObj = {
+					 $and : [							    
+					    searchTextObj,
+					    priceObject
+					 ]
+				   };
+
+
+  		sortObject[sortByField] = 1;  		
 
 
-  		const totalProducts = await Product.countDocuments(searchObject);
-		const productData = await Product.find(searchObject).sort(sortObject).limit(itemPerPage).skip(itemPerPage * pageNum);
-
+  		const totalProducts = await Product.countDocuments(filterObj);
+		const productData = await Product.find(filterObj).sort(sortObject).limit(itemPerPage).skip(itemPerPage * pageNum);
 
 
 		let numOfPages = parseInt(totalProducts/itemPerPage);