Products List > Pagination added

Author: WebDeveloperGuide

web_admin/src/App.css

@@ -52,3 +52,13 @@ textarea.form-control, select.form-control{
 .fa-trash{
 	color: #d2322d;	
 }
+
+.page-link{
+	color:#172d88;	
+}
+
+.page-item.active .page-link, .pagination .page-item .page-link:focus{
+	background-color: #172d88;
+	box-shadow: none;
+	color:#fff;
+}

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

@@ -6,17 +6,25 @@ import Sidebar from '../../Sidebar';
 import Footer from '../../Footer';
 import { useDispatch, useSelector } from "react-redux";
 import { listProducts } from "../../../redux/actions/ProductActions";
+import ReactPaginate from 'react-paginate';
 import './product.css';
 
 const Products = () => {
 	const dispatch = useDispatch();
 
 	const productList = useSelector((state) => state.productList);
-  	const { loading, error, products } = productList;  	
+  	const { loading, error, products, numOfPages } = productList;  	
+
+  	let pageNum = 0;
+  	let productsPerPage = 1;
+  	const handlePageClick = (data) => {
+  		pageNum = data.selected;   		
+  		dispatch(listProducts(pageNum,productsPerPage));
+  	}
 
 	useEffect(() => {
-    	dispatch(listProducts());
-  	}, [dispatch]);
+    	dispatch(listProducts(pageNum,productsPerPage));
+  	}, [productsPerPage]);
 
 	return(
 		<>
@@ -54,6 +62,31 @@ const Products = () => {
 		                          </tbody>
 		                        </table>
 		                      </div>
+		                      <div className="mt-4">
+		                      	{
+		                      		
+		                      		<ReactPaginate						        
+							        previousLabel={"Previous"}
+							        nextLabel={"Next"}
+							        breakLabel={"..."}
+							        pageCount={numOfPages}
+							        marginPagesDisplayed={2}
+							        pageRangeDisplayed={3}
+							        onPageChange={handlePageClick}
+							        containerClassName={"pagination justify-content-center"}
+							        pageClassName={"page-item"}
+							        pageLinkClassName={"page-link"}
+							        previousClassName={"page-item"}
+							        previousLinkClassName={"page-link"}
+							        nextClassName={"page-item"}
+							        nextLinkClassName={"page-link"}
+							        breakClassName={"page-item"}
+							        breakLinkClassName={"page-link"}
+							        activeClassName={"active"}
+							      /> 
+		                      	}	
+			                      
+		                      </div>
 		                    </div>
 		                  </div>
 		                </div>		                

web_admin/src/redux/actions/ProductActions.js

@@ -20,13 +20,12 @@ import { logout } from "./userActions";
 import { toast } from "react-toastify";
 import {ToastObjects} from "./toastObject";
 
-export const listProducts = () => async (dispatch, getState) => {
+export const listProducts = (pageNum,productsPerPage) => async (dispatch, getState) => {
   try {
     dispatch({ type: PRODUCT_LIST_REQUEST });
 
-    const responseData = await axios.get(`/products`);
-    const data = responseData.data.data
-
+    const responseData = await axios.get(`/products?page=${pageNum}&limit=${productsPerPage}`);
+    const data = responseData.data;    
     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: [] }, action) => {
+export const productListReducer = (state = { products: [], numOfPages:0 }, action) => {
   switch (action.type) {
     case PRODUCT_LIST_REQUEST:
       return { loading: true, products: [] };
     case PRODUCT_LIST_SUCCESS:
-      return { loading: false, products: action.payload };
+      return { loading: false, products: action.payload.data, numOfPages: action.payload.numOfPages };
     case PRODUCT_LIST_FAIL:
-      return { loading: false, error: action.payload };
+      return { loading: false, error: action.payload.data, numOfPages: action.payload.numOfPages };
     default:
       return state;
   }

web_services/routes/product.js

@@ -38,12 +38,18 @@ router.put("/:id",verifyTokenAndAdmin,async (req,res)=>{
 
 //Get All Products
 router.get("/", async (req,res)=>{
-	
 	try{
-		const productData = await Product.find();
 
+		const itemPerPage = parseInt(req.query.limit || "10"); //Products per page
+  		const pageNum = parseInt(req.query.page || "0"); //Products page number
+
+ 		const totalProducts = await Product.countDocuments({});
+		const productData = await Product.find({}).limit(itemPerPage).skip(itemPerPage * pageNum);      
+
+		let numOfPages = parseInt(totalProducts/itemPerPage);
+
 		if(productData){
-			res.status(200).json({success:1,message:"",data:productData});
+			res.status(200).json({success:1,message:"", numOfPages ,data:productData});
 		}else{
 			res.status(200).json({success:0,message:"No Data Found!"})
 		}