Component Structure:
State Management: The component utilizes React’s useState hook to manage several state variables:
viewpro: Stores all products fetched from Firestore.
isLoading: Indicates whether the component is currently loading data.
category: Stores the filtered products based on user selections.
Effect Hook: The useEffect hook is employed to fetch products from Firestore when the component mounts. It calls the getProducts function, which performs the data retrieval and updates the component state accordingly.
Fetching Products: The getProducts function uses Firestore queries to retrieve products ordered by their creation date (createdAt) in descending order. Upon receiving the data, it updates both viewpro and category states with the fetched products. Additionally, it dispatches a Redux action (foundProducts) to store the products in the Redux store.
Filtering Products: The component provides filtering options for users to narrow down products by category and price range. Clicking on the category buttons triggers the handleS function, which filters products based on the selected category. Similarly, clicking on the price range buttons invokes the handleP function, which filters products based on the specified price range.
Adding Products to Cart: Each product displayed in the UI includes an “ADD to Cart” button. Clicking this button triggers the addCart function, which dispatches a Redux action (prosOncart) to add the selected product to the shopping cart.
Conclusion:
In summary, the Productonpage component serves as a key feature within the e-commerce application, providing essential functionality for browsing, filtering, and purchasing products. It effectively integrates with Firestore for data management and leverages Redux for state management, offering a seamless user experience.
ALl the things are working fine but when i click on add to cart button inside map and try to console something it wont show anything .
All the filterings are working well but only matters that onclick is not working inside map
import { collection, limit, onSnapshot, orderBy, query } from 'firebase/firestore'
import React from 'react'
import { useState,useEffect } from 'react'
import { db } from '@/firebase/config'
import { useDispatch, useSelector } from 'react-redux'
import { foundProducts } from '@/Redux/productSlice'
import { Button } from '@/components/ui/button'
import { Link } from 'react-router-dom'
import { selectProduct } from '@/Redux/productSlice'
import { current } from '@reduxjs/toolkit'
import { prosOncart } from '@/Redux/cartSlice'
function Productonpage() {
const[viewpro,setViewpro]=useState([])
const[isLoading,setisLoading]=useState(false)
const [category,setCategory]=useState([])
const dispatch=useDispatch()
useEffect(()=>{
getProducts()
},[])
const getProducts=()=>{
# `your text`setisLoading(true)
try{
const productRef = collection(db, "product");
const q = query(productRef, orderBy("createdAt", "desc"), limit(28));
onSnapshot(q, (querySnapshot) => {
const recProduct=querySnapshot.docs.map(doc=>({
id:doc.id,
...doc.data(),
createdAt: doc.data().createdAt.toMillis(),
}))
setViewpro(recProduct);
setCategory(recProduct)
console.log(recProduct)
dispatch(foundProducts({
products:recProduct
}))
});
}
catch(error){
setisLoading(false)
}
}
function handleS(electronics){
const newItems =viewpro.filter((item)=>(item.category===electronics))
setCategory(newItems)
}
function handleall(){
setCategory(viewpro);
}
function handleP(price){
if(price=='less'){
const setNew=viewpro.filter((items)=>items.price<=50)
setCategory(setNew)
}
if(price=='range'){
const setNew=viewpro.filter((items)=>(items.price>50 && items.price<=100))
setCategory(setNew)
}
if(price=='over'){
const setNew=viewpro.filter((items)=>(items.price>100))
setCategory(setNew)
}
}
function addCart(items){
console.log(items)
dispatch(prosOncart({
products:items,
}))}
return (
<>
<div className="grid grid-cols-1 lg:grid-cols-[280px_1fr] h-full">
<div className="lg:flex lg:h-full lg:w-[280px] lg:border-r lg:bg-[#6730EC] text-white lg:dark:bg-gray-800/40 hidden">
<div className="flex flex-col gap-6 p-6">
<div className="grid gap-4">
<div className="grid gap-2">
<h3 className="text-sm font-medium">Category</h3>
<div className="grid gap-2">
<Button onClick={handleall} className="justify-start" variant="ghost">
All
</Button>
<Button onClick={()=>handleS("electronics")} className="justify-start" variant="ghost">
Electronics
</Button>
<Button onClick ={()=>handleS("sports")} className="justify-start" variant="ghost">
Sports
</Button>
<Button onClick ={()=>handleS("clothing")} className="justify-start" variant="ghost">
Clothing
</Button>
<Button onClick={()=>handleS("home")} className="justify-start" variant="ghost">
Home
</Button>
</div>
</div>
<div className="grid gap-2">
<h3 className="text-sm font-medium">Price</h3>
<div className="grid gap-2">
<Button className="justify-start" variant="ghost">
All
</Button>
<Button onClick={()=>handleP("less")} className="justify-start" variant="ghost">
Under $50
</Button>
<Button onClick={()=>handleP("range")} className="justify-start" variant="ghost">
$50 - $100
</Button>
<Button onClick={()=>handleP("over")} className="justify-start" variant="ghost">
Over $100
</Button>
</div>
</div>
</div>
</div>
</div>
<div className="flex-1 overflow-auto">
<main className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 p-4 md:p-6">
{
category.map((items)=>{
return( <div key={items.id} className="relative group overflow-hidden rounded-lg">
<Link className="absolute inset-0 z-10" href="#">
<span className="sr-only">View</span>
</Link>
<img
alt="Product 1"
className="object-cover w-full h-60"
height={300}
src={items.imageUrl}
style={{
aspectRatio: "400/300",
objectFit: "cover",
}}
width={400}
/>
<div className="bg-white p-4 dark:bg-gray-950">
<h3 className="font-semibold text-lg md:text-xl">{items.name}</h3>
<p className="text-sm text-gray-500 dark:text-gray-400">{items.description}</p>
<h4 className="font-semibold text-base md:text-lg">${items.price}</h4>
<Button onClick={()=>addCart(items)} className=" bg-[#FF7C1F]" >ADD to Cart</Button>
</div>
</div>)
})
}
</main>
</div>
</div>
</>
)
}
function XIcon(props) {
return (
<svg
{...props}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M18 6 6 18" />
<path d="m6 6 12 12" />
</svg>
)
}
export default Productonpage ```