Clean Up some code, Products page > Show new products as user scroll down.

WebDeveloperGuide · WebDeveloperGuide · commit b8db062e795d · 2022-04-10T16:59:46.000+05:30
diff --git a/web_panel/public/index.html b/web_panel/public/index.html
@@ -29,7 +29,7 @@
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
     />
-    <title>React App</title>
+    <title>Online Shopping Store</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/web_panel/src/components/Products.js b/web_panel/src/components/Products.js
@@ -2,15 +2,19 @@ import React,{useEffect,useState} from 'react';
 import {useSelector,useDispatch} from 'react-redux';
 import Filters from './Filters';
 import Product from './Product';
-import {getProducts} from '../redux/actions/productActions';
+import {getProducts,resetProducts} from '../redux/actions/productActions';
 import Loading from '../components/Loading';
 
 const Products = () => {
 
+	const dispatch = useDispatch();
 	const [currentPage, setCurrentPage] = useState(0);	
 	const [priceFilter,setPriceFilter] = useState(10000);
 	const [searchTerm, setSearchTerm] = useState('');
 	const [sortByFilter, setSortByFilter] = useState('');
+	const allProducts = useSelector((state)=> state.allProducts);
+	const { products, numOfPages, sortBy, searchText, price } = allProducts;
+	const productsPerPage = 9;
 
 	const changePrice = (e) => {
 		setPriceFilter(e.target.value)		
@@ -20,40 +24,47 @@ const Products = () => {
 		setSearchTerm(e.target.value)		
 	}
 
-	const allProducts = useSelector((state)=> state.allProducts);
-	const { products, numOfPages, sortBy, searchText, price } = allProducts;	
+	const loadMoreProduct = (e) => {
+		if (window.innerHeight + document.documentElement.scrollTop > (document.documentElement.offsetHeight - 200)) {
+  			setCurrentPage((page) => page + 1);
+      	}
+	};
 
 
 	const renderList = products.map((product)=>{
 		return(
 			<Product detail={product} key={product._id}/>
 			)
 	})
-
-	const dispatch = useDispatch();
-	let pageNum = 0;
-  	let productsPerPage = 9;
   	
 
 	useEffect(()=>{
-		dispatch(getProducts(pageNum,productsPerPage, sortBy, searchText, price));
-	},[])
-
+		if(currentPage <= numOfPages){
+			dispatch(getProducts(currentPage,productsPerPage, sortBy, searchTerm, price));			
+		}		
+	},[currentPage])
 
+	
 	//Call Function after stop typing text
   	useEffect(() => {
-	    const delaySearchFunc = setTimeout(() => {
-	      setCurrentPage(0);
-		  dispatch(getProducts(pageNum,productsPerPage, sortByFilter, searchTerm, priceFilter));	      
+  		dispatch(resetProducts());
+  		const delaySearchFunc = setTimeout(() => {
+	      setCurrentPage(0);	      
 	    }, 1500)
 
-	    return () => clearTimeout(delaySearchFunc)
+	    window.addEventListener("scroll", loadMoreProduct);
+
+	    return () => {
+	    	clearTimeout(delaySearchFunc);
+	    	window.removeEventListener("scroll", loadMoreProduct);
+	    }
+
 	}, [searchTerm, priceFilter])
 
   	const handleSortBy = (e) => {
   		const sortByValue = e.target.value;
   		setCurrentPage(0);
-  		dispatch(getProducts(pageNum,productsPerPage, sortByValue, searchText, price));
+  		dispatch(getProducts(currentPage,productsPerPage, sortByValue, searchTerm, price));
   	}
 
 	return(
diff --git a/web_panel/src/index.css b/web_panel/src/index.css
@@ -560,6 +560,7 @@ Single Product Page
 .single-product-img {
   height: 25rem;
   border-radius: var(--borderRadius);
+  object-fit:contain;
 }
 .single-product-title {
   margin-bottom: 0;
diff --git a/web_panel/src/redux/actions/productActions.js b/web_panel/src/redux/actions/productActions.js
@@ -2,6 +2,7 @@ import { ActionTypes } from '../constants';
 import axios from 'axios';
 import { toast } from "react-toastify";
 import {ToastObjects} from "../../util/toastObject";
+const { FETCH_PRODUCTS, SET_PRODUCT_DETAIL, RESET_PRODUCT_DETAIL, RESET_PRODUCTS} = ActionTypes;
 
 export const getProducts = (pageNum,productsPerPage,sortBy,searchText,price) => async(dispatch) =>{
 	try{
@@ -12,7 +13,7 @@ export const getProducts = (pageNum,productsPerPage,sortBy,searchText,price) =>
     	responseData['searchText'] = searchText;
     	responseData['price'] = price;
 		
-		dispatch({ type: ActionTypes.FETCH_PRODUCTS, payload: responseData });
+		dispatch({ type: FETCH_PRODUCTS, payload: responseData });
 
 	} catch (error){
 
@@ -29,7 +30,7 @@ export const getProducts = (pageNum,productsPerPage,sortBy,searchText,price) =>
 export const setProductDetail = (id) => async(dispatch) =>{	
 	try{
 		const response = await axios.get(`products/find/${id}`);
-		dispatch({ type: ActionTypes.SET_PRODUCT_DETAIL, payload: response.data });
+		dispatch({ type: SET_PRODUCT_DETAIL, payload: response.data });
 
 	} catch (error){
 
@@ -43,5 +44,9 @@ export const setProductDetail = (id) => async(dispatch) =>{
 }
 
 export const resetProductDetail = () => async(dispatch) =>{
-	dispatch({ type: ActionTypes.RESET_PRODUCT_DETAIL});	
+	dispatch({ type: RESET_PRODUCT_DETAIL});	
+}
+
+export const resetProducts = () => async(dispatch) =>{
+	dispatch({ type: RESET_PRODUCTS});	
 }
diff --git a/web_panel/src/redux/constants/index.js b/web_panel/src/redux/constants/index.js
@@ -10,7 +10,8 @@ export const ActionTypes = {
   CART_SAVE_SHIPPING_ADDRESS:"CART_SAVE_SHIPPING_ADDRESS",
   CART_SAVE_PAYMENT_METHOD:"CART_SAVE_PAYMENT_METHOD",
   CLEAR_CART_ITEM:"CLEAR_CART_ITEM",
-  CART_REMOVE_SHIPPING_ADDRESS:"CART_REMOVE_SHIPPING_ADDRESS"
+  CART_REMOVE_SHIPPING_ADDRESS:"CART_REMOVE_SHIPPING_ADDRESS",
+  RESET_PRODUCTS:"RESET_PRODUCTS"
 }
 
 
diff --git a/web_panel/src/redux/reducers/productReducer.js b/web_panel/src/redux/reducers/productReducer.js
@@ -1,4 +1,5 @@
 import { ActionTypes } from '../constants';
+const { FETCH_PRODUCTS, SET_PRODUCT_DETAIL, RESET_PRODUCT_DETAIL, RESET_PRODUCTS} = ActionTypes;
 
 const initialState = {
 	products:[],
@@ -10,13 +11,16 @@ const initialState = {
 }
 
 export const productReducer = (state = initialState,{type,payload}) => {
+
 	switch(type){
-		case ActionTypes.FETCH_PRODUCTS:
-			return {...state,products:payload.data, numOfPages:payload.numOfPages, sortBy:payload.sortBy, searchText:payload.searchText, price:payload.price};
-		case ActionTypes.SET_PRODUCT_DETAIL:
+		case FETCH_PRODUCTS:
+			return {...state,products:[...state.products,...payload.data], numOfPages:payload.numOfPages, sortBy:payload.sortBy, searchText:payload.searchText, price:payload.price};
+		case SET_PRODUCT_DETAIL:
 			return {...state,productDetail:payload};
-		case ActionTypes.RESET_PRODUCT_DETAIL:
+		case RESET_PRODUCT_DETAIL:
 			return {...state,productDetail:[]};
+		case RESET_PRODUCTS:
+			return {...state,products:[]};
 		default:
 			return state;
 	}

Original file line number	Diff line number	Diff line change
`@@ -560,6 +560,7 @@ Single Product Page`
`560`	`560`	`.single-product-img {`
`561`	`561`	`height: 25rem;`
`562`	`562`	`border-radius: var(--borderRadius);`
	`563`	`+ object-fit:contain;`
`563`	`564`	`}`
`564`	`565`	`.single-product-title {`
`565`	`566`	`margin-bottom: 0;`
Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,8 @@ export const ActionTypes = {`
`10`	`10`	`CART_SAVE_SHIPPING_ADDRESS:"CART_SAVE_SHIPPING_ADDRESS",`
`11`	`11`	`CART_SAVE_PAYMENT_METHOD:"CART_SAVE_PAYMENT_METHOD",`
`12`	`12`	`CLEAR_CART_ITEM:"CLEAR_CART_ITEM",`
`13`		`- CART_REMOVE_SHIPPING_ADDRESS:"CART_REMOVE_SHIPPING_ADDRESS"`
	`13`	`+ CART_REMOVE_SHIPPING_ADDRESS:"CART_REMOVE_SHIPPING_ADDRESS",`
	`14`	`+ RESET_PRODUCTS:"RESET_PRODUCTS"`
`14`	`15`	`}`
`15`	`16`
`16`	`17`