sprint-2/step-2 by massimoteplovsky · Pull Request #4 · massimoteplovsky/react-burger

massimoteplovsky · 2021-12-04T11:54:19Z

No description provided.

ghost

добрый день, отличная работа

все работает как ожидается
круто что используется redux toolkit и методология ducks для описания хранилища
реализовано переключение навигации ингредиентов

но нужно немного исправить

все необходимые поля должны быть помечены isRequired, тут же должно быть обязательно либо null либо ингредиент
если при запросе к апи произошла ошибка, необходимо сбрасывать хранилище к начальному состоянию, то есть orderNumber должен стать null а ingredientsList должен стать пустым массивом
хуки должны использовать только на верхнем уровне компонента и не могут быть обернуты в другие функции или условия

и можно сделать еще лучше

имеет смысл отказаться от этого hoc withModal, потому что
- для открытия модалки используется несколько флагов в сторе: modalType и order.orderNumber для модалки заказа
- при добавлении каждой новой модалки ее контент придется добавлять в этот hoc
лучше переложить request в utils потому что запросы не относятся к редаксу и хранению состояния
лучше назвать duck ingredient и селектор - current-ingredient и getCurrentIngredient соответственно. чтобы по названию было более понятно для чего они используются

работа может быть принята только после исправления всех критических замечаний помеченных нужно исправить

удачи

ghost · 2021-12-04T13:51:39Z

src/services/api.js

@@ -0,0 +1,18 @@
+export const ENDPOINT = 'https://norma.nomoreparties.space/api';
+
+const request = async (url, options = null) => {


круто что запросы к апи вынесены в отдельный модуль, но лучше переложить это в utils потому что запросы не относятся к редаксу и хранению состояния

ghost · 2021-12-04T13:55:56Z

src/services/ducks/app.js

+// Selectors
+export const getAppState = ({ app }) => app;
+
+export default appReducer;


круто что используется методология ducks для описания стора redux 👍

ghost · 2021-12-04T13:58:28Z

src/services/ducks/app.js

+    })
+    .addCase(openModal, (state, { payload }) => {
+      state.isModalOpen = true;
+      state.modalType = payload;


можно сделать лучше: лучше не хранить состояние модальных окон отдельно, потому что в приложении уже есть флаги по которым можно показывать их. для модалки заказа это orderNumber в редьюсере order. для модалки ингредиента это ingredient в редьюсере ingredient. в текущей реализации получается что для открытия каждой модалки имеются три разных флага в хранилище

ghost · 2021-12-04T14:05:24Z

src/components/bun-ingredient/bun-ingredient.jsx

+  ingredient: pt.oneOfType([
+    PropValidator.INGREDIENT.isRequired,
+    pt.oneOf([null]).isRequired,
+  ]),


нужно исправить: все необходимые поля должны быть помечены isRequired, тут же должно быть обязательно либо null либо ингредиент

Если везде поставить isRequired или только после oneOfType, то это не работает. Проблема вроде как распространенная и вообще это вроде баг. Если придет null в компонент, то будет ошибка "Warning: Failed prop type: The prop ingredient is marked as required in BunIngredient, but its value is null." , хотя стоит проверка на null. В моем же варианте при передаче любого другого типа будет ошибка "Warning: Failed prop type: Invalid prop ingredient supplied to BunIngredient."
facebook/prop-types#90 (comment)

да, посмотрел, действительно так. пусть остается как есть

ghost · 2021-12-04T14:06:49Z

src/services/ducks/burger-ingredients.js

+export const getBurgerIngredients = ({ burgerIngredients }) =>
+  burgerIngredients.burgerData;
+
+export const getTotalPrice = createSelector(


отлично что подсчет стоимости бургера вынесен в селекторы 👍 а не находится в редьюсере к примеру

ghost · 2021-12-04T14:14:30Z

src/services/ducks/ingredient.js

+});
+
+// Selectors
+export const getIngredient = ({ ingredient }) => ingredient;


можно сделать лучше: лучше назвать этот duck и селектор current-ingredient и getCurrentIngredient соответственно. чтобы по названию было более понятно для чего они используются

ghost · 2021-12-04T14:22:04Z

src/services/ducks/order.js

+      state.isLoading = false;
+    })
+    .addCase(sendOrder.rejected, (state) => {
+      state.isLoading = false;


нужно исправить: если при запросе к апи произошла ошибка, необходимо сбрасывать хранилище к начальному состоянию, то есть orderNumber должен стать null

ghost · 2021-12-04T14:22:28Z

src/services/ducks/ingredients.js

+      state.isLoading = false;
+    })
+    .addCase(fetchAllIngredients.rejected, (state) => {
+      state.isLoading = false;


нужно исправить: если при запросе к апи произошла ошибка, необходимо сбрасывать хранилище к начальному состоянию, то есть ingredientsList должен стать пустым массивом

ghost · 2021-12-04T14:25:40Z

src/components/ingredients-list-container/ingredients-list-container.jsx

+  const containerRef = useRef();
+  const ingredientsTitleRef = useMemo(() => {
+    return TAB_ITEMS.reduce((acc, { type }) => {
+      acc[type] = createRef(null);


нужно исправить: хуки должны использовать только на верхнем уровне компонента и не могут быть обернуты в другие функции или условия

CreateRef не хук. У меня стоит плагин валидации правил хуков в IDE и ошибок нет.

Здесь вообще можно получить ответ???

сорри за долгий ответ. я перепутал createRef и useRef. обычно правда createRef ипользуется в классах, а useRef в функциях. но поскольку в данной реализации есть мемоизация и createRef дергается единожды при mount, пусть остается как есть с createRef

ghost · 2021-12-04T14:50:27Z

src/components/hocs/with-modal.js

      switch (modalType) {
        case ModalType.ORDER:
-          return <OrderDetails orderNumber={orderNumber} />;
+          return <OrderDetails />;


можно сделать лучше: имеет смысл отказаться от этого hoc, потому что

для открытия модалки используется несколько флагов в сторе: modalType и order.orderNumber для модалки заказа

при добавлении каждой новой модалки ее контент придется добавлять в этот hoc

лучше использовать компонент Modal по месту, к примеру

const orderNumber = useSelector(getOrderNumber); const dispatch = useDispatch(); ... return ( ... {orderNumber && ( <Modal closeModal={() => dispatch(resetOrder)}> <OrderDetails number={orderNumber} /> </Modal> )} ... )

ghost

все круто, все недочеты исправлены, ваша работа принята 🥳

успехов в дальнейшем обучении

sprint-2/step-2

1ddd733

ghost reviewed Dec 4, 2021

View reviewed changes

sprint-2/step-2 refactoring

30e1b74

ghost approved these changes Dec 7, 2021

View reviewed changes

massimoteplovsky merged commit d21b6ad into main Dec 8, 2021

		@@ -0,0 +1,18 @@
		export const ENDPOINT = 'https://norma.nomoreparties.space/api';

		const request = async (url, options = null) => {

Conversation

massimoteplovsky commented Dec 4, 2021

Uh oh!

ghost left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

massimoteplovsky Dec 4, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

massimoteplovsky Dec 4, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ghost left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

massimoteplovsky Dec 4, 2021 •

edited

Loading

massimoteplovsky Dec 4, 2021 •

edited

Loading