Submission for assignment 2

[nguyenhoaikhang37]

// Demo link https://df-frontend-2023-4pgp.vercel.app/

// Any notes for reviewers If the code lacks clarify or if there are any issue with the application, please don't hesitate to provide feedback. I'm open to suggestions and eager to improve. Thanks a lot <3

[ngolapnguyen]

Good work 👍 I love your details.

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 70% of requirements

Feedbacks

1. Good implementation of dark-theme with CSS variables 👍

2. Good project structure 👍 I'd suggest you break down App.js even further, though, as the logic is getting really kind of hard to follow

3. Good naming, but could be a bit better. Some nitpicks:

• In App.js, attr -> bookFormDialogAttr. Considering all the logic around it, attr alone doesn't make much sense.
• In App.js, handleSubmit -> handleSubmitBookForm
• In App.js, firstInputRef is totally random
• ...

Even though they are all minor, having more precise names will make your code more read-able.

4. The logic for auto-focusing the first input feels clunky to me. A lot of extra handling to make it happen. My suggestions:

• Use the autoFocus property
• Modify the Dialog component to only render children (the form) if it's open. This will ensure autoFocus work as it only triggers once on mount