Submission for assignment 2

[TanNhatCMS]

Demo link: https://assignment-2.tannhatcms.xyz

[zlatanpham]

Hello @TanNhatCMS, good work!

Requirements

• [x] Render book list with pagination
• [x] Create book
• [x] Delete book
• [x] Search book by title
• [x] Standard use of React component & state
• [x] Light/dark mode

Final result: ✅ passed 90% of the requirements

Feedback

We also have some comments for your work:

1. Consider having one component for both create and edit modal. Doing so would enhance code readability and eliminate unnecessary writing.
2. The app.js seems to be doing a lot. You might want to consider splitting out some of its functionalities into separate components or custom hooks. For example, the theme provider can be in a separate part.
3. I cannot see the translation displayed in the user interface, only in the code. Please avoid including unused code.
4. There are some magic numbers in the Pagination. It might be a good idea to store theme in constants and give them a name that describe the purpose. https://github.com/TanNhatCMS/df-frontend-2023/blob/6cda304e120cf08307d46e5b5b8e77fa81621719/assignment-2/src/view/components/Pagination.js#L36
5. Use Array(pageCount).fill(0).map() is a bit implicit. Consider using Array.from({length: page Count}, (_, index) => ...) instead. https://github.com/TanNhatCMS/df-frontend-2023/blob/6cda304e120cf08307d46e5b5b8e77fa81621719/assignment-2/src/view/components/Pagination.js#L50-L51
6. Rename handleActions to something more descriptive. I would recommend passing two separate props onDelete and onEdit to make the code clearer. https://github.com/TanNhatCMS/df-frontend-2023/blob/6cda304e120cf08307d46e5b5b8e77fa81621719/assignment-2/src/view/components/Table.js#L53-L56
7. The state of the switch button’s UI does not persist after a refresh.