Submission for assignment 4

[khoatruong19]

df-frontend-ass4.vercel.app

[chinhld12]

Solid works,

Requirements

• [x] All core functionalities present
• [x] Proper Tailwind implementation
• [x] Book detail page
• [x] 404 page
• [x] Redirect after deletion
• [x] Bonus: Tailwind dark/light mode
• [x] Bonus: URL state sync for page and query

Result: ✅ passed

Feedback

1. Check your render on not found page (may related to sync URL state) and edit book modal focusing which made cannot author field correctly

2. The 404 Page does not appear appropriately when using the dark theme.

3. Logic for deleting the book just filter the book list is enough https://github.com/khoatruong19/df-frontend-2023/blob/35f7751d6de3d7c0a997640feeaec3445072aa39/assignment-4/src/hooks/useBooks.ts#L108-L112

   
   +    const nextBooks = [...books].filter((item) => item.id !== id)
   +    setBooks(nextBooks)
   +    saveBooksToLocalStorage(nextBooks)

• const existingBookIndex = books.findIndex((item) => item.id === id)
• if (existingBookIndex < 0) return
• const tempBooks: Book[] = [...books]
• tempBooks.splice(existingBookIndex, 1)
• setBooks(tempBooks)
• saveBooksToLocalStorage(tempBooks)

4. The logic of this places seem wrong? If the same data is expected to be returned before reaching the line to trigger an alert, you might want to consider using lodash's isEqual function to improve the comparison of objects https://github.com/khoatruong19/df-frontend-2023/blob/35f7751d6de3d7c0a997640feeaec3445072aa39/assignment-4/src/hooks/useBooks.ts#L90-L97

5. types should be under types folders in your application folders tree, not utils

   assignment-4/src/utils/types.ts

6. Some places still not completely migrated to Tailwind CSS

   assignment-4/src/components/CustomThemeSwitch/styles.css

7. Consider using the HTML a tag component for navigation, as it enhances the application's semantics and accessibility. You can utilize the Link component from Next.js to address this situation. https://github.com/khoatruong19/df-frontend-2023/blob/35f7751d6de3d7c0a997640feeaec3445072aa39/assignment-4/src/components/BookRow.tsx#L50-L56