Проект космической бургерной

Описание проекта:

• React SPA проект по созданию космической бургерной.
• Для UI-компонентов используется библиотека @ya.praktikum/react-developer-burger-ui-components.
• Для стилизации компонентов использовать CSS-модули.

Функционал проекта:

Ингредиенты бургера (левая колонка - BurgerIngredients):

• Получить список доступных ингрединтов можно, обратившись к API: https://norma.nomoreparties.space/api/ingredients

Констурктор бургера (правая колонка - BurgerConstructor):

• В отрендеренных данных может быть только один ингредиент с типом bun. Перетаскивать и удалять булки нельзя.
• Рендерить данные с типом bun потребуется дважды, с соответствующим упоминание: «верх» и «низ».
• Для расчётов итоговой стоимости потребуется цена каждой из этих булок.
• Стоимость бургера высчитывается динамически в зависимости от тех ингредиентов, которые находятся в конструкторе.

Модальные окна:

• После успешного оформления заказа открывается модальное окно с номером заказа
• Модальный окна могут закрываться нажатием на крестик, оверлей или на клавишу “Esc”

Оформление заказа:

• При нажатии на кнопку «Оформить заказ» отправляется запрос к API на следующий эндпоинт: POST https://norma.nomoreparties.space/api/orders
• При оформлении заказа обязательно должна быть добавлена булка
• В теле запроса нужно передать _id всех ингредиентов, которые находятся в компоненте BurgerConstructor

Реализация перетаскивания ингредиентов

• Пользователь может добавить ингредиент из BurgerIngredients в компонент BurgerConstructor.
• При успешном перетаскивании у ингредиента в BurgerConstructor увеличивается счётчик. Перетаскивать ингредиент (не являющийся булкой) можно многократно.
• Пользователь может нажать на иконку удаления ингредиента в компоненте BurgerConstructor. Ингредиент удалится из BurgerConstructor, а счётчик количества ингредиентов в компоненте BurgerIngredients уменьшится на один.
• Если в BurgerConstructor добавлено несколько одинаковых ингредиентов — удаление одного ингредиента не влияет на остальные ингредиенты в BurgerConstructor с тем же _id.
• При успешном перетаскивании ингредиента с типом bun из BurgerIngredients в BurgerConstructor текущий элемент с типом bun должен удалиться и замениться на перетаскиваемый. Все эти действия также должны отразиться на счётчике количества ингредиентов в BurgerIngredients.

Навигация:

• По мере пользовательского скролла ингредиентов в компоненте BurgerIngredients выделяется активным тот переключатель, заголовок которого в самом контейнере ближе всего к верхней левой границе контейнера компонента BurgerIngredients

Вложенная сортировка ингредиентов в BurgerConstructor

• Пользователь может изменить порядок ингредиентов в BurgerConstructor перетаскиванием конкретного элемента (кроме bun);
• При попытке «бросить» ингредиент за пределы BurgerConstructor ничего происходить не должно — ингредиент возвращается в исходное положение.

Redux:

• Redux Devtools подключен к проекту

• Все действия, которые сопровождаются или зависят от API, должны проходить через усилители.

  В хранилище должны быть:

• список всех полученных ингредиентов,

• список всех ингредиентов в текущем конструкторе бургера,

• объект созданного заказа.

  Экшены и редьюсеры

• Получение списка ингредиентов от API. Используется в компоненте BurgerIngredients.

• Получение списка ингредиентов для конструктора бургера. Используется в компоненте BurgerConstructor.

• Получение и обновление номера заказа в модальном окне OrderDetails.

Авторизация:

• С сервера на запросы авторизации и регистрации к эндпоинтам auth/login и auth/register приходят accessToken и refreshToken.
• Первый токен используется в запросах к эндпоинту auth/user для получения и обновления данных пользователя. Срок жизни токена — 20 минут.
• Второй токен — refreshToken — сохраняется в localStorage или в куки. Токен используется для выхода из системы и для получения нового accessToken, если последний перестал подходить и просрочился.

Роутинг:

• / - главная страница, конструктор бургеров.
• /login - только для неавторизированных - страница авторизации. Клик на «Зарегистрироваться» направляет пользователя на маршрут /register. Клик на «Восстановить пароль» направляет пользователя на маршрут /forgot-password.
• /feed — страница ленты заказов. Доступен всем пользователям.
• /feed/:id — страница заказа в ленте. Доступен всем пользователям. Когда пользователь вручную нажимает на конкретный заказ, у него происходит переход на динамический маршрут :id, но при этом появляется только модальное окно с информацией о заказе или ингредиенте. Если же пользователь попадает на маршрут иным способом, например, напрямую переходит на маршрут конкретного заказа или обновляет страницу, то просто открывается отдельная страница.
• Если страница не найдена, отображается 404

WebSockets

• Экран «Лента заказов» обновляется в режиме реального времени и отображает статусы выполненных заказов. Чтобы подключиться к бэкенду для получения всех заказов, используйте URL norma.nomoreparties.space/orders/all
• Когда пользователи начнут создавать заказы, в уже активное сокет-соединение будет приходить не только новый добавленный заказ, но и весь список уже существующих заказов. Задача — актуализировать всю ленту заказов при каждом обновлении списка заказов на сервере.
• Код необходимо организировать в концепции React-Redux.

Типизация

• Типизация всех компонентов и утилитарных функций
• Типизация хранилища

Авторизация

В данном тестовом страницы регистрации нет. Однако проверить функциональность, связанную с авторизацией необходимо. Для этого вам нужно через Postman, либо через любую другую программу для работы с API создать пользователя, отправив POST запрос к эндпоинту https://norma.nomoreparties.space/api/auth/register. Пример тела запроса:

{
  "email": "test-data@yandex.ru",
  "password": "password",
  "name": "Username"
}