Skip to content

Price range issue #2582 #2597

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Anishhhh12 wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Price range issue #2582 #2597

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
81c428f
Update Filters.jsx
Anishhhh12 Aug 19, 2025
be02f8b
Update Customized-Gifts.jsx
Anishhhh12 Aug 19, 2025
d4a3d45
Update Filters.jsx
Anishhhh12 Aug 19, 2025
e977ffc
Update Filters.jsx
Anishhhh12 Aug 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
105 changes: 43 additions & 62 deletions src/User/components/Popular_Categories/Filters.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,72 +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 }
: {};

function Filters({ availableCategories, setCategoryFilter, setPriceFilter, setRatingFilter, backgroundColor }) {
return (
<aside
className={`lg:w-[20vw] p-6 shadow-md lg:h-auto w-[100vw] mt-[13vh] ${filterClasses}`}
style={filterStyles} // Apply the determined inline styles


>
<h2 className="text-xl font-bold mb-4">Filters</h2>
<div className="space-y-4">
{/* Filter section for Category */}
<FilterSection
title="Category"
options={availableCategories} // Use availableCategories instead of static list
<div className="p-4 rounded-2xl shadow-md" style={{ backgroundColor }}>
{/* Category Filter */}
<div className="mb-4">
<h3 className="font-semibold mb-2">Category</h3>
<select
className="w-full p-2 border rounded"
onChange={(e) => setCategoryFilter(e.target.value)}
/>
{/* Filter section for Price */}
<FilterSection
title="Price"
options={["50", "100", "200", "500"]}
>
<option value="">All</option>
{availableCategories.map((category) => (
<option key={category} value={category}>
{category}
</option>
))}
</select>
</div>

{/* Price Filter */}
<div className="mb-4">
<h3 className="font-semibold mb-2">Price Range</h3>
<select
className="w-full p-2 border rounded"
onChange={(e) => setPriceFilter(e.target.value)}
/>
{/* Filter section for Rating */}
<FilterSection
title="Rating"
options={["1", "2", "3", "4", "5"]}
onChange={(e) => {
const value = parseInt(e.target.value, 10); //converting into int from decimal
setRatingFilter(Number.isNaN(value) ? 0.00 : value); //applying condition for rating or higher
}
}
/>
>
<option value="">All</option>
<option value="0-100">₹0 - ₹100</option>
<option value="100-300">₹100 - ₹300</option>
<option value="300-500">₹300 - ₹500</option>
<option value="500-1000">₹500 - ₹1000</option>
<option value="1000-99999">Above ₹1000</option>
</select>
Comment on lines +22 to +35
Copy link
Contributor

@coderabbitai coderabbitai bot Aug 19, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Breaking change: Price filter now emits “min-max” strings; other pages still expect a single max.

Pages like Furniture-Decor.jsx still do product.price <= parseInt(priceFilter). With new values like "100-300", parseInt yields 100, breaking filtering. Either:

  • update all consumers to handle ranges, or
  • introduce a temporary compatibility strategy (e.g., parse both formats), and migrate repo-wide.

Run to locate old max-only filters and usages of Filters:

As a migration template for each page, replace the price-filter block with:

if (priceFilter) {
  let min = 0, max = Infinity;
  if (priceFilter.includes("-")) {
    const [a, b] = priceFilter.split("-");
    min = Number(a) || 0;
    max = b === undefined || b === "" ? Infinity : Number(b.replace("+",""));
  } else {
    max = Number(priceFilter);
  }
  updatedProducts = updatedProducts.filter(
    (p) => p.price >= min && (max === Infinity || p.price <= max)
  );
}

🏁 Script executed:

#!/bin/bash
# Find pages that still use max-only price filtering
rg -nP -C3 --type=js --type=jsx '\bprice\s*<=\s*parseInt\s*\(\s*priceFilter\s*\)'

# Find all direct usages of <Filters ... />
rg -nP -C2 --type=jsx '<Filters\b'

# Optional: find places parsing priceFilter without handling ranges
rg -nP -C3 --type=js --type=jsx 'priceFilter[^;\n]*split\("|-"|\)' | sed -n '1,200p'

Length of output: 289

🏁 Script executed:

#!/bin/bash
# Search for max-only price filtering patterns in JS/JSX files
rg -nP -C3 '\bprice\s*<=\s*parseInt\s*\(\s*priceFilter\s*\)' --glob '*.js' --glob '*.jsx'

# Find all direct usages of <Filters ... /> in JS/JSX
rg -nP -C2 '<Filters\b' --glob '*.js' --glob '*.jsx'

# Look for any existing range parsing of priceFilter
rg -nP -C3 'priceFilter\s*\.\s*split\(' --glob '*.js' --glob '*.jsx'

Length of output: 18665

Breaking change: Price filter now emits “min–max” strings
Pages still using product.price <= parseInt(priceFilter) will break when a range is selected (parseInt("100-300") === 100).

Affected files (must be updated):

  • src/User/pages/Latest_in_the_Market/ArtSupplies.jsx
  • src/User/pages/Latest_in_the_Market/BambooProducts.jsx
  • src/User/pages/Latest_in_the_Market/StorageBaskets.jsx
  • src/User/pages/Latest_in_the_Market/OrganicTea.jsx
  • src/User/pages/Latest_in_the_Market/HandMadeSoaps.jsx
  • src/User/pages/Latest_in_the_Market/OrganicSoaps.jsx
  • src/User/pages/Latest_in_the_Market/NaturalCosmetics.jsx
  • src/User/pages/Latest_in_the_Market/CeramicDinnerware.jsx
  • src/User/pages/Popular_Categories/Body-Care.jsx
  • src/User/pages/Popular_Categories/Furniture-Decor.jsx
  • src/User/pages/Popular_Categories/Printing-Stationery.jsx
  • src/User/pages/Popular_Categories/Health-Supplements.jsx
  • src/User/pages/Popular_Categories/Food-Beverages.jsx
  • src/User/pages/Popular_Categories/Beauty-Wellness.jsx
  • src/User/pages/Popular_Categories/Fashion-Accessories.jsx

(Note: Customized-Gifts.jsx already handles ranges.)

Migration template for single values and ranges:

if (priceFilter) {
  const [minRaw, maxRaw] = priceFilter.split("-");
  const min = Number(minRaw) || 0;
  const max = maxRaw != null && maxRaw !== "" ? Number(maxRaw) : Infinity;
  updatedProducts = updatedProducts.filter(
    p => p.price >= min && (max === Infinity || p.price <= max)
  );
}

Either update each consumer’s filter logic as above, or introduce a shared helper in Filters.jsx to parse both formats and migrate repo-wide.

🤖 Prompt for AI Agents 
In src/User/components/Popular_Categories/Filters.jsx around lines 22-35 the
price select now emits "min-max" strings which breaks consumers that call
parseInt on the whole value; update all affected pages (listed in the review) to
handle range strings by parsing min and max and filtering with p.price >= min &&
(max === Infinity || p.price <= max). Either (a) implement that parsing+filter
logic in each listed page where priceFilter is used, or (b) add a shared helper
in Filters.jsx that returns {min, max} (with max = Infinity when absent) and use
it in all consumers so they filter numeric ranges correctly.

Copy link
Owner

@codervivek5 codervivek5 Aug 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

have you make these changes ???

Copy link
Contributor

@coderabbitai coderabbitai bot Aug 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@codervivek5 I don't make code changes directly - I'm an AI assistant that provides analysis and suggestions. In my previous comment, I identified that the price filter changes would break 15+ pages, but I cannot implement those fixes myself.

Would you like me to check the current state of those files to see if the breaking changes have been addressed? I can run scripts to verify which pages still need to be updated to handle the new range-based price filtering.

The changes need to be implemented by you or your team. I can help guide the implementation process if needed!

</div>
</aside>
);
}

// FilterSection component to render individual filter sections
function FilterSection({ title, options, onChange }) {
return (
<div>
<h3 className="font-semibold mb-2">{title}</h3>
<select onChange={onChange} className="w-full p-2 border rounded">
<option value="">All</option>
{options.map((option) => (
<option key={option} value={option}>
{title === "Price" ? `Under ₹${option}` : option}
</option>
))}
</select>
{/* Rating Filter */}
<div className="mb-4">
<h3 className="font-semibold mb-2">Rating</h3>
<select
className="w-full p-2 border rounded"
onChange={(e) => setRatingFilter(Number(e.target.value))}
>
<option value="0">All</option>
<option value="3">3 ★ & above</option>
<option value="4">4 ★ & above</option>
<option value="5">5 ★ only</option>
</select>
</div>
</div>
);
}
Expand Down
37 changes: 26 additions & 11 deletions src/User/pages/Popular_Categories/Customized-Gifts.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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([]);
Expand All @@ -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,
Expand All @@ -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);
Expand All @@ -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);
};

Expand All @@ -84,7 +99,10 @@ function CustomizedGifts() {
<div className="bg-[#fff5edff] min-h-screen">
<Helmet>
<title>Customized Gifts | VigyBag</title>
<meta name="description" content="Explore a wide range of beauty and wellness products at VigyBag. Find the best products to enhance your beauty and wellbeing." />
<meta
name="description"
content="Explore a wide range of beauty and wellness products at VigyBag. Find the best products to enhance your beauty and wellbeing."
/>
</Helmet>
<main className="container">
<div className="flex flex-col lg:flex-row gap-8 relative">
Expand All @@ -95,10 +113,7 @@ function CustomizedGifts() {
setRatingFilter={setRatingFilter}
backgroundColor="#e5ebe4ff"
/>
<ProductGrid
products={filteredProducts}
headingText="Customized Gifts"
/>
<ProductGrid products={filteredProducts} headingText="Customized Gifts" />
</div>
</main>
</div>
Expand Down