chinhld12
commented
1 year ago Hi @henrynguyen6677 ,
Requirements
- [x] Render book list with pagination
- [x] Create book
- [x] Delete book
- [x] Search book by title
- [ ] Standard use of React component & state
- [x] Light/dark mode
Final result: ✅ passed
Feedback
- The light/dark mode description should dynamically reflect the currently applied theme, as it always displays as "Light mode" even when the theme mode has been toggled to dark. To improve the user experience, you should store the selected preferred theme in
localStorage. This way, the user's theme preference can be remembered and applied consistently across sessions.
-
Searching the book name should support the case-sensitive.
-
Should validate input before adding a new book
-
This process should be refactored into a pure function to obtain the initial data, and a state should be used to store the book data instead of the current approach. This change is necessary because React cannot automatically re-render based on changes in localStorage. And use with
localStorageoperations should be handled with error handlings too.
- Too many redundant codes not related to the operations in your code.
- It seems like there are a couple of issues in your React code:
- The default values for the
createContextfunction should be an object with properties, not types. You should provide an initial state object with the shape you want for your context. - The types should be lowercase (e.g., array, function, and number) and not capitalized.
Example you can create context like this:
import { createContext } from "react";
const noop = () => {}
export const BookRowsContext = createContext({
rows: [],
setRows: noop,
setStart: noop,
start: 1,
deleteRow: {},
});- At this place, you can use the mode you've already declared in the App.js and access it through the Context API you've created, rather than creating another state in the Toggle Component. This approach will help maintain consistency and avoid unnecessary duplication of state.
.
- Naming variables is too generic, and does not accurately reflect the purpose and meaning of the code they represent.
start->pagerows->booksAddBookOverlay->AddBookFormModalDeleteBookOverlay->DeleteBookModal- ...
- Should be a button element for clickable elements https://github.com/henrynguyen6677/df-frontend-2023/blob/de3ea3a4f03222b57af5475f53bd946833c1db06/assignment-2/src/components/toogle/toogle.component.js#L19-L20
henrynguyen6677
https://df-frontend-2023-ojhr.vercel.app/