Тестовое задание – React

Ваша команда занимается разработкой интернет-магазина, и в этом задании вам предстоит доработать страницу каталога

Задачи

1. Добавить интерактивность элементам

Верстка состоит из всех возможных вариаций элементов, теперь нужно добавить логику их отображения.

• В карточках товаров по умолчанию показывать кнопку "Add to cart"
• При клике на нее заменять ее на бейдж "Added" и кнопку удаления из корзины
• Сделать открытие/закрытие поповера корзины по клику на кнопку корзины
• Показывать "The cart is empty" по умолчанию

Там, где отображаются несколько взаимоисключающих элементов сразу, добавлены комментарии для удобства

2. Подключить API для списка товаров

Товары заданы локальной переменной, и этого было достаточно при верстке, но сейчас необходимо настроить получение данных с сервера

Используйте метод /products тестового Fake Store API для получения списка товаров

Для упрощения задачи типизации в директории src/types создан тип Product, который соответствует формату товара, получаемого с сервера

3. Добавить логику добавления/удаления товаров

На странице есть три связанных сущности:

• карточка товара с кнопками добавления/удаления товаров
• индикатор количества товаров в корзине (в шапке на кнопке корзины)
• поповер с добавленными в корзину товарами

Нужно связать их логикой :)

При добавлении каждого товара:

• Счетчик на кнопке корзины в шапке увеличивать на 1
• Отображать в поповере корзины список всех добавленных в товаров

При удалении товара (как из каталога, так и из корзины):

• Счетчик на кнопке корзины уменьшить на 1 или скрыть, если корзина стала пуста
• Отображать в поповере корзины список оставшихся в корзине товаров или текст «The cart is empty», если корзина стала пуста

3*. Добавить сохранение корзины при обновлении страницы