Resources

• Project Repo. Check out the restaurant-entities branch.
• Figma Spec

Exercise Instructions

1. Create the “fetch” function to fetch the data from the /reviews endpoint.
2. Create a model function (e.g. getRatings()) that will fetch the data from the necessary endpoints and will return a Ratings entity (see the TypeScript type below.)
3. Use the model function to render the data in the UI.

Ratings Entity Type

export type Ratings = {
  rating: number;
  numRatings: number;
  reviews: CustomerReview[];
};

Transcript

[00:02] In this exercise, we’re going to implement a model for our restaurant ratings entity. There are two places in the restaurant module where the ratings and reviews show up. One is at the top where we get a little summary, and then at the bottom we get the more complete information about all of the ratings and reviews.

[00:28] In the endpoint that we can call for getting the restaurant information, we get the data for the summary section. This is the restaurant endpoint. We get an array with three reviews, and we also get the rating and the number of ratings here. To power the other reviews, we have the reviews endpoint that we can call by attaching “/reviews”. We get a few more reviews in the same shape that we got them before.

[01:04] Now the exercise for you will be to create a model function that we can call to get the information for this section right here. This will include not just the list of reviews in the simplified format, the ones that we get from this endpoint, but also the number of ratings and the actual rating score that we got for this restaurant.

[01:29] You can use this type as a starting point. You will find the type also in the description of this video. I call this ratings, and we have the rating, which is the number between one and five, the number of ratings, and an array of reviews. With all of this information, we can render this section right here.

[01:57] There are three things that you have to do as part of this exercise. The first one is creating the fetch function to fetch data from the reviews endpoint. The second one will be to create your model function that you can call, like “get ratings” or “get restaurant ratings”, that will take our restaurant ID and give you back an object in this format, potentially aggregating from multiple endpoints. Finally, use that model function in the UI.

[02:24] So in the same way that we use the function to render information here in the header, you want to use that function to render some of this information in the ratings component that is at the bottom of this page.

[02:42] That is the exercise. You can use the restaurant entities branch. You will also find the name of the branch in the description as your starting point. I’ll see you in the next video where I’ll show you my solution for this exercise.