Skip to content

Comments

Shop Page#2708

Open
GauravKarakoti wants to merge 2 commits intocodervivek5:mainfrom
GauravKarakoti:Shop
Open

Shop Page#2708
GauravKarakoti wants to merge 2 commits intocodervivek5:mainfrom
GauravKarakoti:Shop

Conversation

@GauravKarakoti
Copy link

@GauravKarakoti GauravKarakoti commented Jan 22, 2026

Fixes Issue

Closes #1489

Changes proposed

Added a shop page and linked it to shop now button

Screenshots

Screenshot 2026-01-22 230707

Summary by CodeRabbit

  • New Features

    • Added a Shop page showing products grouped by category with images, titles, prices, ratings and "Add to Cart" buttons
    • Added a sample products dataset powering the Shop page
  • Bug Fixes / UX

    • Updated "Shop now" navigation to route users to the Shop page
  • Chores

    • Bumped react-icons dependency (minor version)

✏️ Tip: You can customize this high-level summary in your review settings.

@vercel
Copy link

vercel bot commented Jan 22, 2026

@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.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Jan 22, 2026

📝 Walkthrough

Walkthrough

Adds 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

Cohort / File(s) Summary
Dependency bump
package.json
react-icons upgraded from ^5.3.0 to ^5.5.0.
Routing
src/App.jsx
Imports new Shop and registers a /shop route in user routes.
Navigation updates
src/User/components/HomPageCard/LatestInMarketCard.jsx, src/User/pages/Home/Home.jsx, src/User/pages/Order/CartEmpty.jsx
Replaced/updated "Shop Now" navigation to use Link -> /shop; removed unused default React imports.
New Shop feature & data
src/User/pages/Shop/Shop.jsx, src/data/products.js
New Shop component (product grid, category grouping, Add to Cart dispatch + localStorage alert) and products data export with initial products.

Sequence Diagram

sequenceDiagram
    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")
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Possibly related PRs

Suggested labels

FrontEnd, level2, dependencies

Suggested reviewers

  • codervivek5

Poem

🐰 I found a shop with items neat and fine,

Hop, click, cart — now every product's mine.
Icons bumped up, links now lead the way,
A joyful hop to code and browse all day. ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 3
❌ Failed checks (1 warning, 2 inconclusive)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
Title check ❓ Inconclusive The title 'Shop Page' is generic and vague; it lacks specificity about the main change (adding a shop page and linking the button). Consider a more descriptive title like 'Add Shop page and link shop now button' to better convey the key changes made.
Out of Scope Changes check ❓ Inconclusive Changes include minor cleanups (removing unnecessary React imports due to JSX runtime) and a dependency bump unrelated to the main shop page feature. Clarify whether the react-icons bump and React import removals are necessary for the shop functionality or should be in a separate refactoring PR.
✅ Passed checks (2 passed)
Check name Status Explanation
Description check ✅ Passed The description covers the main requirements from the template, including the linked issue, proposed changes, and a screenshot.
Linked Issues check ✅ Passed The PR successfully implements both objectives from #1489: creates a dedicated shop page with product display and links the shop now button to the new page.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing touches
  • 📝 Generate docstrings

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

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) and useNavigate (line 2) are both imported from react-router-dom but in separate statements. Additionally, if the scrollToSection onClick is removed as suggested, verify whether useNavigate is 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) => (

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Shop now button does not work

1 participant