Integrate 'Our Team' RESTful View Data into React Component

[Alina-Khmilevska]

We have a newly created RESTful API endpoint that provides data for 'Our Team' section, filtered by the city (e.g., Kyiv). This data needs to be fetched and displayed in the 'Our Team' block within our React application.

Objectives:

• Fetch data from the /upsa-api/team/kyiv endpoint.
• Display the data using a React component, ensuring it is properly formatted and styled.
• Ensure the component is dynamic and can handle data for different cities if needed in the future.
• Implement error handling for the API request.
• Optimize for loading performance and consider caching the data if appropriate.

Acceptance Criteria:

Data Fetching:

• The React component should make an API call to the specified endpoint.
• Data should be fetched on component mount.

Dynamic Display:

• Each team member's data (full name, picture, position, email, and phone) should be displayed.
• The component should be reusable and easily adaptable to other city filters.

Error Handling:

• Appropriate feedback should be provided to the user if the data fails to load.

Performance:

• The component should handle the loading state gracefully.
• Consider implementing caching if the data does not change frequently.

Styling:

Use Flowbite or similar libraries to ensure the UI is consistent with the design system. Ensure the display is responsive and accessible.

[Alina-Khmilevska]

I've made significant progress on the 'Our Team' section feature:

• Data Fetching: The new RESTful API endpoint /upsa-api/team/kyiv has been successfully integrated. The React component is now fetching data on mount using this endpoint.

• Dynamic Display: I've ensured that each team member's information (full name, picture, position, email, and phone) is dynamically displayed through the component. It's built to be reusable and can be easily adapted to accommodate additional city filters without any major changes needed.

• Redux Refactoring: Alongside this, I've also refactored our Redux service to streamline the state management process for this feature, making the data fetching more efficient and maintaining a clean architecture.

• Error Handling: Error handling has been implemented so that any issues during the API request provide clear feedback to the user, maintaining a friendly user experience.