Необходимо создать небольшое приложение, состоящее из двух страниц: Home и History. Реализация "постраничной" бесконечной загрузки данных и их последующее форматирование.

Требования:

• Приложение организуем в директории frontend
• TypeScript
• React без использования классовых компонентов
• React hooks
• React router
• Redux
• Redux-Saga
• Адаптивная верстка
• Отсутствие css фреймворков (Tailwind, Bootstrap, и т.д.)
• Отсутствие styled компонентов
• Ширина контента 970px
• Желательно максимально попасть по макету (Да, он картинкой)

В корне два файла: desktop.jpg и mobile.jpg (<768px).

Вверху страницы добавить любое меню для перехода между страницами.

Никаких требований нет. Нужна просто для организации роутинга. Можно забить любым кастомным контентом на ваш вкус.

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

При загрузке страницы загружаем список всех эвентов. Метод events. Один эвент одна строка.

Изучите расположение данных в таблице на макете. Строки необходимо группировать по аппоинтментам и отсортировать по дате. Эвенты у которых есть appointmentId необходимо расположить после эвента с name Appointment и с этим Id (см. строку с details 1-1 with Provider).

Эвенты без appointmentId располагаются просто по дате в общей истории.

Было

Стало

Так же визуально происходит группировка по имени эвента (name) и дате. Значит между строками не будет бордера. Если имя эвента одинаковое, а даты разные - это разные группы, бордер есть.

Реализовать infinite scroll. По мере скроллинга нужно подгружать детальные данные для events отдаваемые бэком в методе resources. На момент загрузки отображаем какой-нибудь индикатор загрузки.

Отображение колонки Details ограничьте тремя строками.

Ресурсы могут иметь или не иметь values. Если values > 1 отобразить через запятую.

При выходе со страницы истории загруженные данные в сторе должны быть очищены.

Ожидается таблица структурно похожая на макет. Данные для макета использованы практически те же что и в тестовых данных которыми вы будете оперировать.

Старт тестового бэкенда:

cd ./backend
npm/yarn install
node index.js

Методы:

Получение списка эвентов.

POST: http://localhost:5010/events

Получение данных по ресурсам. В параметрах нужно передать ids со списком id ресурсов.

POST: http://localhost:5010/resources