Products > Export Products in CSV file functionality added.

Author: WebDeveloperGuide

web_admin/package-lock.json

@@ -9,6 +9,7 @@
     "axios": "^0.26.0",
     "jquery": "^3.6.0",
     "react": "^17.0.2",
+    "react-csv": "^2.2.2",
     "react-dom": "^17.0.2",
     "react-paginate": "^8.1.2",
     "react-redux": "^7.2.6",

web_admin/package.json

@@ -65,4 +65,9 @@ textarea.form-control, select.form-control{
 
 .form-control{
 	height: calc(2.25rem + 4px);
+}
+
+.download-csv{
+	font-size: 24px;
+	margin-top: 5px;
 }

web_admin/src/App.css

@@ -1,4 +1,4 @@
-import {useEffect, useState} from 'react';
+import {useEffect, useState, useRef} from 'react';
 import {Link} from 'react-router-dom';
 import Product from './Product';
 import Header from '../../Header';
@@ -7,13 +7,25 @@ import Footer from '../../Footer';
 import { useDispatch, useSelector } from "react-redux";
 import { listProducts } from "../../../redux/actions/ProductActions";
 import ReactPaginate from 'react-paginate';
+import { CSVLink } from "react-csv";
+import axios from 'axios';
 import './product.css';
 
+const headers = [
+  { label: "Name", key: "title" },
+  { label: "Description", key: "description" },
+  { label: "Image", key: "image" },
+  { label: "Price", key: "price" },
+  { label: "Stock", key: "stock" }
+];
+
 const Products = () => {
 	const dispatch = useDispatch();
 	const [currentPage, setCurrentPage] = useState(0);	
 	const [searchTerm, setSearchTerm] = useState('');
-
+	const [csvData, setCsvData] = useState([]);
+	const myRefBtn= useRef(null);
+	
 	const productList = useSelector((state) => state.productList);
   	const { loading, error, products, numOfPages, sortBy, searchText } = productList;  	
 
@@ -44,7 +56,14 @@ const Products = () => {
   		setCurrentPage(0);
   		dispatch(listProducts(pageNum,productsPerPage, sortByValue, searchText));
   	}
-  	
+
+  	const getCsvProducts = async () => {
+  		const responseData = await axios.get(`/products/all`);
+    	const data = responseData.data;
+    	setCsvData(data.data);
+    	myRefBtn.current.link.click();
+  	}
+
 
 	return(
 		<>
@@ -61,7 +80,7 @@ const Products = () => {
 		                      <h4 className="card-title">Products</h4>
 		                      <div className="row">
 	                              <div className="col-md-12">
-	                                 <div className="form-group row">
+	                                 <div className="form-group row">	                                 
 	                                    <div className="offset-md-2 col-sm-4">
 						                        <input type="text" placeholder="Search" className="form-control" 
 		                                        name="search" onChange={(e) => setSearchTerm(e.target.value)}/>
@@ -76,7 +95,18 @@ const Products = () => {
 	                                    <div className="col-sm-2">
 	                                    	<Link to="/product/add" className="btn btn-outline-primary btn-fw float-right">
 									            Add Product
-									        </Link>
+									        </Link>									        
+	                                    </div>
+	                                    <div className="col-sm-1">
+	                                    	<i className="fa fa-download download-csv" onClick={getCsvProducts} title="Download CSV"/>
+	                                    	<CSVLink 
+	                                    		data={csvData} 
+	                                    		headers={headers}
+      											className="d-none"
+      											ref={myRefBtn}
+      											filename={"Product-Data.csv"}
+	                                    		>											  
+											</CSVLink>											
 	                                    </div>
 	                                 </div>
 	                              </div>				                              

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

@@ -80,6 +80,23 @@ router.get("/", async (req,res)=>{
 	}
 })
 
+//Get All Products
+router.get("/all", async (req,res)=>{
+	try{
+  		const totalProducts = await Product.countDocuments({});
+		const productData = await Product.find({}).sort({_id: 1});
+
+		if(productData){
+			res.status(200).json({success:1,message:"", data:productData});
+		}else{
+			res.status(200).json({success:0,message:"No Data Found!"})
+		}
+		
+	}catch(err){
+		res.status(500).json({status:0,message:err.message})
+	}
+})
+
 //Get Single Product
 router.get("/find/:id", async (req,res)=>{