-
Notifications
You must be signed in to change notification settings - Fork 7
Ruba week1 React #3
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
Hi Ruba, Your code works well and shows a good understanding of React. Love the Product Card styling and attention to UX details ✨ Assignment Requirements ✅
![]()
Comments Rules
Suggestions 💡
Nice-to-have ✨
Praise 🌟
Nice one! |
week1/project/ecommerce/src/App.jsx
Outdated
activeCategory === "All" | ||
? productsData | ||
: productsData.filter((product) => { | ||
return product.category === activeCategory.replace("FAKE: ", ""); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
return product.category === activeCategory.replace("FAKE: ", ""); | |
return product.category === activeCategory; |
Suggestion:
.replace("FAKE: ", "")
ideally be handled within ProductList
.
Due to the Single Responsibility principle, The App pages shouldn't need to know the 'FAKE:' detail.
week1/project/ecommerce/src/App.jsx
Outdated
}); | ||
return ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
}); | |
return ( | |
}); | |
return ( |
Nice to have:
Better to have a spare line
> | ||
{category.replace("FAKE: ", "")}{" "} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
> | |
{category.replace("FAKE: ", "")}{" "} | |
> | |
{category.replace("FAKE: ", "")} |
Nice to have
week1/project/ecommerce/src/App.css
Outdated
@keyframes logo-spin { | ||
from { | ||
transform: rotate(0deg); | ||
} | ||
to { | ||
transform: rotate(360deg); | ||
} | ||
} | ||
|
||
@media (prefers-reduced-motion: no-preference) { | ||
a:nth-of-type(2) .logo { | ||
animation: logo-spin infinite 20s linear; | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Suggestion:
Removing unused files and styles that came with the project template. such as logo
, and assets folder
@@ -0,0 +1,26 @@ | |||
import React from "react"; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
import React from "react"; |
Suggestion:
When importing a React component, you can skip 'import React' for modern React (17+)
Reference
No description provided.