Задание 6: вариант решения

Итак, это было последнее практическое управжнение курса. Давайте я поделюсь своим вариантом решения.

Вы можете увидеть изменения в коде открыв пулл-реквест на Гитхабе.

На первом этапе я добавил функцию fetchRestaurantReviews в файле lib/api.ts:

export async function fetchRestaurantReviews(
  restaurantId: string,
): Promise<ReviewResponse[]> {
  const response = await fetch(
    `http://localhost:3002/restaurants/${restaurantId}/reviews`,
  );
  return response.json();
}
typescript

Затем я создал тип Ratings для описания нашей абстракции и создал функцию getRestaurantRatings, которая как и в случае с ресторанами, получает данные из разных источников и формирует ответ с интересующей нас структурой.

export async function getRestaurantRatings(id: string): Promise<Ratings> {
  const restaurant = await fetchRestaurant(id);
  const reviews = await fetchRestaurantReviews(id);
  const { attributes } = restaurant;

  const initialReviews = restaurant.relationships.reviews;
  return {
    rating: attributes.rating,
    numRatings: attributes.numRatings,
    reviews: [...initialReviews, ...reviews].map((review) => ({
      id: review.id,
      rating: review.rating,
      comment: review.comment,
      date: review.date,
      userName: review.user.name,
    })),
  };
}
typescript

Далее добавил использование этой функции в компоненты RatingAndReviewsSummary и Reviews, которые мы создавали на первом этапе.

Обратите внимание что здесь совсем не важна визуальная составляющая. Я хочу чтобы вы сфокусировались на самой идее добавления нового слоя абстракции над обращением к API.

После того как мы сделали это наш код стал более чистым, увеличилась его надежность и возможность менять что-то при развитии проекта.