From 81c428f50789ca43e6e8d4bc484a8f31d1d19e52 Mon Sep 17 00:00:00 2001 From: Anishhhh12 <165990614+Anishhhh12@users.noreply.github.com> Date: Tue, 19 Aug 2025 21:29:20 +0530 Subject: [PATCH 1/4] Update Filters.jsx --- .../components/Popular_Categories/Filters.jsx | 29 +++++++++++++------ 1 file changed, 20 insertions(+), 9 deletions(-) diff --git a/src/User/components/Popular_Categories/Filters.jsx b/src/User/components/Popular_Categories/Filters.jsx index 46f793a96..15bc65abe 100644 --- a/src/User/components/Popular_Categories/Filters.jsx +++ b/src/User/components/Popular_Categories/Filters.jsx @@ -18,36 +18,45 @@ function Filters({ ? { backgroundColor } : {}; + // Define price ranges + const priceRanges = [ + "0-100", + "100-200", + "200-300", + "300-400", + "400-500", + "500-1000", + ]; + return ( @@ -63,7 +72,9 @@ function FilterSection({ title, options, onChange }) { {options.map((option) => ( ))} From be02f8bb3133dc0b68fac85c2141c5ed5bf9d690 Mon Sep 17 00:00:00 2001 From: Anishhhh12 <165990614+Anishhhh12@users.noreply.github.com> Date: Tue, 19 Aug 2025 21:54:33 +0530 Subject: [PATCH 2/4] Update Customized-Gifts.jsx --- .../Popular_Categories/Customized-Gifts.jsx | 37 +++++++++++++------ 1 file changed, 26 insertions(+), 11 deletions(-) diff --git a/src/User/pages/Popular_Categories/Customized-Gifts.jsx b/src/User/pages/Popular_Categories/Customized-Gifts.jsx index 4da14257e..98036b2f5 100644 --- a/src/User/pages/Popular_Categories/Customized-Gifts.jsx +++ b/src/User/pages/Popular_Categories/Customized-Gifts.jsx @@ -5,7 +5,6 @@ import toast from "react-hot-toast"; import axios from "axios"; import { Helmet } from "react-helmet"; - function CustomizedGifts() { const [products, setProducts] = useState([]); const [filteredProducts, setFilteredProducts] = useState([]); @@ -17,12 +16,22 @@ function CustomizedGifts() { useEffect(() => { const fetchData = async () => { try { - const categoriesToFetch = ["tops", "womens-watches", "mens-watches", "mobile-accessories", "sports-accessories", "motorcycle", "vehicle"]; // desired categories + const categoriesToFetch = [ + "tops", + "womens-watches", + "mens-watches", + "mobile-accessories", + "sports-accessories", + "motorcycle", + "vehicle", + ]; // desired categories let allProducts = []; // Fetch products from each category for (let category of categoriesToFetch) { - const response = await axios.get(`https://dummyjson.com/products/category/${category}`); + const response = await axios.get( + `https://dummyjson.com/products/category/${category}` + ); if (response.data && Array.isArray(response.data.products)) { const mappedProducts = response.data.products.map((product) => ({ id: product.id, @@ -44,9 +53,10 @@ function CustomizedGifts() { setFilteredProducts(allProducts); // Extract unique categories from the fetched products - const uniqueCategories = [...new Set(allProducts.map(product => product.category))]; + const uniqueCategories = [ + ...new Set(allProducts.map((product) => product.category)), + ]; setAvailableCategories(uniqueCategories); // Update available categories - } catch (error) { toast.error("Oops, can't get your products, sorry! Try refreshing the page."); console.error("Fetching products failed:", error); @@ -59,21 +69,26 @@ function CustomizedGifts() { useEffect(() => { const filterProducts = () => { let updatedProducts = products; + if (categoryFilter) { updatedProducts = updatedProducts.filter( (product) => product.category === categoryFilter ); } + if (priceFilter) { + const [min, max] = priceFilter.split("-").map(Number); updatedProducts = updatedProducts.filter( - (product) => product.price <= parseInt(priceFilter) + (product) => product.price >= min && product.price <= max ); } + if (ratingFilter) { updatedProducts = updatedProducts.filter( (product) => Math.round(product.rating.rate) >= ratingFilter ); } + setFilteredProducts(updatedProducts); }; @@ -84,7 +99,10 @@ function CustomizedGifts() {
Customized Gifts | VigyBag - +
@@ -95,10 +113,7 @@ function CustomizedGifts() { setRatingFilter={setRatingFilter} backgroundColor="#e5ebe4ff" /> - +
From d4a3d4587b800d43a31c12e4e51b88dcb4bf6723 Mon Sep 17 00:00:00 2001 From: Anishhhh12 <165990614+Anishhhh12@users.noreply.github.com> Date: Tue, 19 Aug 2025 21:57:31 +0530 Subject: [PATCH 3/4] Update Filters.jsx --- .../components/Popular_Categories/Filters.jsx | 114 +++++++----------- 1 file changed, 42 insertions(+), 72 deletions(-) diff --git a/src/User/components/Popular_Categories/Filters.jsx b/src/User/components/Popular_Categories/Filters.jsx index 15bc65abe..2223b578b 100644 --- a/src/User/components/Popular_Categories/Filters.jsx +++ b/src/User/components/Popular_Categories/Filters.jsx @@ -1,83 +1,53 @@ import React from "react"; -// Filters component to handle filtering of products -function Filters({ - setCategoryFilter, - setPriceFilter, - setRatingFilter, - backgroundColor, - availableCategories, // Accept the dynamically generated categories as a prop -}) { - // Determine CSS classes based on background color input - const filterClasses = backgroundColor.startsWith("#") - ? "" - : `bg-${backgroundColor}`; - - // Determine inline styles based on background color input - const filterStyles = backgroundColor.startsWith("#") - ? { backgroundColor } - : {}; - - // Define price ranges - const priceRanges = [ - "0-100", - "100-200", - "200-300", - "300-400", - "400-500", - "500-1000", - ]; - +function Filters({ availableCategories, setCategoryFilter, setPriceFilter, setRatingFilter, backgroundColor }) { return ( - - ); -} -// FilterSection component to render individual filter sections -function FilterSection({ title, options, onChange }) { - return ( -
-

{title}

- + {/* Rating Filter */} +
+

Rating

+ +
); } From e977ffccd489c1378f041f94375e60b370aeb3ac Mon Sep 17 00:00:00 2001 From: Anishhhh12 <165990614+Anishhhh12@users.noreply.github.com> Date: Tue, 19 Aug 2025 22:14:30 +0530 Subject: [PATCH 4/4] Update Filters.jsx