Submission for assignment 3

[nghianm2803]

Demo link: https://df-frontend-2023-nghianm-assignment3.vercel.app/ Features done:

• Render books
• Add book
• Edit book
• Delete book
• Search book
• Pagination for the table and update state in the URL
• Theme switch
• Store data in LocalStorage

Additional note: I created enough books for mentors to quickly test Pagination. Validation Add/Edit form. Store books, current page, and theme in LocalStorage. Empty state for a good user experience.

[chinhld12]

Hi @nghianm2803 , solid work!

Requirements

• [x] All core functionalities present
• [x] Proper TypeScript implementation
• [x] No eslint warnings & errors
• [x] Husky & lint-staged integration

Final result: ✅ passed

Feedback

1. You can develop a reusable component for the modal and specify its usage for various purposes (such as adding, editing, or creating) instead of duplicating the code for each specific case (AddBook, EditBook, DeleteBook).

2. It seems you forgot to type these variables https://github.com/nghianm2803/df-frontend-2023/blob/874ba1b4b90d12279732f0859c85399d2e2bf522/assignment-3/src/components/TableBook.tsx#L26-L28

  const [bookToEdit, setBookToEdit] = useState<IBook | null>(null)
  const [deleteModal, setDeleteModal] = useState<boolean>(false)
  const [bookToDelete, setBookToDelete] = useState<IBook | null>(null)

TypeScript automatically infers the type of variables from their initial values, so there's no need to explicitly redefine it https://github.com/nghianm2803/df-frontend-2023/blob/874ba1b4b90d12279732f0859c85399d2e2bf522/assignment-3/src/components/TableBook.tsx#L29 https://github.com/nghianm2803/df-frontend-2023/blob/874ba1b4b90d12279732f0859c85399d2e2bf522/assignment-3/src/layouts/MainBody.tsx#L16-L17 ...

  const [isLoading, setIsLoading] = useState(true)

[nghianm2803]

@chinhld12 Thanks for your detailed feedback. I'll do better in the next assignments.