Refactor CartItem and CartSlice components; enhance cart functionalit… #462
Conversation
…y and UI - Updated CartItem component to improve layout and functionality, including total amount calculation and item removal. - Added checkout alert and continue shopping button functionality. - Enhanced CartSlice with clearCart action and improved quantity update logic. - Introduced Header component with navigation links and cart item count display. - Created Header.css for styling the header and navigation. - Refactored ProductList component to streamline product display and add to cart functionality. - Improved ProductList.css for better layout and responsiveness. - Updated main.jsx and store.js for consistent import style and structure. - Removed unnecessary styles and code from ProductList. - Adjusted Vite configuration for cleaner setup.
There was a problem hiding this comment.
Pull request overview
This PR significantly refactors the shopping cart application by introducing React Router for navigation, restructuring the Redux cart management, and improving the overall UI/UX. The changes transform the app from a simple single-page implementation to a multi-route application with enhanced cart functionality and professional styling.
Key changes:
- Introduced React Router for multi-page navigation (landing page, product list, cart)
- Refactored Redux CartSlice with complete implementations of cart operations (add, remove, update quantity, clear)
- Created a new Header component with navigation links and dynamic cart item count display
- Redesigned ProductList with categorized plant display and improved visual feedback for "Add to Cart" actions
Reviewed changes
Copilot reviewed 13 out of 14 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| vite.config.js | Removed base path configuration and updated quote style to double quotes |
| src/store.js | Reformatted for consistent code style with double quotes and proper indentation |
| src/main.jsx | Reordered imports and updated to double quote style for consistency |
| src/ProductList.jsx | Complete refactor: simplified plant data structure, integrated Redux for cart management, added category-based display with visual feedback |
| src/ProductList.css | Redesigned with modern grid layout, improved responsiveness, and enhanced visual styling |
| src/Header.jsx | New navigation header component with cart count badge and React Router links |
| src/Header.css | New styling for header with gradient background, sticky positioning, and responsive design |
| src/CartSlice.jsx | Implemented complete Redux slice with addItem, removeItem, updateQuantity, and clearCart reducers |
| src/CartItem.jsx | Enhanced cart UI with order summary, item management controls, checkout flow, and empty cart state |
| src/CartItem.css | Comprehensive redesign with improved card layout, better spacing, and modern styling |
| src/App.jsx | Integrated React Router with route definitions for landing, products, and cart pages |
| src/App.css | Added styles to support routing and improved overall layout structure |
| package.json | Added react-router-dom dependency for navigation functionality |
| package-lock.json | Updated lock file with react-router-dom and its dependencies |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| {plantsArray | ||
| .filter((plant) => plant.category === category) | ||
| .map((plant, index) => ( | ||
| <div key={index} className="product-card"> |
There was a problem hiding this comment.
Using array index as key is an anti-pattern in React. Since each plant has a unique name property, use plant.name as the key instead of index to ensure proper component reconciliation and avoid potential rendering issues when the list order changes.
| <div key={index} className="product-card"> | |
| <div key={plant.name} className="product-card"> |
|
|
||
| let total = 0; | ||
| cart.forEach((item) => { | ||
| const price = parseFloat(item.cost.substring(1)); // Remove the dollar sign and convert to number |
There was a problem hiding this comment.
Missing input validation: The substring(1) operation assumes the cost always starts with a dollar sign. If the cost format ever changes or is missing the $, this will produce incorrect results. Consider using a more robust parsing method like parseFloat(item.cost.replace(/[^0-9.]/g, '')) or add validation to ensure the expected format.
| setTimeout(() => { | ||
| setAddedToCart((prev) => ({ | ||
| ...prev, | ||
| [plant.name]: false, | ||
| })); | ||
| }, 2000); |
There was a problem hiding this comment.
Memory leak risk: The setTimeout in handleAddToCart is not cleaned up if the component unmounts before the timeout completes. This can cause state updates on an unmounted component. Store the timeout ID and clean it up in a useEffect cleanup function, or use a ref to track if the component is mounted.
| items: [], | ||
| }; | ||
|
|
||
| const cartSlice = createSlice({ |
There was a problem hiding this comment.
[nitpick] Naming inconsistency: The slice is named cartSlice (lowercase) but was previously exported as CartSlice (uppercase). While the export names are correct, the internal constant name should follow consistent naming. Consider using CartSlice for the slice name to maintain consistency with Redux naming conventions where slices are typically PascalCase.
| </li> | ||
| <li className="cart-link-wrapper"> | ||
| <Link to="/cart" className="cart-link"> | ||
| <span className="cart-icon">🛒</span> |
There was a problem hiding this comment.
Accessibility issue: Using emoji (🛒) for the cart icon is not ideal for accessibility. Screen readers may not announce it properly. Consider using an SVG icon or an icon library (like React Icons) with proper aria-label attributes to ensure better accessibility for users with assistive technologies.
| </div> | ||
| <div className="summary-row"> | ||
| <span>Shipping:</span> | ||
| <span>$5.99</span> |
There was a problem hiding this comment.
[nitpick] The shipping cost is hardcoded as $5.99 in the UI. Consider defining this as a constant at the top of the file or in a configuration file to make it easier to maintain and update in the future.
| name: "Snake Plant", | ||
| category: "Low Light", | ||
| image: | ||
| "https://images.unsplash.com/photo-1586985367371-7d672fdc5f33?w=400&h-400&fit=crop", |
There was a problem hiding this comment.
The URL parameter contains a typo: h-400 should be h=400 to match the query parameter format used in other image URLs.
| "https://images.unsplash.com/photo-1586985367371-7d672fdc5f33?w=400&h-400&fit=crop", | |
| "https://images.unsplash.com/photo-1586985367371-7d672fdc5f33?w=400&h=400&fit=crop", |
1 participant
…y and UI