[Task 7] Api requests

[MZabolotnev]

• Main repository - https://github.com/MastersAcademy/fe-react-2024
• Design - https://www.figma.com/file/mRAOMdJiAsD8fHSVnYwUl9/React-web-page
• Branch name - task/07-api

Task Description: Implement Product Page with API Integration

Re-work a product page that fetches data from an API.
Swagger link : https://ma-backend-api.mocintra.com/docs#
The following requirements must be met:

1. Data Fetching:

   • Use either fetch or axios to request data from the API.

2. Pagination:

   • Implement pagination using query parameters.

3. Search Functionality:

   • Implement a search feature for product titles using query parameters.
   • The search should be triggered by a search button.

4. Category Filtering:

   • Implement category filtering using query parameters.
   • When the category or search term changes, the page should reset to the first page.

5. Loading Indicator:

   • Display a spinner or a loading message while awaiting each API request.

6. Empty Response Handling:

   • If the API returns an empty array (or an error occurs) for the given search conditions, display a message saying "No products" instead of leaving the screen blank.

Additional Task (Optional):

• Mobile View:

  • Hide pagination on mobile view and implement infinite scroll. This can be done manually or using a library of your choice.

• Error Notification:

  • Implement user notifications for errors. Preferably use axios interceptors. You can use component libraries for toastr notifications.

Acceptance Criteria for 1

• Mentor is added to PR
• AC copied to PR description
• Link to deployed version is added to PR
• ProductPage fetches data from the API using either fetch or axios
• Pagination is implemented using query parameters
• Search functionality is implemented using query parameters, with the search triggered by a search button
• Category filtering is implemented using query parameters, resetting the page to the first page on change
• A loading spinner or message is displayed while awaiting API requests
• If the API response is an empty array or an error occurs, a "No products" message is displayed instead of a blank screen

Acceptance Criteria for 1*

• Pagination is hidden on mobile view
• Infinite scroll is implemented for mobile view, either manually or using a library
• Error notifications are implemented using axios interceptors, with component libraries for toastr notifications