DARYNA-TKACHENKO-REACT-WEEK3 #22
Conversation
sycons
left a comment
sycons
left a comment
There was a problem hiding this comment.
Following were implemented:
- Copy over the assets folder to your ecommerce/src folder ✅
- A context that stores the id of all of the favourites of the user (not the whole object) ✅
- Heart clicked on product list page and product details page updates the favourites array in the context ✅
- Favourites page listing the products user has favourited ✅
- Navigation bar at the top that handles routing between
/and/favourites✅ - Create a
useFetchcustom hook to reuse logis forloadinganderrorstates ✅ - Deploy app somewhere (like netlify) and add link to PR ✅
Requested improvements:
- Fix linting error in
FavouritesContext.jsx. I've added comment on the file. You can also runnpm run lintto view the linting errors.
Great job on the styling and adding UI components like banner, FAQ and contact info ⭐
It's nice to see you trying out features beyond the assignment and increasing your skill level.
Also great job on using a context for a shopping cart and implementing it ⭐
| @@ -0,0 +1,48 @@ | |||
| import { createContext, useState, useEffect } from "react"; | |||
|
|
|||
| export const FavouritesContext = createContext(); | |||
There was a problem hiding this comment.
Please fix this linting error "Fast refresh only works when a file only exports components. Move your React context(s) to a separate file."
sycons
left a comment
sycons
left a comment
There was a problem hiding this comment.
Some optional changes you can implement to make your code more structured and maintainable.
|
|
||
| function AppContent() { | ||
| const location = useLocation(); | ||
| const showHero = location.pathname === "/"; |
There was a problem hiding this comment.
OPTIONAL: A better way to do this is to move showing the HeroSection to the HomePage. This will eliminate this line 14 and line 19. This also makes the code more maintainable.
| return { data, loading, error, refetch }; | ||
| } | ||
|
|
||
| export function useMultipleFetch(fetchFunctions) { |
There was a problem hiding this comment.
OPTIONAL: This hook can be moved to its own file.
| </div> | ||
| </section> | ||
|
|
||
| <section className="bg-gray-50 py-16"> |
There was a problem hiding this comment.
OPTIONAL: This can be moved into a component called Faq
| </div> | ||
| </section> | ||
|
|
||
| <section className="relative bg-gradient-to-br from-sky-500 via-sky-400 to-sky-500 text-white py-20 overflow-hidden"> |
There was a problem hiding this comment.
OPTIONAL: This can be moved into a component called FollowUs.
Separating into components will make the HomePage smaller and those components can be used in other pages when needed.
2 participants
No description provided.