Price range issue #2582 #2597
Price range issue #2582 #2597
Conversation
|
@Anishhhh12 is attempting to deploy a commit to the Vivek Prajapati's projects Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughRefactors Filters.jsx to a simplified inline-styled div, removes the FilterSection subcomponent, updates category/price/rating UI, and changes the Filters parameter destructuring order. Customized-Gifts.jsx changes price filtering from a max-only threshold to inclusive numeric ranges parsed from "min-max". Other edits are formatting-only. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant Filters as Filters.jsx
participant Page as Customized-Gifts.jsx
participant Grid as ProductGrid
User->>Filters: Select Category / Price Range / Rating
Filters-->>Page: setCategoryFilter(value)\nsetPriceFilter("min-max")\nsetRatingFilter(Number)
Note right of Page: State updated with parsed filters
Page->>Grid: Render with filters
Grid->>Grid: Filter products\n- Category match\n- Price: min ≤ price ≤ max\n- Rating ≥ selected
Grid-->>User: Display filtered products
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. ✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
src/User/pages/Popular_Categories/Customized-Gifts.jsx (1)
109-115: LGTM: Filters usage with named props avoids destructuring-order pitfalls.This page is already updated to the range-based price filter. Ensure other pages follow suit.
Note: Cross-page compatibility concern about price filter format already flagged in Filters.jsx with a verification script.
🧹 Nitpick comments (6)
src/User/components/Popular_Categories/Filters.jsx (4)
3-3: DefaultavailableCategoriesto an empty array to avoid runtime errors.Protects against undefined and simplifies rendering.
-function Filters({ availableCategories, setCategoryFilter, setPriceFilter, setRatingFilter, backgroundColor }) { +function Filters({ availableCategories = [], setCategoryFilter, setPriceFilter, setRatingFilter, backgroundColor }) {
5-5: Verify layout: re-add responsive width to avoid flex shrink/expansion regressions.Earlier implementations constrained the sidebar width on large screens. Consider restoring responsive width classes.
- <div className="p-4 rounded-2xl shadow-md" style={{ backgroundColor }}> + <div className="p-4 rounded-2xl shadow-md w-full lg:w-1/4" style={{ backgroundColor }}>Test at mobile and lg breakpoints to ensure ProductGrid layout remains as intended.
30-35: Use open-ended value for “Above ₹1000” to avoid arbitrary upper bounds.Replace hardcoded 99999 with an open-ended representation; pair this with parsing support in consumers (suggested in Customized-Gifts.jsx comment).
- <option value="1000-99999">Above ₹1000</option> + <option value="1000-">Above ₹1000</option>
9-12: Minor a11y: add accessible labels to the controls. Screen-readers benefit from explicit control labels. - <select + <select + aria-label="Filter by category" className="w-full p-2 border rounded" onChange={(e) => setCategoryFilter(e.target.value)} > ... - <select + <select + aria-label="Filter by price range" className="w-full p-2 border rounded" onChange={(e) => setPriceFilter(e.target.value)} > ... - <select + <select + aria-label="Filter by minimum rating" className="w-full p-2 border rounded" onChange={(e) => setRatingFilter(Number(e.target.value))} > Also applies to: 25-27, 41-43 src/User/pages/Popular_Categories/Customized-Gifts.jsx (2) 79-83: Harden range parsing and support open-ended values. Make the filter resilient to "min-", "-max", and "1000+" while preserving current "min-max". - if (priceFilter) { - const [min, max] = priceFilter.split("-").map(Number); - updatedProducts = updatedProducts.filter( - (product) => product.price >= min && product.price <= max - ); - } + if (priceFilter) { + const [minStr, maxStr] = priceFilter.split("-"); + const min = Number(minStr) || 0; + // Support "", undefined, and "+" suffix for open-ended max + const max = + maxStr === undefined || maxStr === "" || maxStr === "+" + ? Infinity + : Number(String(maxStr).replace("+", "")); + updatedProducts = updatedProducts.filter( + (product) => product.price >= min && (max === Infinity || product.price <= max) + ); + } 102-105: SEO nit: update meta description to match “Customized Gifts”. The current copy references “beauty and wellness products”. Suggest updating for relevance. - <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="Discover unique customized gifts and personalized items at VigyBag. Find the perfect gift tailored to your style and occasion." + /> 📜 Review details Configuration used: CodeRabbit UI Review profile: CHILL Plan: Pro 💡 Knowledge Base configuration: MCP integration is disabled by default for public repositories Jira integration is disabled by default for public repositories Linear integration is disabled by default for public repositories You can enable these sources in your CodeRabbit configuration. 📥 Commits Reviewing files that changed from the base of the PR and between a543783 and e977ffc. 📒 Files selected for processing (2) src/User/components/Popular_Categories/Filters.jsx (1 hunks) src/User/pages/Popular_Categories/Customized-Gifts.jsx (5 hunks) 🧰 Additional context used 🧠 Learnings (1) 📚 Learning: 2024-08-10T11:21:55.246Z Learnt from: techy4shri PR: #2198 File: src/User/pages/Latest_in_the_Market/ArtSupplies.jsx:23-24 Timestamp: 2024-08-10T11:21:55.246Z Learning: In the VigyBag project, hardcoding the `categoriesToFetch` array directly within components is preferred for ease of modification and immediate reflection of changes. Applied to files: src/User/pages/Popular_Categories/Customized-Gifts.jsx 🧬 Code Graph Analysis (2) src/User/pages/Popular_Categories/Customized-Gifts.jsx (2) src/User/pages/Latest_in_the_Market/ArtSupplies.jsx (4) categoryFilter (16-16) priceFilter (17-17) ratingFilter (18-18) filteredProducts (14-14) src/User/pages/Popular_Categories/Body-Care.jsx (5) categoryFilter (13-13) priceFilter (14-14) ratingFilter (15-15) filteredProducts (11-11) updatedProducts (60-78) src/User/components/Popular_Categories/Filters.jsx (1) src/User/pages/Popular_Categories/Furniture-Decor.jsx (3) availableCategories (13-13) updatedProducts (61-79) FurnitureDecor (10-107) 🔇 Additional comments (5) src/User/components/Popular_Categories/Filters.jsx (2) 41-44: Good: explicit numeric cast for rating values. Casting with Number(...) ensures consistent comparison semantics downstream. 14-18: LGTM: dynamic category options from data. Using availableCategories with stable keys is clean and scalable. src/User/pages/Popular_Categories/Customized-Gifts.jsx (3) 19-27: LGTM: categoriesToFetch inline, matches repo preference. This aligns with the retrieved learning for in-component hardcoding of categories. 56-58: LGTM: unique categories extraction is clear and correct. Set + map pattern is efficient and readable. 116-116: LGTM: ProductGrid heading updated appropriately. Consistent with page title/intent.
| {/* 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> |
There was a problem hiding this comment.
💡 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.
There was a problem hiding this comment.
have you make these changes ???
There was a problem hiding this comment.
@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!
Add title and desc like this and also mention issue number
|
|
mention your issue in description |
|
i forked your repo and deploy it on vercel where i made changes on github after which the price range issue resolved like in the range 100-200,200-300 and more rather than under 200 or 300 but after generating pull request it told me that i got issues so this is the problem i am currently facing. |
can you fix these button width....kya ap in buttons ko fix kr sakte ho inka width sahi ho paye to taki inke andar ka content ek line me a jaye ??? |
|
konse button add to cart and buy now wale ka ya kisi aur ka? |
inse ander ka text proper nhi show ho rha so If you can then kindly try to fix it |
2 participants
Fixes Issue
Changes proposed
Screenshots
Note to reviewers
Summary by CodeRabbit
New Features
Style