justking / stellar-burgers

Проектная работа по курсу "Основы React"

Stellar Burger

Описание

Проектная работа 15 когорты yandex practicum.
Опубликованная бургерная netlify, gh-pages

yarn start

Запуск приложения в режиме разработчика
Откройте http://localhost:3000 в браузере.

yarn cy-test

e2e тестирование - требует запущенное локально приложения

yarn build

Сборка приложения

yarn test

Тестирование

stellar-burgers's Issues

Проверять ответ от сервера на `ok`

Любой ответ от сервера нужно проверять на ok и вызывать ошибку, если ответ не ok. Таким образом, в catch Вы будете ловить и ошибки сервера, и ошибки невалидных данных.

.then(res => {
                if (res.ok) {
                    return res.json();
                }
                return Promise.reject(`Ошибка ${res.status}`);
            })

Originally posted by @gennady-bars in #1 (comment)

Убрать абсолютное позиционирование

position: 'absolute' не должно быть в проекте. Только в одном месте он используется: для крестика в попапе. Больше ничего нельзя позиционировать в абсолюте. Это делает верстку деревянной, Ею невозможно будет нормально управлять потом

Originally posted by @gennady-bars in #1 (comment)

Убрать инлайн-стили

Инлайн-стилей style={{не должно быть в проекте, если они не меняются динамически в коде компонента. Все стили описываются в модульных .module.css файлах, а в коде компонентов используются модульные css-стили.

Originally posted by @gennady-bars in #1 (comment)

Переименовать HOC use-modal

с глагола use называются кастомные хуки реакта (а они не могут быть HOC). Для HOC нужно называть функции с with

тут будет withModal

Originally posted by @gennady-bars in #1 (comment)

Переделать на useRef и scrollIntoView

Можно лучше

Лучше без поиска в document все делать в реакте

document.querySelector не разрешено использовать в Реакте. Он специально был придуман, чтобы ничего не искать в DOM напрямую, так как это долгая операция с точки зрения движка браузера.

При кликах на табы Булки, Соусы, Начинки можно сделать логику плавного скролла до секции. Это можно сделать с помощью хука useRef и методом scrollIntoView. Нужно установить для 3х секций 3 useRef и следить за изменением табов при кликах на них через функцию клика. Как меняется таб, то запускается scrollIntoView со значением behavior: "smooth"
Подробнее про useRef тут https://ru.reactjs.org/docs/hooks-reference.html#useref
Подробнее про scrollIntoView тут https://developer.mozilla.org/ru/docs/Web/API/Element/scrollIntoView

Originally posted by @gennady-bars in #1 (comment)

Убрать принудительное скрытие модального окна

И не нужно принудительно прятать переполнение блока тут. Это не нужно как раз для модальных окон

Портал создается специально, чтобы убрать верстку из блока с { overflow: 'hidden' }

Originally posted by @gennady-bars in #1 (comment)

Исправить позиционирование модального окна

чтобы попапы были всегда ровно посередине экрана, нужно просто указать в css следующие данные:

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

Это точно по центру располагает любой блок

И оверлей тоже

Originally posted by @gennady-bars in #1 (comment)