Moayad Mohammed - React - Week3 #22
Conversation
| ) : ( | ||
| favourites.map((favouriteItem, id) => ( | ||
| <li key={id} className="product-item"> | ||
| <div className="favourite-icon" onClick={() => handleFavouriteClick(favouriteItem)}> |
There was a problem hiding this comment.
Currently this handleFavouriteClick method is triggered when you click anywhere on the item card. It has something to do with your HTML structure. Can you try moving the elelments in this card around so that the method is not triggered when you click the card? 🔴
| import { Link } from 'react-router-dom'; | ||
|
|
||
| const Favourites = () => { | ||
| const { favourites, removeFromFavourites } = useFavourites(); |
There was a problem hiding this comment.
You're storing the whole item object in favourites. This is usually the best approach, but in this assignment we asked you to do soemthing else. From the README:
Your app should have a favourites page to list all of the products the user has favourited. You will need to perform multiple fetches as you only have the
idof the favourites.
🔴
| @@ -0,0 +1,12 @@ | |||
| import * as React from 'react'; | |||
There was a problem hiding this comment.
You're not using this file! You're using useFavourites from another file. You should delete it to avoid confusion. 🟠
| } | ||
| } | ||
|
|
||
| const fetchProducts = async () => { |
There was a problem hiding this comment.
You missed something important from the readme:
If you did the same things as us then in the Products and ProductDetails pages you will have quite a lot of duplicate logic concerning the
loadinganderrorstates of all those requests. Fix that by creating auseFetchcustom hook.
🔴
|
Hi Moayad, Here are the comments that are as yet unresolved: |
|
Hi Moayad, I'm approving this PR because of the clean up efforts you've made. There is, however, one place where you're repeating yourself unnecessarily. Can you find it? 🤔 Hint: you made a reusable piece of code and reused it in some places, but not all! |
https://hyf-react-w3.netlify.app/