Products > Sort By Name/Price applied

Author: WebDeveloperGuide

web_admin/src/components/pages/product/Products.js

@@ -1,4 +1,4 @@
-import {useEffect} from 'react';
+import {useEffect, useState} from 'react';
 import {Link} from 'react-router-dom';
 import Product from './Product';
 import Header from '../../Header';
@@ -11,21 +11,29 @@ import './product.css';
 
 const Products = () => {
 	const dispatch = useDispatch();
+	const [currentPage, setCurrentPage] = useState(0);	
 
 	const productList = useSelector((state) => state.productList);
-  	const { loading, error, products, numOfPages } = productList;  	
+  	const { loading, error, products, numOfPages, sortBy, searchText } = productList;  	
 
   	let pageNum = 0;
   	let productsPerPage = 10;
   	const handlePageClick = (data) => {
-  		pageNum = data.selected;   		
-  		dispatch(listProducts(pageNum,productsPerPage));
+  		pageNum = data.selected;
+  		setCurrentPage(pageNum);	
+  		dispatch(listProducts(pageNum,productsPerPage, sortBy, searchText));
   	}
 
 	useEffect(() => {
-    	dispatch(listProducts(pageNum,productsPerPage));
+    	dispatch(listProducts(pageNum,productsPerPage, sortBy, searchText));
   	}, [productsPerPage]);
 
+  	const handleSortBy = (e) => {
+  		const sortByValue = e.target.value;
+  		setCurrentPage(0);
+  		dispatch(listProducts(pageNum,productsPerPage, sortByValue, searchText));
+  	}
+
 	return(
 		<>
 		    <div className="container-scroller">		        
@@ -42,6 +50,13 @@ const Products = () => {
 		                      <Link to="/product/add" className="btn btn-outline-primary btn-fw float-right">
 					            Add Product
 					          </Link>
+		                      <div className="float-right mr-5">
+			                      <select className="form-select" aria-label="Sort By" onChange={handleSortBy}>
+									  <option value="">Sort By</option>
+									  <option value="name">Name</option>
+									  <option value="price">Price</option>
+									</select>
+		                      </div>		                      
 		                      <p className="card-description">
 		                      </p>
 		                      <div className="table-responsive">
@@ -81,6 +96,7 @@ const Products = () => {
 							        breakClassName={"page-item"}
 							        breakLinkClassName={"page-link"}
 							        activeClassName={"active"}
+							        forcePage={currentPage}
 							      />
 		                      </div>
 		                    </div>

web_admin/src/redux/actions/ProductActions.js

@@ -20,12 +20,15 @@ import { logout } from "./userActions";
 import { toast } from "react-toastify";
 import {ToastObjects} from "./toastObject";
 
-export const listProducts = (pageNum,productsPerPage) => async (dispatch, getState) => {
+export const listProducts = (pageNum,productsPerPage,sortBy,searchText) => async (dispatch, getState) => {
   try {
     dispatch({ type: PRODUCT_LIST_REQUEST });
 
-    const responseData = await axios.get(`/products?page=${pageNum}&limit=${productsPerPage}`);
-    const data = responseData.data;    
+    const responseData = await axios.get(`/products?page=${pageNum}&limit=${productsPerPage}&sortBy=${sortBy}&searchText=${searchText}`);
+    const data = responseData.data;
+    data['sortBy'] = sortBy;
+    data['searchText'] = searchText;
+
     dispatch({ type: PRODUCT_LIST_SUCCESS, payload: data });
   } catch (error) {
     const message =

web_admin/src/redux/reducers/ProductReducers.js

@@ -19,14 +19,14 @@ import {
 } from "../constants/ProductConstants";
 
 // All Products
-export const productListReducer = (state = { products: [], numOfPages:0 }, action) => {
+export const productListReducer = (state = { products: [], numOfPages:0, sortBy: '', searchText:'' }, action) => {
   switch (action.type) {
     case PRODUCT_LIST_REQUEST:
       return { loading: true, products: [] };
     case PRODUCT_LIST_SUCCESS:
-      return { loading: false, products: action.payload.data, numOfPages: action.payload.numOfPages };
+      return { loading: false, products: action.payload.data, numOfPages: action.payload.numOfPages, sortBy: action.payload.sortBy, searchText: action.payload.searchText };
     case PRODUCT_LIST_FAIL:
-      return { loading: false, error: action.payload.data, numOfPages: action.payload.numOfPages };
+      return { loading: false, error: action.payload.data, numOfPages: action.payload.numOfPages, sortBy: action.payload.sortBy, searchText: action.payload.searchText };
     default:
       return state;
   }

web_services/routes/product.js

@@ -42,9 +42,21 @@ router.get("/", async (req,res)=>{
 
 		const itemPerPage = parseInt(req.query.limit || "10"); //Products per page
   		const pageNum = parseInt(req.query.page || "0"); //Products page number
+  		const sortByVal = (req.query.sortBy || "_id"); //Products page number
+  		
+  		var sortObject = {};
+  		sortByField = sortByVal;
+  		if(sortByVal == 'name'){
+  			sortByField = 'title'; 
+  		}
 
- 		const totalProducts = await Product.countDocuments({});
-		const productData = await Product.find({}).limit(itemPerPage).skip(itemPerPage * pageNum);      
+  		sortObject[sortByField] = 1;
+  		
+  		
+  		const totalProducts = await Product.countDocuments({});
+		const productData = await Product.find({}).sort(sortObject).limit(itemPerPage).skip(itemPerPage * pageNum);
+
+		
 
 		let numOfPages = parseInt(totalProducts/itemPerPage);