Drone Pharmacy

Демонстрация оформления заказа

Описание

Веб-приложение по управлению заказами на доставку лекарств с помощью дронов, включающее динамическое обновление статусов заказов, управление корзиной и выбор товаров с учетом доступности на сервере.

Серверная часть проекта основана на готовом решении, предоставленном другим разработчиком в рамках его минипроекта. Для получения более подробной информации вы можете ознакомиться с документацией по ссылке.

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

Используемые технологии

• React — фреймворк для создания пользовательских интерфейсов
• Fetch API — взаимодействие с сервером
• LocalStorage — хранение данных о выбранных товарах
• React Router — навигация и управление маршрутизацией

Основные возможности

1. Сортировка товаров в каталоге

   • Реализована возможность сортировки товаров по различным критериям:
     • по алфавиту
     • по весу
     • по доступности — можно просмотреть все или только доступные товары
   • Сортировка помогает пользователям быстро находить нужные товары и улучшает удобство взаимодействия с каталогом.

2. Постраничное отображение данных

   • Разделение каталога и истории заказов на страницы.
   • Данные загружаются частями с сервера, что уменьшает объем передаваемых данных.
   • Догрузка данных осуществляется в зависимости от событий пользователя, отслеживаемых с помощью event listeners.

3. Управление корзиной

   • Актуальное состояние товаров
     Корзина отображает актуальную информацию о товарах, синхронизируя их состояние с сервером.

   • Получение данных о доступных дронах
     При загрузке корзины выполняется запрос к серверу для получения информации о доступных дронах, включая их статус, ID и максимальный перевозимый вес.

   • Рассчет максимальной вместимости
     Для доступного дрона рассчитывается максимальный вес товаров, который он может перевозить. Если текущий вес всех выбранных товаров превышает максимальный лимит доступного дрона, отображается кнопка Choose the best capacity.
     При активации кнопки функция автоматически определяет, какие товары можно отправить с учетом их веса и доступного места в дроне. Невместимые товары остаются в корзине невыбранными.

   • Интерактивность управления
     Пользователь может вручную изменять выбор товаров, даже после выполнения расчета вместимости. Все изменения отображаются мгновенно и фиксируются в local storage.

4. Проверка доступности сервера

   • Проверка подключения
     Реализованы попытки повторного подключения к серверу с интервалами и ограничением на количество попыток.

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

   • Перенаправление при недоступности
     Если сервер остается недоступным, пользователь перенаправляется на страницу ошибки.

5. Модальные окна

   • Отображение ошибки при проблемах с сетью или сервером.
   • Отображение информации о выбранном заказе в истории заказов.

6. Загрузка данных

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

7. Локальное хранилище

   • Хранение данных
     В local storage сохраняются данные корзины, список выбранных товаров и информация о доступном дроне для доставки, что позволяет поддерживать актуальное состояние при перезагрузке или смене страницы.

8. Тестирование функций с использованием Jest

   • Были написаны тесты для проверки корректности работы функций получения текущей и последующей дат при оформлении заказа.

Установка

1. Клонировать репозиторий:

   git clone <URL>  
   

2. Установить зависимости:

   npm install  
   

3. Запустить проект:

   npm start  
   

Планируемые доработки

• Реализация механизма повторной отправки запросов на сервер в случае его недоступности на странице заказов. На данный момент при запуске таймера для повторных запросов возникает проблема с дублированием данных из-за использования useCallback, что требует доработки.

• Расширение покрытия тестами React-компонентов.

Обратная связь

Приветствуются критика и комментарии. Советы и предложения будут учтены в дальнейшей разработке.