Conversation
|
@GauravKarakoti 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. |
📝 WalkthroughWalkthroughAdds a new Shop page with product data and add-to-cart behavior, registers a /shop route, updates several "Shop Now" links to point to /shop, and bumps the react-icons dependency version. Changes
Sequence DiagramsequenceDiagram
actor User
participant Browser
participant Shop as Shop Component
participant Store as Redux (dispatch)
participant Storage as localStorage
User->>Browser: Clicks "Add to cart"
Browser->>Shop: event -> addToCart(product)
Shop->>Storage: Read 'vigybag-cart'
Storage-->>Shop: return cart (or empty)
Shop->>Shop: update cart array (add product with qty 1)
Shop->>Storage: Write updated 'vigybag-cart'
Shop->>Store: dispatch(addItemToCartAction)
Store-->>Shop: ack
Shop->>Browser: alert("item added to cart")
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 3❌ Failed checks (1 warning, 2 inconclusive)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
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. Comment |
There was a problem hiding this comment.
Actionable comments posted: 6
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/User/pages/Order/CartEmpty.jsx (1)
12-15: Typo: "catgories" → "categories".Line 14 contains a typo in the user-facing text.
Proposed fix
<p> Looks like you have not added anything to your cart. Go ahead and - explore top catgories! + explore top categories! </p>
🤖 Fix all issues with AI agents
In `@src/data/products.js`:
- Line 6: The products data contains a duplicate title string "Striped Flutter
Sleeve Overlap Collar Peplum Hem Blouse" used twice; open the products array in
src/data/products.js, locate the second product object that uses that same title
(the duplicate at the other occurrence referenced around line 15) and replace
its title value with the correct, unique product name for that item (or a
clearly different placeholder title if the real name is unknown), ensuring the
title property in that product object is unique across the products array.
- Line 5: The product entries in src/data/products.js use transient Brave Search
proxy URLs in the image property and contain duplicate titles; update each
product object's image field to point to stable sources (preferably local assets
in the repo or a stable CDN/direct original-source URL) and ensure every
product's title property is unique and accurate (look for objects with "image"
and "title" keys and correct the duplicated "Striped Flutter Sleeve Overlap
Collar Peplum Hem Blouse" entry to the intended distinct title).
In `@src/User/components/HomPageCard/LatestInMarketCard.jsx`:
- Around line 65-72: The nested <Link> inside the LatestInMarketCard causes
invalid HTML because the whole card is already wrapped with <Link to={path}>;
remove the inner <Link to="/shop"> and convert the button to use programmatic
navigation (useNavigate from react-router-dom) in an onClick handler that calls
navigate('/shop') while calling event.stopPropagation() to prevent the card's
outer link from activating; update the component to import and use useNavigate,
replace the inner Link with a plain <button> that runs the onClick handler, and
ensure the button preserves the existing classes and accessibility attributes.
In `@src/User/pages/Home/Home.jsx`:
- Around line 237-244: The Shop Now button in Home.jsx still has the vestigial
onClick={scrollToSection} handler which is ineffective because the button is
wrapped in <Link to="/shop">; remove the onClick prop from the <button> (and any
direct reference to scrollToSection on that element) so the link performs normal
navigation, and double-check that the scrollToSection function (if only used
here) is either removed or retained only where actually needed.
In `@src/User/pages/Shop/Shop.jsx`:
- Around line 5-8: The addToCart function currently calls JSON.parse on
localStorage.getItem('vigybag-cart') which can throw for malformed data; wrap
the parse in a safe guard (try/catch or a small safeParse helper) to fall back
to an empty array when parsing fails or value is null, then proceed to create
updatedCart and setItem as before; update references to existingCart/updatedCart
in addToCart so malformed stored values no longer crash the "Add to cart" flow.
- Around line 5-10: The addToCart function currently writes raw products to
localStorage which breaks the cart schema; modify Shop.jsx to use useDispatch
and dispatch the Redux action manageCartItem with { product, quantity: 1 }
instead of manipulating localStorage, import useDispatch and manageCartItem,
replace the existing addToCart implementation (the function named addToCart) to
call dispatch(manageCartItem({ product, quantity: 1 })) and keep the alert after
dispatch.
🧹 Nitpick comments (4)
src/User/pages/Home/Home.jsx (1)
1-10: Consider consolidating react-router-dom imports.
Link(line 10) anduseNavigate(line 2) are both imported fromreact-router-dombut in separate statements. Additionally, if thescrollToSectiononClick is removed as suggested, verify whetheruseNavigateis still needed elsewhere in this component.Consolidate imports
import { useRef, useState } from "react"; -import { useNavigate } from "react-router-dom"; +import { useNavigate, Link } from "react-router-dom"; import CategoryCard from "../../components/HomPageCard/CategoryCard"; ... -import { Link } from 'react-router-dom';src/App.jsx (1)
107-107: Consider using a relative path for consistency.The route uses an absolute path
"/shop"while sibling routes use relative paths (e.g.,"latestInMarket"on line 102). Both work correctly within nested routes in react-router-dom v6, but consistency improves readability.Optional: Use relative path
- <Route path="/shop" element={<Shop />} /> + <Route path="shop" element={<Shop />} />src/data/products.js (1)
20-21: Address TODO or remove placeholder comment before merging.The trailing comment indicates incomplete work. Either add more product categories now or track this as a separate issue.
Would you like me to open an issue to track adding more product data across categories?
src/User/pages/Shop/Shop.jsx (1)
12-24: Pre-group products to avoid repeated filtering.
products.filter(...)inside each category loop is O(n²). Pre-grouping once is clearer and scales better.♻️ Suggested refactor
- const categories = [...new Set(products.map(p => p.category))]; + const productsByCategory = products.reduce((acc, product) => { + (acc[product.category] ??= []).push(product); + return acc; + }, {}); + const categories = Object.keys(productsByCategory); @@ - {products.filter(p => p.category === category).map((product) => ( + {productsByCategory[category].map((product) => (
Fixes Issue
Closes #1489
Changes proposed
Added a shop page and linked it to shop now button
Screenshots
Summary by CodeRabbit
New Features
Bug Fixes / UX
Chores
✏️ Tip: You can customize this high-level summary in your review settings.