Month 8/step 2

[olegnyunkov]

No description provided.

[irinamozes]

Проект очень неплохой.

Методы обращения к серверу имеют нужную структуру.

Все действия в проекте представлены как экшены, в том числе асинхронные.

Учитывается, что редьюсер должен быть чистой функцией, которая не может возвращать результат, зависящмий от неизвестных случайных величин.
Поэтому в редьюсере не формируется случайный уникальный идентификатор слоя.
Задача редьюсера - получить данные для изменения стейта, внести эти изменения в новый стейт и вернуть новый стейт, сохранив старый, чтобы React мог определить, нужно ему перерисовывать какие-либо компоненты, сравнив эти стейты.

Что нужно исправить.

1. В компоненте BurgerIngredients нужно при рендере списка ингредиентов методом map (в левой части главной страницы) использовать в качестве значения атрибута key идентификатор ингредиента _id. Сейчас при задании
   рандомного значения атрибута key (nanoid), происходит явно большее число перерисовок элементов списка, чем могло бы быть.
   Но, то, что Вы создаёте уникальный номер для каждого слоя бургера - это правильно.

2. Не совсем верно реализовано перемещение слоёв в бургере. У Вас перемещаемый и целевой слой меняются местами, а нужна сортировка слоёв, а не перемена их местами.
   Алгоритм сортировки слоёв в конструкторе должен быть такой: если пользователь хочет какой-то ингредиент поставить на место другого ингредиента, он должен перемещаемый ингредиент совместить с целевым ингредиентом и осуществить бросок. После этого, другие ингредиенты вместе с целевым смещаются вниз на один слой (если
   перемещаемый ингредиент двигался с низу), а перемещаемый ингредиент встаёт на место целевого ингредиента. Точно также ингредиенты смещаются вверх, если перемещаемый ингредиент был расположен сверху по отношению к целевому.

3. При перемещении слоёв в бургере (возможно, когда в бургере есть одинаковые ингредиенты) появляются сообщения dnd об ошибках в консоли (см. снимок).
   

4. При открытии окна с номером заказа появляется сообщения об ошибках в консоли (см. снимок).
   

Нужно устранить ошибки.

[olegnyunkov]

Ирина, спасибо за ревью.
По 3й ошибке столкнулся с проблемой, которую не смог решить. Нагуглил подобную,
react-dnd/react-dnd#236
но моих знаний пока не хватило разобраться. Что то связанное с быстрым рендерингом и его замедлением.
Ниже там ссылка на чей то пулреквест, в котором вышли из ситуации заменой hover на drop. Сделал пока так же.
Буду рад дальнейшей проверке и замечаниям)

[irinamozes]

Здравствуйте, Олег.

Сейчас, при работе Вашего проекта, ошибки в консоли у меня не выдавались - ни ошибки dnd, ни ошибки при открытии окна с номером заказа.

Но, чтобы проект работал совсем стабильно (возможно это решит и проблему, о которой говорилось в сообщении dnd от предыдущей проверки),

нужно исправить:

1. Функция nanoid() не должна выполняться при рендере списка слоёв бургра методом map.
   Уникальный случайный номер, созданный nanoid(), должен присваиваться новому слою в бургере, но при рендере и сортировке слоёв в бургере этот номер уже у конкретного слоя должен быть постоянным. Сейчас nanoid() выполняется для каждого слоя при каждом перемещении какого-либо слоя, чего не должно быть (извините, не сообразила при предыдущей проверке).
   Поэтому, уникальный номер нового слоя должен формироваться с помощью nanoid() в обработчике события перетаскивания ингредиента из окна ингредиентов в бургер, и затем становиться постоянным идентификатором этого слоя, подобно идентификатору _id ингредиента.
   То есть, если обозначить уникальный идентификатор слоя бургера как uniqId, то вместо Вашего кода для элемента списка в методе map компоненты BurgerConstructor, должно быть:

<BurgerConstructorFilling
  key={uniqId}
  filling={filling}
  fill={fill}
  id={uniqId}
  index={index}
/>

Исправьте это замечание, пожалуйста.

[irinamozes]

Сейчас сортировка слоёв в бургере визуально стала работать более чётко.

Но, давайте до конца приведём преобразование проекта к образцовому, хотя понимаю, что мы неожиданно задержались на одном вопросе, и для студента это не очень приятно. Но, компенсация - новые знания.

Что нужно исправить.

1. Как я писала при прошлой проверке: "уникальный номер нового слоя должен формироваться с помощью nanoid() в обработчике события перетаскивания ингредиента из окна ингредиентов в бургер". То есть, этот номер должен формироваться не в редьюсере (хотела об этом напомнить Вам в предыдущем ревью, но подумала, что Вам об этом говорили).
   Редьюсер должен быть чистой функцией, которая не может возвращать результат, зависящий от неизвестных случайных величин.
   Чистая функция может работать только со значениями своих параметров, и возвращать во внешнюю область объекты (state), сформированные только с помощью поступивших в неё значений параметров.
   Поэтому в редьюсере нельзя формировать случайный уникальный идентификатор слоя бургера. Этот уникальный идентификатор должен поступать в редьюсер в payload экшена.
   Задача редьюсера - получить данные для изменения стейта, внести эти изменения в новый стейт и вернуть новый стейт, сохранив старый, чтобы React мог определить, нужно ему перерисовывать какие - либо компоненты, сравнив эти стейты.
   Поэтому формировать с помощью nanoid уникальный идентификатор нового слоя нужно в функции drop(item), которая
   посылает экшен добавления ингредиента (dispatch(addConstructorItem(item))) , в компоненте BurgerConstructor.

[olegnyunkov]

Ирина, спасибо за ревью, кажется я наконец то понял принцип работы с id. )

[irinamozes]

Проект стал отличным!

Только нужно обязательно инструкцию const uId = nanoid() внести в функцию drop(item), чтобы уникальный идентификатор вычислялся только при добавлении ингредиента в бургер, а не каждый раз при перерисовке компоненты BurgerConstructor.
То есть функцию drop(item) нужно записать в виде:

drop(item) {
  const uId = nanoid()
  dispatch(addConstructorItem(item, uId));
}

См. снимок редактора VScode с копией Вашего проекта:

Задание принимается.

Желаю дальнейших успехов в учёбе и удачи!