[Chore] Improve Axios usage

[olivierobert]

Issue

The current implementation of Axios to make API requests has several limitations:

• The API URL is hard-coded in several files
• Configurations options are duplicated in several files
• Error handling is duplicated in several files

Since it is a client application, the API networking layout is the most important part of the project. Without an API, the application cannot work 😅

Expected

The API implementation can be improved by:

• Creating a request manager/service where Axios is defined, and options are configured. Use this manager./service in the components/pages.
• Use an ENV variable to configure the API URL
• Use Axios interceptors to implement requests logging, error handling, etc. so that this logic is performed on every request.

💡You might want to look into either react-query or Vercel's SWR to abstract further API queries in client applications.

[supanutjarukulgowit]

Issue

The current implementation of Axios to make API requests has several limitations:

• The API URL is hard-coded in several files
• Configurations options are duplicated in several files
• Error handling is duplicated in several files

Since it is a client application, the API networking layout is the most important part of the project. Without an API, the application cannot work 😅

Expected

The API implementation can be improved by:

• Creating a request manager/service where Axios is defined, and options are configured. Use this manager./service in the components/pages.
• Use an ENV variable to configure the API URL
• Use Axios interceptors to implement requests logging, error handling, etc. so that this logic is performed on every request.

💡You might want to look into either react-query or Vercel's SWR to abstract further API queries in client applications.

I agreed with that, I should separate the api and the application section and use manager./service to get options like you said. thank you for the review I will improve as your expected in a couple of days.