onModalOpen(props.name, props.item)}>
- 
-
- {isModalOpen && (
- { props.price }
{ props.name }
-
+ { bun && (
+
+
+
+ {elements.map((item, index) => {
+ return
+ })}
+
+
+ { bun && (
+
+
+ {isModalOpen && (
+ { calcOrderSum() }
@@ -20,7 +23,7 @@ export function ConstructorTopElement(props: ElementProps) {
)
}
-export function ConstructorBottomElement(props: ElementProps) {
+export function ConstructorBottomElement(props) {
return(
@@ -37,18 +40,42 @@ export function ConstructorBottomElement(props: ElementProps) {
)
}
-export function ConstructorMidElement(props: ElementProps) {
+export function ConstructorMidElement({ index, isLocked, item }) {
+ const dispatch = useDispatch();
+ const ref = useRef();
+
+ const [{ isDragging}, dragBetween] = useDrag(() => ({
+ type: 'cardBetween',
+ item: { index },
+ collect: (monitor) => ({
+ isDragging: monitor.isDragging(),
+ })
+ }))
+
+ const [{ isOverBetween }, dropBetween] = useDrop(() => ({
+ accept: 'cardBetween',
+ collect: (monitor) => ({
+ isOverBetween: monitor.isOver(),
+ }),
+ drop: (curItem) => {
+ dispatch(swapElements(curItem.index, index));
+ }
+ }))
+
return(
-
+
{
+ dispatch(removeIngredients(index));
+ }}
/>
- {!props.isLocked ? ();
+ const [current, setCurrent] = React.useState('bun')
+
+ const bunTabRef = useRef(null);
+ const sauceTabRef = useRef(null);
+ const mainTabRef = useRef(null);
+ const menuRef = useRef(null);
+
+ useEffect(() => {
+ dispatch(initialiseIngredients());
+ }, []);
+
+ const menuAbsoluteHeightHalf = useMemo(() => {
+ return menuRef.current?.offsetHeight ?? 0;
+ }, [menuRef.current?.offsetHeight]);
+
+ useEffect(() => {
+ const menu = menuRef.current;
+ if (menu) {
+ const onScroll = () => {
+ const bunTab = bunTabRef.current;
+ const sauceTab = sauceTabRef.current;
+ const mainTab = mainTabRef.current;
+
+ if (bunTab && sauceTab && mainTab) {
+ const bunTabTop = bunTab.getBoundingClientRect().top;
+ const sauceTabTop = sauceTab.getBoundingClientRect().top;
+ const mainTabTop = mainTab.getBoundingClientRect().top;
+
+ if (bunTabTop >= 0 && bunTabTop <= menuAbsoluteHeightHalf) {
+ setCurrent('bun');
+ } else if (sauceTabTop >= 0 && sauceTabTop <= menuAbsoluteHeightHalf) {
+ setCurrent('sauce');
+ } else if (mainTabTop >= 0 && mainTabTop <= menuAbsoluteHeightHalf) {
+ setCurrent('main');
+ }
+ }
+ };
+
+ menu.addEventListener('scroll', onScroll);
+ return () => {
+ menu.removeEventListener('scroll', onScroll);
+ };
+ }
+ }, [menuRef.current?.offsetHeight]);
+
+ const scrollToTab = useCallback((current: string) => {
+ if (current === 'bun') {
+ bunTabRef.current?.scrollIntoView({ behavior: 'smooth' });
+ } else if (current === 'sauce') {
+ sauceTabRef.current?.scrollIntoView({ behavior: 'smooth' });
+ } else if (current === 'main') {
+ mainTabRef.current?.scrollIntoView({ behavior: 'smooth' });
+ }
+ }, [current]);
+
+ const handleTabClick = useCallback((current: string) => {
+ setCurrent(current);
+ scrollToTab(current);
+ }, [current]);
+
+ // const { buns, mains, sauces } = useSelector((store: RootState) => ({
+ // buns: store.ingredients.bun,
+ // mains: store.ingredients.main,
+ // sauces: store.ingredients.sauce
+ // }))
+
+ const buns = useSelector((store: RootState) => store.ingredients.bun);
+ const mains = useSelector((store: RootState) => store.ingredients.main);
+ const sauces = useSelector((store: RootState) => store.ingredients.sauce);
+
+ return(
+ ();
+
+ const dispatch = useDispatch();
+ const modalElement = useSelector((state: RootState) => state.modalWindow)
+
+ const [{isDragging}, drag] = useDrag(() => ({
+ type: 'card',
+ item: props,
+ collect: (monitor) => ({
+ isDragging: monitor.isDragging(),
+ })
+ }))
+
+ const { elements, bun } = useSelector((state: RootState) => state.elementConstructor)
+
+ return(
+ <>
+ dispatch(closeModal()) } header={"Детали ингредиента"}>
+ dispatch(closeModal()) }/>
+
+ )}
+
+ )
+}
\ No newline at end of file
diff --git a/react-burger/src/components/burger-ingredients/ingredient-table/card/data.ts b/src/components/burger-ingredients/ingredient-table/card/data.ts
similarity index 100%
rename from react-burger/src/components/burger-ingredients/ingredient-table/card/data.ts
rename to src/components/burger-ingredients/ingredient-table/card/data.ts
diff --git a/react-burger/src/components/burger-ingredients/ingredient-table/ingredient-item-name.ts b/src/components/burger-ingredients/ingredient-table/ingredient-item-name.ts
similarity index 79%
rename from react-burger/src/components/burger-ingredients/ingredient-table/ingredient-item-name.ts
rename to src/components/burger-ingredients/ingredient-table/ingredient-item-name.ts
index 545e19f..f5e2d00 100644
--- a/react-burger/src/components/burger-ingredients/ingredient-table/ingredient-item-name.ts
+++ b/src/components/burger-ingredients/ingredient-table/ingredient-item-name.ts
@@ -3,4 +3,5 @@ import { Ingredients } from "../../../services/get-ingredients/get-ingredients-t
export interface IngredientsItemType {
name: string;
items: Array;
+ innerRef: React.RefObject;
}
\ No newline at end of file
diff --git a/react-burger/src/components/burger-ingredients/ingredient-table/ingredient-table.module.css b/src/components/burger-ingredients/ingredient-table/ingredient-table.module.css
similarity index 100%
rename from react-burger/src/components/burger-ingredients/ingredient-table/ingredient-table.module.css
rename to src/components/burger-ingredients/ingredient-table/ingredient-table.module.css
diff --git a/react-burger/src/components/burger-ingredients/ingredient-table/ingredient-table.tsx b/src/components/burger-ingredients/ingredient-table/ingredient-table.tsx
similarity index 77%
rename from react-burger/src/components/burger-ingredients/ingredient-table/ingredient-table.tsx
rename to src/components/burger-ingredients/ingredient-table/ingredient-table.tsx
index 27e7bdf..9f65d00 100644
--- a/react-burger/src/components/burger-ingredients/ingredient-table/ingredient-table.tsx
+++ b/src/components/burger-ingredients/ingredient-table/ingredient-table.tsx
@@ -8,11 +8,11 @@ import Modal from '../../modal/modal';
export default function IngredientsTable(props: IngredientsItemType) {
return(
-
+
+ )
+
+}
\ No newline at end of file
diff --git a/react-burger/src/components/burger-ingredients/ingredient-table/card/card.module.css b/src/components/burger-ingredients/ingredient-table/card/card.module.css
similarity index 55%
rename from react-burger/src/components/burger-ingredients/ingredient-table/card/card.module.css
rename to src/components/burger-ingredients/ingredient-table/card/card.module.css
index c522e17..207f286 100644
--- a/react-burger/src/components/burger-ingredients/ingredient-table/card/card.module.css
+++ b/src/components/burger-ingredients/ingredient-table/card/card.module.css
@@ -23,4 +23,18 @@
.img {
width: 80%;
+}
+
+.amount {
+ border-radius: 50%;
+ background-color: #4C4CFF;
+ width: 35px;
+ height: 35px;
+ margin-left: auto;
+ margin-right: 20px;
+ margin-top: auto;
+ margin-bottom: -35px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
\ No newline at end of file
diff --git a/src/components/burger-ingredients/ingredient-table/card/card.tsx b/src/components/burger-ingredients/ingredient-table/card/card.tsx
new file mode 100644
index 0000000..2907460
--- /dev/null
+++ b/src/components/burger-ingredients/ingredient-table/card/card.tsx
@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import { CurrencyIcon } from '@ya.praktikum/react-developer-burger-ui-components'
+import { cardData } from './data';
+import styles from './card.module.css';
+import Modal from '../../../modal/modal';
+import IngredientDetails from '../../../ingredient-details/ingredient-details';
+import { Ingredients } from '../../../../services/get-ingredients/get-ingredients-types';
+import { useSelector } from 'react-redux';
+import { RootState } from '../../../../services/reducers/store';
+import { useDispatch } from 'react-redux';
+import { AppDispatch } from '../../../../services/reducers/store';
+import { closeModal, openModal } from '../../../../services/actions/modal-action';
+import {useDrag} from "react-dnd";
+
+function countElements (elems: Ingredients[], bun: Ingredients | null, _id: string) {
+ let ans = 0;
+ for (let i = 0; i < elems.length; i++) {
+ if (elems[i]._id === _id) {
+ ans++;
+ }
+ }
+ if (bun && bun._id === _id) {
+ ans++;
+ }
+ return ans;
+}
+
+export default function IngredientCard(props: Ingredients) {
+ const [isModalOpen, setIsModalOpen] = useState(false);
+ const [modalData, setModalData] = useStateСоберите бургер
+ +
+
+ Булка
+
+
+ Соус
+
+
+ Основа
+
+
+
+
+
+
+
+ dispatch(openModal(props))}>
+ {countElements(elements, bun, props._id) !== 0 && (
+
+
+ {modalElement.isOpened && (
+ {countElements(elements, bun, props._id)}
+ )}
+ { props.price }
{ props.name }
+
+
diff --git a/react-burger/src/components/ingredient-details/ingredient-deatail-types.ts b/src/components/ingredient-details/ingredient-deatail-types.ts
similarity index 87%
rename from react-burger/src/components/ingredient-details/ingredient-deatail-types.ts
rename to src/components/ingredient-details/ingredient-deatail-types.ts
index adbe303..55fb3c8 100644
--- a/react-burger/src/components/ingredient-details/ingredient-deatail-types.ts
+++ b/src/components/ingredient-details/ingredient-deatail-types.ts
@@ -1,6 +1,5 @@
import { Ingredients } from "../../services/get-ingredients/get-ingredients-types";
export interface IngredientDetailsType {
- item?: Ingredients;
onModalClose: () => void;
}
\ No newline at end of file
diff --git a/react-burger/src/components/ingredient-details/ingredient-details.module.css b/src/components/ingredient-details/ingredient-details.module.css
similarity index 100%
rename from react-burger/src/components/ingredient-details/ingredient-details.module.css
rename to src/components/ingredient-details/ingredient-details.module.css
diff --git a/react-burger/src/components/ingredient-details/ingredient-details.tsx b/src/components/ingredient-details/ingredient-details.tsx
similarity index 66%
rename from react-burger/src/components/ingredient-details/ingredient-details.tsx
rename to src/components/ingredient-details/ingredient-details.tsx
index 847e179..7a36fec 100644
--- a/react-burger/src/components/ingredient-details/ingredient-details.tsx
+++ b/src/components/ingredient-details/ingredient-details.tsx
@@ -2,8 +2,15 @@ import Modal from '../modal/modal';
import { IngredientDetailsType } from './ingredient-deatail-types';
import styles from "./ingredient-details.module.css"
import IngredientSubstance from './ingredient-substance/ingredient-substance';
+import { useDispatch } from 'react-redux';
+import { AppDispatch } from '../../services/reducers/store';
+import { useSelector } from 'react-redux';
+import { RootState } from '../../services/reducers/store';
+
+export default function IngredientDetails(onModalClose: IngredientDetailsType) {
+ const dispatch = useDispatch();
+ const item = useSelector((state: RootState) => state.modalWindow.modalData)
-export default function IngredientDetails({item, onModalClose}: IngredientDetailsType) {
return(
<>
diff --git a/react-burger/src/components/ingredient-details/ingredient-substance/ingredient-substance.module.css b/src/components/ingredient-details/ingredient-substance/ingredient-substance.module.css
similarity index 100%
rename from react-burger/src/components/ingredient-details/ingredient-substance/ingredient-substance.module.css
rename to src/components/ingredient-details/ingredient-substance/ingredient-substance.module.css
diff --git a/react-burger/src/components/ingredient-details/ingredient-substance/ingredient-substance.tsx b/src/components/ingredient-details/ingredient-substance/ingredient-substance.tsx
similarity index 100%
rename from react-burger/src/components/ingredient-details/ingredient-substance/ingredient-substance.tsx
rename to src/components/ingredient-details/ingredient-substance/ingredient-substance.tsx
diff --git a/react-burger/src/components/ingredient-details/ingredient-substance/ingredient-substancse-types.ts b/src/components/ingredient-details/ingredient-substance/ingredient-substancse-types.ts
similarity index 100%
rename from react-burger/src/components/ingredient-details/ingredient-substance/ingredient-substancse-types.ts
rename to src/components/ingredient-details/ingredient-substance/ingredient-substancse-types.ts
diff --git a/react-burger/src/components/main/main.module.css b/src/components/main/main.module.css
similarity index 100%
rename from react-burger/src/components/main/main.module.css
rename to src/components/main/main.module.css
diff --git a/src/components/main/main.tsx b/src/components/main/main.tsx
new file mode 100644
index 0000000..a8c8afb
--- /dev/null
+++ b/src/components/main/main.tsx
@@ -0,0 +1,17 @@
+import React, { useState, useEffect, ReactNode } from 'react';
+import BurgerIngredients from '../burger-ingredients/burger-ingredients';
+import { BurgerConstructor } from '../burger-constructor/burger-constructor';
+import styles from "./main.module.css";
+import {DndProvider} from "react-dnd";
+import {HTML5Backend} from "react-dnd-html5-backend";
+
+export default function MainContent() {
+ return (
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/react-burger/src/components/modal-overlay/modal-overlay.module.css b/src/components/modal-overlay/modal-overlay.module.css
similarity index 100%
rename from react-burger/src/components/modal-overlay/modal-overlay.module.css
rename to src/components/modal-overlay/modal-overlay.module.css
diff --git a/react-burger/src/components/modal-overlay/modal-overlay.tsx b/src/components/modal-overlay/modal-overlay.tsx
similarity index 100%
rename from react-burger/src/components/modal-overlay/modal-overlay.tsx
rename to src/components/modal-overlay/modal-overlay.tsx
diff --git a/react-burger/src/components/modal/modal-type.ts b/src/components/modal/modal-type.ts
similarity index 100%
rename from react-burger/src/components/modal/modal-type.ts
rename to src/components/modal/modal-type.ts
diff --git a/react-burger/src/components/modal/modal.module.css b/src/components/modal/modal.module.css
similarity index 100%
rename from react-burger/src/components/modal/modal.module.css
rename to src/components/modal/modal.module.css
diff --git a/react-burger/src/components/modal/modal.tsx b/src/components/modal/modal.tsx
similarity index 100%
rename from react-burger/src/components/modal/modal.tsx
rename to src/components/modal/modal.tsx
diff --git a/react-burger/src/components/orders-details/order-details-types.ts b/src/components/orders-details/order-details-types.ts
similarity index 88%
rename from react-burger/src/components/orders-details/order-details-types.ts
rename to src/components/orders-details/order-details-types.ts
index 28f77e8..0d82bc3 100644
--- a/react-burger/src/components/orders-details/order-details-types.ts
+++ b/src/components/orders-details/order-details-types.ts
@@ -2,4 +2,5 @@ import { Ingredients } from "../../services/get-ingredients/get-ingredients-type
export interface OrderDetailsType {
onModalClose: () => void;
+ orderId: string;
}
\ No newline at end of file
diff --git a/react-burger/src/components/orders-details/order-details.module.css b/src/components/orders-details/order-details.module.css
similarity index 100%
rename from react-burger/src/components/orders-details/order-details.module.css
rename to src/components/orders-details/order-details.module.css
diff --git a/react-burger/src/components/orders-details/orders-details.tsx b/src/components/orders-details/orders-details.tsx
similarity index 82%
rename from react-burger/src/components/orders-details/orders-details.tsx
rename to src/components/orders-details/orders-details.tsx
index c4a6788..e6d790b 100644
--- a/react-burger/src/components/orders-details/orders-details.tsx
+++ b/src/components/orders-details/orders-details.tsx
@@ -3,10 +3,10 @@ import { OrderDetailsType } from './order-details-types';
import image from "../../images/done.png"
import styles from "./order-details.module.css"
-export default function OrderDetails({onModalClose}: OrderDetailsType) {
+export default function OrderDetails({onModalClose, orderId}: OrderDetailsType) {
return(
-
-
+
);
diff --git a/react-burger/src/react-app-env.d.ts b/src/react-app-env.d.ts
similarity index 100%
rename from react-burger/src/react-app-env.d.ts
rename to src/react-app-env.d.ts
diff --git a/react-burger/src/reportWebVitals.ts b/src/reportWebVitals.ts
similarity index 100%
rename from react-burger/src/reportWebVitals.ts
rename to src/reportWebVitals.ts
diff --git a/src/services/actions/constructor-action.ts b/src/services/actions/constructor-action.ts
new file mode 100644
index 0000000..e893fe9
--- /dev/null
+++ b/src/services/actions/constructor-action.ts
@@ -0,0 +1,31 @@
+import { Ingredients, PostOrderRequest, PostOrderResponse } from "../reducers/types";
+import { constructorActions } from "../reducers/constructor-reducer";
+import { AppDispatch } from "../reducers/store";
+import { postIngredients } from "../get-ingredients/get-ingredients";
+
+export const addIngredient = (ingredient: Ingredients) => (dispatch: AppDispatch) => {
+ dispatch(constructorActions.addIngredients(ingredient));
+}
+
+export const changeBun = (ingredient: Ingredients) => (dispatch: AppDispatch) => {
+ dispatch(constructorActions.changeBun(ingredient));
+}
+
+export const removeIngredients = (index: number) => (dispatch: AppDispatch) => {
+ dispatch(constructorActions.removeIngredients(index));
+}
+
+export const swapElements = (index1: number, index2: number) => (dispatch: AppDispatch) => {
+ dispatch(constructorActions.swapElements({firstId: index1, secondId: index2}));
+}
+
+export const sendIngredients = async (request: PostOrderRequest): Promise => {
+ const url = 'https://norma.nomoreparties.space/api/orders';
+
+ const res = await postIngredients(url, request);
+ return res;
+}
+
+export const clearConstructor = () => (dispatch: AppDispatch) => {
+ dispatch(constructorActions.clearConstructor());
+}
diff --git a/src/services/actions/ingredients-actions.ts b/src/services/actions/ingredients-actions.ts
new file mode 100644
index 0000000..0e0e286
--- /dev/null
+++ b/src/services/actions/ingredients-actions.ts
@@ -0,0 +1,14 @@
+import { getIngredients } from "../get-ingredients/get-ingredients";
+import { ingredientsActions } from "../reducers/ingredients-reducer";
+import { AppDispatch } from "../reducers/store";
+
+export const initialiseIngredients = () => {
+ const url = "https://norma.nomoreparties.space/api/ingredients";
+
+ return async (dispatch: AppDispatch) => {
+ const ingredients = await getIngredients(url);
+ if (ingredients.success) {
+ dispatch(ingredientsActions.setIngredients(ingredients.data));
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/services/actions/modal-action.ts b/src/services/actions/modal-action.ts
new file mode 100644
index 0000000..94a1b83
--- /dev/null
+++ b/src/services/actions/modal-action.ts
@@ -0,0 +1,11 @@
+import { Ingredients } from "../reducers/types";
+import { modalActions } from "../reducers/modal-reducer";
+import { AppDispatch } from "../reducers/store";
+
+export const openModal = (ingredient: Ingredients) => (dispatch: AppDispatch) => {
+ dispatch(modalActions.setModal(ingredient));
+}
+
+export const closeModal = () => (dispatch: AppDispatch) => {
+ dispatch(modalActions.closeModal());
+}
\ No newline at end of file
diff --git a/react-burger/src/services/get-ingredients/get-ingredients-types.ts b/src/services/get-ingredients/get-ingredients-types.ts
similarity index 94%
rename from react-burger/src/services/get-ingredients/get-ingredients-types.ts
rename to src/services/get-ingredients/get-ingredients-types.ts
index b3f23ad..e5a7adb 100644
--- a/react-burger/src/services/get-ingredients/get-ingredients-types.ts
+++ b/src/services/get-ingredients/get-ingredients-types.ts
@@ -7,7 +7,7 @@ export interface Ingredients {
image_large: string;
image_mobile: string;
name: string;
- price: string;
+ price: number;
proteins: number;
type: string;
}
diff --git a/src/services/get-ingredients/get-ingredients.ts b/src/services/get-ingredients/get-ingredients.ts
new file mode 100644
index 0000000..11a82b0
--- /dev/null
+++ b/src/services/get-ingredients/get-ingredients.ts
@@ -0,0 +1,25 @@
+import { PostOrderRequest } from "../reducers/types";
+import { IngredientsResp } from "./get-ingredients-types";
+import { PostOrderResponse } from "../reducers/types";
+
+export const getIngredients = async(url: string): Promise => {
+ const resp = await fetch(url);
+ if (resp.ok) {
+ return resp.json();
+ }
+ return Promise.reject(`Ошибка ${resp.status}`);
+}
+
+export const postIngredients = async (url: string, request: PostOrderRequest): Promise => {
+ const resp = await fetch(url, {
+ method: 'POST',
+ headers: {'Content-Type': 'application/json'},
+ body: JSON.stringify(request),
+ })
+
+ if (resp.ok) {
+ return resp.json();
+ }
+
+ return Promise.reject(`Ошибка ${resp.status}`);
+}
\ No newline at end of file
diff --git a/src/services/reducers/constructor-reducer.ts b/src/services/reducers/constructor-reducer.ts
new file mode 100644
index 0000000..f740094
--- /dev/null
+++ b/src/services/reducers/constructor-reducer.ts
@@ -0,0 +1,55 @@
+import { createSlice } from "@reduxjs/toolkit";
+import { Burger } from './types';
+
+const initial = { elements: [], bun: null } as Burger;
+
+const { actions, reducer } = createSlice({
+ name: 'ELEMENT_CONSTRUCTOR',
+ initialState: initial,
+ reducers: {
+ addIngredients(state, action) {
+ return {
+ ...state,
+ elements: state.elements.concat(action.payload)
+ }
+ },
+ removeIngredients(state, action) {
+ const newElements = state.elements.slice(0, action.payload).concat(state.elements.slice(action.payload + 1));
+ return {
+ ...state,
+ elements: newElements,
+ }
+ },
+ changeBun(state, action) {
+ return {
+ ...state,
+ bun: action.payload,
+ }
+ },
+ swapElements(state, action) {
+ let index1 = action.payload.firstId;
+ let index2 = action.payload.secondId;
+ const newElements = state.elements.slice();
+ if (index1 > index2) {
+ let tmp = index1;
+ index1 = index2;
+ index2 = tmp;
+ }
+ let tmp = newElements[index2];
+ for (let i = index2; i > index1; i--) {
+ newElements[i] = newElements[i - 1];
+ }
+ newElements[index1] = tmp;
+ return {
+ ...state,
+ elements: newElements,
+ }
+ },
+ clearConstructor(state) {
+ return initial;
+ },
+ },
+})
+
+export const constructorActions = actions;
+export default reducer
\ No newline at end of file
diff --git a/src/services/reducers/ingredients-reducer.ts b/src/services/reducers/ingredients-reducer.ts
new file mode 100644
index 0000000..25be249
--- /dev/null
+++ b/src/services/reducers/ingredients-reducer.ts
@@ -0,0 +1,23 @@
+import { createSlice } from '@reduxjs/toolkit'
+import BurgerIngredients from '../../components/burger-ingredients/burger-ingredients';
+import { BurgerComponents } from './types';
+import { Ingredients } from './types';
+
+const initial: BurgerComponents = {bun: [], main: [], sauce: []}
+
+const { actions, reducer } = createSlice({
+ name: 'INGREDIENTS',
+ initialState: initial,
+ reducers: {
+ setIngredients: (state, action) => {
+ return action.payload.reduce((acc: BurgerComponents, ingredient: Ingredients) => {
+ const ingredientType = ingredient.type as keyof BurgerComponents;
+ acc[ingredientType].push(ingredient);
+ return acc;
+ }, { bun: [], main: [], sauce: [] });
+ },
+ },
+})
+
+export const ingredientsActions = actions;
+export default reducer
\ No newline at end of file
diff --git a/src/services/reducers/modal-reducer.ts b/src/services/reducers/modal-reducer.ts
new file mode 100644
index 0000000..55e5427
--- /dev/null
+++ b/src/services/reducers/modal-reducer.ts
@@ -0,0 +1,28 @@
+import { createSlice } from '@reduxjs/toolkit'
+import { Ingredients } from './types';
+
+const sampleIngredient: Ingredients = {"_id": "", "name": "", "type": "", "proteins": 0, "fat": 0, "carbohydrates": 0, "calories": 0, "price": 0, "image": "", "image_mobile": "", "image_large": "",};
+
+const initial = { isOpened: false, modalData : sampleIngredient }
+
+const { actions, reducer } = createSlice({
+ name: 'MODAL_WINDOW',
+ initialState: initial,
+ reducers: {
+ setModal(state, action) {
+ return {
+ modalData: action.payload,
+ isOpened: true
+ }
+ },
+ closeModal(state) {
+ return {
+ ...state,
+ isOpened: false
+ }
+ },
+ },
+})
+
+export const modalActions = actions;
+export default reducer
\ No newline at end of file
diff --git a/src/services/reducers/store.ts b/src/services/reducers/store.ts
new file mode 100644
index 0000000..8b73618
--- /dev/null
+++ b/src/services/reducers/store.ts
@@ -0,0 +1,21 @@
+import { configureStore } from '@reduxjs/toolkit'
+
+import ingredientsReducer from './ingredients-reducer'
+import constructorReducer from './constructor-reducer'
+import modalReducer from './modal-reducer'
+
+const store = configureStore({
+ reducer: {
+ ingredients: ingredientsReducer,
+ elementConstructor: constructorReducer,
+ modalWindow: modalReducer,
+ },
+ middleware: (getDefaultMiddleware) => getDefaultMiddleware({
+ serializableCheck: false,
+ }),
+ devTools: process.env.NODE_ENV !== 'production',
+})
+
+export default store
+export type RootState = ReturnType
+export type AppDispatch = typeof store.dispatch
\ No newline at end of file
diff --git a/src/services/reducers/types.ts b/src/services/reducers/types.ts
new file mode 100644
index 0000000..c2580c4
--- /dev/null
+++ b/src/services/reducers/types.ts
@@ -0,0 +1,43 @@
+import { BooleanLiteral, StringLiteral } from "typescript";
+
+export interface Ingredients {
+ _id: string;
+ calories: number;
+ carbohydrates: number;
+ fat: number;
+ image: string;
+ image_large: string;
+ image_mobile: string;
+ name: string;
+ price: number;
+ proteins: number;
+ type: string;
+}
+
+export interface IngredientsResp {
+ success: boolean;
+ data: Ingredients[];
+}
+
+export interface PostOrderRequest {
+ ingredients: string[];
+}
+
+export interface PostOrderResponse {
+ name: string;
+ success: boolean;
+ order: {
+ number: number;
+ };
+}
+
+export interface BurgerComponents {
+ bun: Ingredients[];
+ main: Ingredients[];
+ sauce: Ingredients[];
+}
+
+export interface Burger {
+ elements: Ingredients[];
+ bun: Ingredients | null;
+}
\ No newline at end of file
diff --git a/react-burger/src/setupTests.ts b/src/setupTests.ts
similarity index 100%
rename from react-burger/src/setupTests.ts
rename to src/setupTests.ts
diff --git a/react-burger/tsconfig.json b/tsconfig.json
similarity index 100%
rename from react-burger/tsconfig.json
rename to tsconfig.json
From 152c0dcd257ee1d6de11c12a7f46a6f34afc8595 Mon Sep 17 00:00:00 2001
From: ArsPro1323 <131661233+ArsPro1323@users.noreply.github.com>
Date: Sun, 7 Jan 2024 17:30:03 +0300
Subject: [PATCH 2/3] add id's to dnd
---
package-lock.json | 19 ++++++++++++++++---
package.json | 1 +
.../burger-constructor/burger-constructor.jsx | 4 +++-
3 files changed, 20 insertions(+), 4 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 360562f..f9ebf46 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,6 +26,7 @@
"redux": "^5.0.1",
"redux-thunk": "^3.1.0",
"typescript": "^4.9.5",
+ "uuid": "^9.0.1",
"web-vitals": "^2.1.4"
}
},
@@ -15593,6 +15594,14 @@
"websocket-driver": "^0.7.4"
}
},
+ "node_modules/sockjs/node_modules/uuid": {
+ "version": "8.3.2",
+ "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+ "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+ "bin": {
+ "uuid": "dist/bin/uuid"
+ }
+ },
"node_modules/source-list-map": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -16859,9 +16868,13 @@
}
},
"node_modules/uuid": {
- "version": "8.3.2",
- "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
- "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+ "version": "9.0.1",
+ "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+ "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+ "funding": [
+ "https://github.com/sponsors/broofa",
+ "https://github.com/sponsors/ctavan"
+ ],
"bin": {
"uuid": "dist/bin/uuid"
}
diff --git a/package.json b/package.json
index 3933cf0..240dd5e 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
"redux": "^5.0.1",
"redux-thunk": "^3.1.0",
"typescript": "^4.9.5",
+ "uuid": "^9.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
diff --git a/src/components/burger-constructor/burger-constructor.jsx b/src/components/burger-constructor/burger-constructor.jsx
index 60a48ef..d173f13 100644
--- a/src/components/burger-constructor/burger-constructor.jsx
+++ b/src/components/burger-constructor/burger-constructor.jsx
@@ -67,6 +67,8 @@ export function BurgerConstructor() {
setIsModalOpen(true);
}, [elements, bun])
+ const { v4: uuidv4 } = require('uuid');
+
return(
{ props.name }
- { props.items.map((item) => (
-
034536
+{orderId}
идендификатор заказа
Ваш заказ начали готовить
diff --git a/react-burger/src/images/done.png b/src/images/done.png similarity index 100% rename from react-burger/src/images/done.png rename to src/images/done.png diff --git a/react-burger/src/index.css b/src/index.css similarity index 100% rename from react-burger/src/index.css rename to src/index.css diff --git a/react-burger/src/index.tsx b/src/index.tsx similarity index 68% rename from react-burger/src/index.tsx rename to src/index.tsx index 3c7a027..5b8256b 100644 --- a/react-burger/src/index.tsx +++ b/src/index.tsx @@ -2,6 +2,8 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import reportWebVitals from './reportWebVitals'; import App from './components/App/app'; +import { Provider } from 'react-redux'; +import store from './services/reducers/store'; const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement @@ -9,7 +11,9 @@ const root = ReactDOM.createRoot( root.render(
@@ -75,7 +77,7 @@ export function BurgerConstructor() {
)}
();
+ const {elements, bun} = useSelector((state: RootState) => state.elementConstructor)
const [{ isOver }, drop] = useDrop(() => ({
accept: 'card',
@@ -60,16 +60,18 @@ export function BurgerConstructor() {
const makeOrder = useCallback(async () => {
const baseElements = elements.map(elem => elem._id);
- const orderDetails = await sendIngredients({ ingredients: (bun ? baseElements.concat(bun._id) : baseElements)})
+ const ingredients = bun ? baseElements.concat(bun._id) : baseElements;
+ await dispatch(sendIngredients({ingredients}));
dispatch(clearConstructor());
-
- orderDetails && setOrder(orderDetails.order.number.toString())
setIsModalOpen(true);
}, [elements, bun])
const { v4: uuidv4 } = require('uuid');
+ const order = useSelector((state: RootState) => state.order.orderId);
+
return(
+ // @ts-ignore
{elements.map((item, index) => {
- return
+ return
})}
From bcb80a8b5e932b87c01e6e0f7ac8369b83232a4d Mon Sep 17 00:00:00 2001
From: ArsPro1323 <131661233+ArsPro1323@users.noreply.github.com>
Date: Sun, 7 Jan 2024 18:34:00 +0300
Subject: [PATCH 3/3] review
---
...constructor.jsx => burger-constructor.tsx} | 18 +++++-----
.../burger-ingredients/burger-ingredients.tsx | 6 ++--
.../orders-details/orders-details.tsx | 2 +-
src/services/actions/constructor-action.ts | 19 ++++++++---
src/services/actions/ingredients-actions.ts | 17 ++++++----
.../get-ingredients/get-ingredients.ts | 10 +++---
src/services/reducers/constructor-reducer.ts | 4 +--
src/services/reducers/ingredients-reducer.ts | 33 ++++++++++++++++---
src/services/reducers/order-reducer.ts | 32 ++++++++++++++++++
src/services/reducers/store.ts | 2 ++
src/services/reducers/types.ts | 20 +++++++++++
11 files changed, 129 insertions(+), 34 deletions(-)
rename src/components/burger-constructor/{burger-constructor.jsx => burger-constructor.tsx} (84%)
create mode 100644 src/services/reducers/order-reducer.ts
diff --git a/src/components/burger-constructor/burger-constructor.jsx b/src/components/burger-constructor/burger-constructor.tsx
similarity index 84%
rename from src/components/burger-constructor/burger-constructor.jsx
rename to src/components/burger-constructor/burger-constructor.tsx
index d173f13..9963381 100644
--- a/src/components/burger-constructor/burger-constructor.jsx
+++ b/src/components/burger-constructor/burger-constructor.tsx
@@ -12,10 +12,12 @@ import {
import { CurrencyIcon } from '@ya.praktikum/react-developer-burger-ui-components';
import { useDrop } from "react-dnd";
import { clearConstructor } from '../../services/actions/constructor-action';
+import { AppDispatch, RootState } from '../../services/reducers/store';
+import { Ingredients } from '../../services/get-ingredients/get-ingredients-types';
export function BurgerConstructor() {
const myRef = useRef();
- const handleAdding = (item, pos) => {
+ const handleAdding = (item: any, pos: any) => {
if (item && item.type === 'bun') {
dispatch(changeBun(item));
} else {
@@ -23,13 +25,11 @@ export function BurgerConstructor() {
}
}
- const [order, setOrder] = useState("");
-
const [isModalOpen, setIsModalOpen] = useState(false);
- const dispatch = useDispatch();
- const {elements, bun} = useSelector((state) => state.elementConstructor)
+ const dispatch = useDispatch
{ bun && (
diff --git a/src/components/burger-ingredients/burger-ingredients.tsx b/src/components/burger-ingredients/burger-ingredients.tsx
index 2ff0e3d..97d9e09 100644
--- a/src/components/burger-ingredients/burger-ingredients.tsx
+++ b/src/components/burger-ingredients/burger-ingredients.tsx
@@ -80,9 +80,9 @@ export default function BurgerIngredients() {
// sauces: store.ingredients.sauce
// }))
- const buns = useSelector((store: RootState) => store.ingredients.bun);
- const mains = useSelector((store: RootState) => store.ingredients.main);
- const sauces = useSelector((store: RootState) => store.ingredients.sauce);
+ const buns = useSelector((store: RootState) => store.ingredients.entities.bun);
+ const mains = useSelector((store: RootState) => store.ingredients.entities.main);
+ const sauces = useSelector((store: RootState) => store.ingredients.entities.sauce);
return(
diff --git a/src/components/orders-details/orders-details.tsx b/src/components/orders-details/orders-details.tsx
index e6d790b..73e1681 100644
--- a/src/components/orders-details/orders-details.tsx
+++ b/src/components/orders-details/orders-details.tsx
@@ -7,7 +7,7 @@ export default function OrderDetails({onModalClose, orderId}: OrderDetailsType)
return(
=> {
- const url = 'https://norma.nomoreparties.space/api/orders';
-
- const res = await postIngredients(url, request);
- return res;
+export const sendIngredients = (request: PostOrderRequest) => async (dispatch: AppDispatch) => {
+ dispatch(orderActions.setLoading());
+ try {
+ const res = await postIngredients(request);
+ if (res.success) {
+ dispatch(orderActions.setOrder(res.order.number.toString()));
+ } else {
+ dispatch(orderActions.setError());
+ }
+ } catch (err) {
+ dispatch(orderActions.setError());
+ }
}
export const clearConstructor = () => (dispatch: AppDispatch) => {
diff --git a/src/services/actions/ingredients-actions.ts b/src/services/actions/ingredients-actions.ts
index 0e0e286..5455518 100644
--- a/src/services/actions/ingredients-actions.ts
+++ b/src/services/actions/ingredients-actions.ts
@@ -1,14 +1,19 @@
+import { createAsyncThunk } from "@reduxjs/toolkit";
import { getIngredients } from "../get-ingredients/get-ingredients";
import { ingredientsActions } from "../reducers/ingredients-reducer";
import { AppDispatch } from "../reducers/store";
-export const initialiseIngredients = () => {
- const url = "https://norma.nomoreparties.space/api/ingredients";
-
- return async (dispatch: AppDispatch) => {
- const ingredients = await getIngredients(url);
+export const initialiseIngredients = () => async (dispatch: AppDispatch) => {
+ dispatch(ingredientsActions.setLoading());
+
+ try {
+ const ingredients = await getIngredients();
if (ingredients.success) {
dispatch(ingredientsActions.setIngredients(ingredients.data));
+ } else {
+ dispatch(ingredientsActions.setError());
}
+ } catch (error) {
+ dispatch(ingredientsActions.setError());
}
-}
\ No newline at end of file
+}
diff --git a/src/services/get-ingredients/get-ingredients.ts b/src/services/get-ingredients/get-ingredients.ts
index 11a82b0..c0b9090 100644
--- a/src/services/get-ingredients/get-ingredients.ts
+++ b/src/services/get-ingredients/get-ingredients.ts
@@ -1,17 +1,17 @@
-import { PostOrderRequest } from "../reducers/types";
+import { BASE_URL, PostOrderRequest } from "../reducers/types";
import { IngredientsResp } from "./get-ingredients-types";
import { PostOrderResponse } from "../reducers/types";
-export const getIngredients = async(url: string): Promise => {
- const resp = await fetch(url);
+export const getIngredients = async(): Promise => {
+ const resp = await fetch(`${BASE_URL}/ingredients`);
if (resp.ok) {
return resp.json();
}
return Promise.reject(`Ошибка ${resp.status}`);
}
-export const postIngredients = async (url: string, request: PostOrderRequest): Promise => {
- const resp = await fetch(url, {
+export const postIngredients = async (request: PostOrderRequest): Promise => {
+ const resp = await fetch(`${BASE_URL}/orders`, {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(request),
diff --git a/src/services/reducers/constructor-reducer.ts b/src/services/reducers/constructor-reducer.ts
index f740094..8fba520 100644
--- a/src/services/reducers/constructor-reducer.ts
+++ b/src/services/reducers/constructor-reducer.ts
@@ -1,7 +1,7 @@
import { createSlice } from "@reduxjs/toolkit";
-import { Burger } from './types';
+import { ActionState, Burger } from './types';
-const initial = { elements: [], bun: null } as Burger;
+const initial = { elements: [], bun: null, state: ActionState.INITIAL } as Burger;
const { actions, reducer } = createSlice({
name: 'ELEMENT_CONSTRUCTOR',
diff --git a/src/services/reducers/ingredients-reducer.ts b/src/services/reducers/ingredients-reducer.ts
index 25be249..3f8d6da 100644
--- a/src/services/reducers/ingredients-reducer.ts
+++ b/src/services/reducers/ingredients-reducer.ts
@@ -1,20 +1,45 @@
import { createSlice } from '@reduxjs/toolkit'
import BurgerIngredients from '../../components/burger-ingredients/burger-ingredients';
-import { BurgerComponents } from './types';
+import { ActionState, BurgerComponents, BurgerData } from './types';
import { Ingredients } from './types';
-const initial: BurgerComponents = {bun: [], main: [], sauce: []}
+const initial: BurgerData = {
+ entities: {
+ bun: [],
+ main: [],
+ sauce: []
+ } as BurgerComponents,
+ state: ActionState.INITIAL,
+}
const { actions, reducer } = createSlice({
name: 'INGREDIENTS',
initialState: initial,
reducers: {
- setIngredients: (state, action) => {
- return action.payload.reduce((acc: BurgerComponents, ingredient: Ingredients) => {
+ setLoading: (state) => {
+ return {
+ ...state,
+ state: ActionState.LOADING,
+ }
+ },
+ setError: (state) => {
+ return {
+ ...state,
+ state: ActionState.ERROR,
+ }
+ },
+ setIngredients: (state, action: { payload: Ingredients[] }) => {
+ const ingredients = action.payload.reduce((acc: BurgerComponents, ingredient: Ingredients) => {
const ingredientType = ingredient.type as keyof BurgerComponents;
acc[ingredientType].push(ingredient);
return acc;
}, { bun: [], main: [], sauce: [] });
+
+ return {
+ ...state,
+ entities: ingredients,
+ state: ActionState.SUCCESS,
+ }
},
},
})
diff --git a/src/services/reducers/order-reducer.ts b/src/services/reducers/order-reducer.ts
new file mode 100644
index 0000000..0d98d23
--- /dev/null
+++ b/src/services/reducers/order-reducer.ts
@@ -0,0 +1,32 @@
+import { createSlice } from '@reduxjs/toolkit'
+import { ActionState } from './types'
+
+const initial = { orderId : '', state: ActionState.INITIAL }
+
+const { actions, reducer } = createSlice({
+ name: 'ORDER',
+ initialState: initial,
+ reducers: {
+ setLoading: (state) => {
+ return {
+ ...state,
+ state: ActionState.LOADING,
+ }
+ },
+ setError: (state) => {
+ return {
+ ...state,
+ state: ActionState.ERROR,
+ }
+ },
+ setOrder: (state, action: { payload: string }) => {
+ return {
+ orderId: action.payload,
+ state: ActionState.SUCCESS,
+ }
+ }
+ },
+})
+
+export const orderActions = actions;
+export default reducer
\ No newline at end of file
diff --git a/src/services/reducers/store.ts b/src/services/reducers/store.ts
index 8b73618..0b5f8d7 100644
--- a/src/services/reducers/store.ts
+++ b/src/services/reducers/store.ts
@@ -3,12 +3,14 @@ import { configureStore } from '@reduxjs/toolkit'
import ingredientsReducer from './ingredients-reducer'
import constructorReducer from './constructor-reducer'
import modalReducer from './modal-reducer'
+import orderReducer from './order-reducer'
const store = configureStore({
reducer: {
ingredients: ingredientsReducer,
elementConstructor: constructorReducer,
modalWindow: modalReducer,
+ order: orderReducer,
},
middleware: (getDefaultMiddleware) => getDefaultMiddleware({
serializableCheck: false,
diff --git a/src/services/reducers/types.ts b/src/services/reducers/types.ts
index c2580c4..75949aa 100644
--- a/src/services/reducers/types.ts
+++ b/src/services/reducers/types.ts
@@ -14,6 +14,15 @@ export interface Ingredients {
type: string;
}
+export const BASE_URL = 'https://norma.nomoreparties.space/api';
+
+export enum ActionState {
+ INITIAL = '_INITIAL',
+ LOADING = '_LOADING',
+ ERROR = '_ERROR',
+ SUCCESS = '_SUCCESS'
+}
+
export interface IngredientsResp {
success: boolean;
data: Ingredients[];
@@ -37,7 +46,18 @@ export interface BurgerComponents {
sauce: Ingredients[];
}
+export interface BurgerData {
+ entities: BurgerComponents;
+ state: ActionState;
+}
+
export interface Burger {
elements: Ingredients[];
bun: Ingredients | null;
+ state: ActionState;
+}
+
+export interface OrderData {
+ orderId: string,
+ state: ActionState,
}
\ No newline at end of file
{orderId}
-идендификатор заказа
+Идентификатор заказа
Ваш заказ начали готовить
Дождитесь готовности на орбитальной станции
diff --git a/src/services/actions/constructor-action.ts b/src/services/actions/constructor-action.ts index e893fe9..12ce342 100644 --- a/src/services/actions/constructor-action.ts +++ b/src/services/actions/constructor-action.ts @@ -2,6 +2,8 @@ import { Ingredients, PostOrderRequest, PostOrderResponse } from "../reducers/ty import { constructorActions } from "../reducers/constructor-reducer"; import { AppDispatch } from "../reducers/store"; import { postIngredients } from "../get-ingredients/get-ingredients"; +import { orderActions } from "../reducers/order-reducer"; +import { BASE_URL } from "../reducers/types"; export const addIngredient = (ingredient: Ingredients) => (dispatch: AppDispatch) => { dispatch(constructorActions.addIngredients(ingredient)); @@ -19,11 +21,18 @@ export const swapElements = (index1: number, index2: number) => (dispatch: AppDi dispatch(constructorActions.swapElements({firstId: index1, secondId: index2})); } -export const sendIngredients = async (request: PostOrderRequest): Promise