chinhld12
commented
11 months ago Hello @lenhuthao0777, nice work!
Requirements
- [x] Render book list with pagination
- [ ] Create book
- [x] Delete book
- [x] Search book by title
- [x] Standard use of React component & state
- [x] Light/dark mode
Final result: ✅ passed
Feedback
- You should implement requirements for the input fields to prevent any cases of missing input for adding new book form. Encountered this error if I left the topic not selected. And the create new book if leave all fields blank will create with previous values.
- Naming variables should be more meaningful reflecting the code itself.
-> isOpen -> isOpenModal
-> type -> modalType
-
To enhance maintainability and readability, it's advisable to separate the states for managing books and modal handlers in the Context API. This separation can make your code more organized, prevent potential memory leaks as the state grows, and make it easier to manage in the long term.
-
Consider using conditional rendering to add the
darkclass to theclassNameproperty of the root element (e.g.,App.js) instead of toggling it directly on thehtmlelement. This approach is more in line with React's declarative nature and can make your code easier to manage and maintain.
- You can improve your code by utilizing Tailwind Variants to define variants for elements that are natively supported by Tailwind, instead of
class-variance-authority. This will make your code more in line with Tailwind's conventions and simplify your styles.
Link demo: https://df-frontend-2023-reactjs.vercel.app/