Majd hussein React w3 #32
Conversation
robvk
left a comment
robvk
left a comment
There was a problem hiding this comment.
Nothing critical, the thing I do really want you to look at is the html doc manipulation as that is a mistake that shows a non-react mindset. Definitely change that in your version but I assume you can do that. The rest are sloppy mistakes to avoid in the future.
So will approve, but let me know if anything is unclear
| getCategories(); | ||
| }, []); | ||
|
|
||
| let buttonsArr = []; |
| }, []); | ||
|
|
||
| let buttonsArr = []; | ||
| const buttonClick = (event) => { |
There was a problem hiding this comment.
You don't need to do any html doc manipulation. In line 53 you call this function, but there you already know the category that is being clicked. So you can actually pass the real category along to this function by writing onClick={() => buttonClick(category)}
|
|
||
| export function FavoritesProvider({ children }) { | ||
| const [favorites, setFavorites] = useState([]); | ||
| function switchFavorite(itemId) { |
There was a problem hiding this comment.
Small detail, in computer science jargon switch is generally the thing that facilitates the changing and toggle is actually changing it. So for example you could have a FavoriteSwitch component (the thing that handles to changing) and it would call a function toggleFavorite.
In this case you only have the context so this function should probably be called toggleFavorite
| } | ||
|
|
||
| if (loading) { | ||
| return <Message message={"Products are loading..."} />; |
There was a problem hiding this comment.
Nice work making a Message component to handle all of this, is very common!
| if (error) { | ||
| return <Message message={error} />; | ||
| } | ||
| console.log(data); |
There was a problem hiding this comment.
You forgot to remove a debugging console.log
| setLoading(false); | ||
| } | ||
|
|
||
| console.log(data); |
|
|
||
| function ProductCard({ item }) { | ||
| const { favorites, switchFavorite } = useContext(FavoritesContext); | ||
| const isProductFav = favorites.includes(item.id); |
There was a problem hiding this comment.
You could think about putting the isFavorite function in the FavoritesContext as well as then any component using the FavoritesContext can use it if they want to
| </div> | ||
| <div className="p-4 flex-grow"> | ||
| <h6 className="mb-2 text-slate-800 text-lg font-semibold line-clamp-2"> | ||
| {item.title.replace("Fake: ", "")} |
There was a problem hiding this comment.
You don't need to filter on Fake anymore
2 participants
No description provided.