API Data in Paragon Component Example

[brian-smith-tcril]

Summary

This PR combines the work done in #4 and #5 to display course information from the API in a Paragon Carousel component.

The most notable change on the API side is the addition of transformResponse to the query

frontend-app-workshop-example/src/example/data/coursesApiService.js

Lines 15 to 20 in 72dc367

	transformResponse: (response) => response.results.map(entry => ({
	title: entry.name,
	description: entry.short_description,
	imageUrl: entry.media.image.large,
	imageAltText: 'API does not return alt text for images',
	})),

The most notable change on the Paragon Component side is passing carouselData in as a prop on ExampleCarousel.

Testing

To play around with this functionality, you can make courses in Studio (http://localhost:18010/, default username edx@example.com, default password edx)

In the "Schedule & Details" section

You can update the "Course Short Description"

as well as the "Course Card Image"

Then when you run the MFE locally, you should see your course in the Carousel!

[brian-smith-tcril]

There are plenty of other API endpoints and Paragon Components to play around with!