created a branch sprint-14

[SASMUS12]

No description provided.

[gennady-bars]

Здравствуйте. (Нужно развернуть общий комментарий ↓)

Работа проделана огромная

• Отличное использование хука useForm
• Отлично, что обработчик сабмита вешаете на форму, а не клик на кнопку.
• Отлично сделан ProtectedRoute

но есть некоторые недочеты:

• по заданию нужно сделать логику, при которой бы показывался попап с деталями ингредиента, если кликнуть по ингредиенту, но если скопировать ссылку на ингредиент при открытом попапе и вставить в окно браузера, то должна уже показываться страница с этими деталями.
• При входе в профиль ошибка кнопки https://disk.yandex.ru/i/E2NN9BRQYXn5bQ
• <> пустые теги нужны только тогда, когда нет общего тега (компонента), который оборачивает всю верстку

[gennady-bars]

Можно лучше

Если интересно, то можно создать универсальную функцию запроса request , которая будет содержать в себе уже базовый урл, проверку на ok и проверку на success, чтобы не дублировать их в каждом запросе.

// 1 раз объявляем базовый урл
export const BASE_URL = "https://norma.nomoreparties.space/api/";

// создаем функцию проверки ответа на `ok`
const checkResponse = (res) => {
  if (res.ok) {
    return res.json();
  }
  // не забываем выкидывать ошибку, чтобы она попала в `catch`
  return Promise.reject(`Ошибка ${res.status}`);
};

// создаем функцию проверки на `success`
const checkSuccess = (res) => {
  if (res && res.success) {
    return res;
  }
  // не забываем выкидывать ошибку, чтобы она попала в `catch`
  return Promise.reject(`Ответ не success: ${res}`);
};

// создаем универсальную фукнцию запроса с проверкой ответа и `success`
// В вызов приходит `endpoint`(часть урла, которая идет после базового) и опции
const request = (endpoint, options) => {
  // а также в ней базовый урл сразу прописывается, чтобы не дублировать в каждом запросе
  return fetch(`${BASE_URL}${endpoint}`, options)
    .then(checkResponse)
    .then(checkSuccess);
};

И теперь не нужно будет дублировать все это в каждом запросе. Нужно просто заменить в запросах все fetch на request, удалив лишние проверки и базовый урл. Все остальное останется без изменений

Код станет намного чище. Будет мелкий аналог axios

Пример запроса ингредиентов

const getIngredients =  () => request("ingredients");

В get-запросах даже не нужно указывать 2й параметр. Он получится undefined, что без проблем для fetch (который внутри).

[gennady-bars]

Отличное использование хука useForm

[gennady-bars]

Отлично сделан ProtectedRoute

[gennady-bars]

<> пустые теги нужны только тогда, когда нет общего тега (компонента), который оборачивает всю верстку

[gennady-bars]

Отлично сделана логика проверки, был ли пользователь на сайте, и показывать ли страницу с деталями, а не модально окно

Только теперь нужно это использовать, чтобы показывать модальное окно или страницу

[gennady-bars]

Отлично, что обработчик сабмита вешаете на форму, а не клик на кнопку. Обработка события submit еще срабатывает при нажатии на Enter, так как это встроенная логика сабмитов в браузере.