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

В источнике данных data.json массив заказов с полями:

• id – номер заказа
• orderItems – массив продуктов в заказе:
  • productName – название товара
  • price – цена единицы товара
  • count – количество товаров в заказе
• fullName – ФИО покупателя
• email – email покупателя
• address - адрес доставки
• status – состояние заказа: new (Новый) | ready (Оплачен) | shipping (Доставляется) | shipped (Доставлен) | canceled (Отменен)

backend

Задача

На nodejs + express реализовать API, которое использует в качестве источника данных данные о заказах из (data.json) и может:

1. Вернуть список заказов.

   GET /api/orders

2. Может принять параметры сортировки sortBy (id/fullName/email/status/sum - сумма заказов, рассчитывается как сумма стоимости всех продуктов в заказе = SUM(price * count)) и sortDirection (asc - по-возрастанию или desc - по-убыванию) и вернуть отсортированный список заказов (список можно отсортировать только по одному полю за один раз).

   GET /api/orders?sortBy={}sortDirection={}

3. Может принимать параметр поиска по строке query и вернуть все заказы, в полях id, fullName, address или email которых содержится текст, переданный в параметре query (например, показать все заказы пользователя с email = "test@yandex.ru") или если в одном из названий товаров (productName) заказа содержится текст из query (например, показать только заказы с товаром "фотокнига").

   GET /api/orders?query={}

4. Может принимать параметр фильтрации status

   status может принимать значения new|ready|shipping|shipped|canceled

   Возвращает все заказы в указанном статусе.

   GET /api/orders?status={}

5. API должен уметь обрабатывать запросы сразу со всеми возможными параметрами.

   GET /api/orders?status={}&query={}&sortBy={}sortDirection={}

Frontend

Задача

С помощью React и стилей Bootstrap 4 реализовать получение и отображение данных (из /api/orders) в таблице с возможностью:

1. Сортировки по полям таблицы (ID, Статус, Имя, Email, Адрес, Сумма).
2. Фильтрации по статусам.
3. Поиска по заказам.

Возможный UI:

По кнопке "Сбросить фильтры" - сбрасываются фильтр по статусам и поиск.

BONUS:

• Показывать спиннер загрузки пока идет запрос данных из API ("Loading ..." или любой на ваш вкус).
• Сохранять состояние фильтров и восстанавливать после перезагрузки страницы (например, в local storage или альтернативный вариант).

На выходе

Для реализации задачи используй:

• nodejs + express на backend.
• react + стили bootstrap 4 на frontend.
• любой, удобный сборщик, например, parcel или webpack.