API
We have defined some API settings for easier usages of backend APIs across multiple JSX files.
We decided to use Axios which is a promise-based HTTP client for node.js, and is a simple but effective way to resolve promises such as GET, POST and DELETE HTTP methods. All of the APIs require a valid session token to be attached in order for them to be used.
API.js
Snippet of the API settings
Snippet of common APIs
We have refactored out some common APIs (such as uploading and downloading API) to enhance reusability of code
Common Header Used
Since all of the backend API's requires the session token as a parameter to authenticate the CRUD operations on our PostgreSQL database, the commonHeader function adds the common Authorization Bearer token to the API settings.
Error Handling of API
To ensure robustness of our application, in case of an error response, it is caught by the APIs rather than by the user of the API. The caught error response is then returned back and processed by the user of the API.
components/Upload/UploadDataset.js
Taking UploadDataset as an example, which utilises the uploadDataset API, if the status code of the response isn't 200 (which means OK) then a warning popup would be displayed by setting the warning state setWarning(true), and showing the error details setPopUpText(res.data.detail) through a popup menu.
Read more about popups here
