Submission for assignment 6.

[ABoyWithALaptop]

• demo link: https://assignment-6-9hcb.onrender.com
• repo link: https://github.com/ABoyWithALaptop/df-frontend-2023/tree/main/assignment-6
• change log:
  • use SWR and Axios API library tool to call API
  • implement protected route for all route
  • modify types and tuning base code to fit API

[chinhld12]

Nice works,

Requirements

• [x] All core functionalities present
• [x] Backend API integration
• [x] Protected routes
• [x] Logout function
• [x] Caching with SWR
• [ ] Bonus: 401 revoke access
• [ ] Bonus: SSR with cookies

Result: ✅

Feedback

1. Check your error description, and password validation required field https://github.com/ABoyWithALaptop/df-frontend-2023/blob/78fed9a5494c1686baec9f51cd6b984469c85397/assignment-6/src/app/login/page.tsx#L15-L18

2. For authentication you should included all methods and status for handling in a context for easier maintaining https://github.com/ABoyWithALaptop/df-frontend-2023/blob/78fed9a5494c1686baec9f51cd6b984469c85397/assignment-6/src/app/login/page.tsx#L28-L50

3. Should validate on the FE first before calling API for create/edit the book, and must show the error message to notice the user

4. Can consider refactor these input code to a minor components and reuse it https://github.com/ABoyWithALaptop/df-frontend-2023/blob/78fed9a5494c1686baec9f51cd6b984469c85397/assignment-6/src/app/sign-up/page.tsx#L113-L130

<FormLabel ....>
  <FormInput  errorMessage={errorMessage} .... />
</FormLabel>

5. You should use form element for handling Enter event instead of doing this approach https://github.com/ABoyWithALaptop/df-frontend-2023/blob/78fed9a5494c1686baec9f51cd6b984469c85397/assignment-6/src/components/SearchingBar/index.tsx#L34-L70

6. You can filter the books on the book table component before put it to render instead of make a global state for it, that make the code redundant and messed. Can consider use sync URL state for page and search query to achieve it https://github.com/ABoyWithALaptop/df-frontend-2023/blob/78fed9a5494c1686baec9f51cd6b984469c85397/assignment-6/src/components/SearchingBar/index.tsx#L22-L30

7. And check comments on previous assignments for improving your code