https://github.com/eegrishina/drone-pharmacy
Web application for medication delivery with order status updates and product availability based on server data.
https://github.com/eegrishina/drone-pharmacy
async-operation client-server error-handling fetch-api jest localstorage pagination react react-router
Last synced: 2 months ago
JSON representation
Web application for medication delivery with order status updates and product availability based on server data.
- Host: GitHub
- URL: https://github.com/eegrishina/drone-pharmacy
- Owner: eegrishina
- Created: 2024-05-22T15:05:25.000Z (about 2 years ago)
- Default Branch: develop
- Last Pushed: 2024-12-04T22:27:54.000Z (over 1 year ago)
- Last Synced: 2025-05-16T16:49:56.795Z (about 1 year ago)
- Topics: async-operation, client-server, error-handling, fetch-api, jest, localstorage, pagination, react, react-router
- Language: JavaScript
- Homepage:
- Size: 16.1 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Drone Pharmacy
### Демонстрация оформления заказа
## Описание
Веб-приложение по управлению заказами на доставку лекарств с помощью дронов, включающее динамическое обновление статусов заказов, управление корзиной и выбор товаров с учетом доступности на сервере.
**Серверная часть проекта** основана на готовом решении, предоставленном другим разработчиком в рамках его минипроекта. Для получения более подробной информации вы можете ознакомиться с документацией по [ссылке](https://gitlab.com/freeShlak/musalademo).
**Дизайн сайта** был разработан отдельным дизайнером, который создал макет и визуальное оформление проекта. Для разработки были выбраны только те страницы, где реализован функционал, связанный с сервером. Дополнительные детали можно найти в предоставленных материалах по [ссылке](https://www.figma.com/design/TWRdLedZGtCX8gdmmqAQSE/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
```
2. Установить зависимости:
```
npm install
```
3. Запустить проект:
```
npm start
```
## Планируемые доработки
- Реализация механизма повторной отправки запросов на сервер в случае его недоступности на странице заказов. На данный момент при запуске таймера для повторных запросов возникает проблема с дублированием данных из-за использования useCallback, что требует доработки.
- Расширение покрытия тестами React-компонентов.
## Обратная связь
Приветствуются критика и комментарии. Советы и предложения будут учтены в дальнейшей разработке.