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.entities.bun);
+ const mains = useSelector((store: RootState) => store.ingredients.entities.main);
+ const sauces = useSelector((store: RootState) => store.ingredients.entities.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 69%
rename from react-burger/src/components/orders-details/orders-details.tsx
rename to src/components/orders-details/orders-details.tsx
index c4a6788..73e1681 100644
--- a/react-burger/src/components/orders-details/orders-details.tsx
+++ b/src/components/orders-details/orders-details.tsx
@@ -3,11 +3,11 @@ 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..12ce342
--- /dev/null
+++ b/src/services/actions/constructor-action.ts
@@ -0,0 +1,40 @@
+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";
+import { orderActions } from "../reducers/order-reducer";
+import { BASE_URL } from "../reducers/types";
+
+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 = (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) => {
+ 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..5455518
--- /dev/null
+++ b/src/services/actions/ingredients-actions.ts
@@ -0,0 +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 = () => 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());
+ }
+}
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..c0b9090
--- /dev/null
+++ b/src/services/get-ingredients/get-ingredients.ts
@@ -0,0 +1,25 @@
+import { BASE_URL, PostOrderRequest } from "../reducers/types";
+import { IngredientsResp } from "./get-ingredients-types";
+import { PostOrderResponse } from "../reducers/types";
+
+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 (request: PostOrderRequest): Promise => {
+ const resp = await fetch(`${BASE_URL}/orders`, {
+ 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..8fba520
--- /dev/null
+++ b/src/services/reducers/constructor-reducer.ts
@@ -0,0 +1,55 @@
+import { createSlice } from "@reduxjs/toolkit";
+import { ActionState, Burger } from './types';
+
+const initial = { elements: [], bun: null, state: ActionState.INITIAL } 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..3f8d6da
--- /dev/null
+++ b/src/services/reducers/ingredients-reducer.ts
@@ -0,0 +1,48 @@
+import { createSlice } from '@reduxjs/toolkit'
+import BurgerIngredients from '../../components/burger-ingredients/burger-ingredients';
+import { ActionState, BurgerComponents, BurgerData } from './types';
+import { Ingredients } from './types';
+
+const initial: BurgerData = {
+ entities: {
+ bun: [],
+ main: [],
+ sauce: []
+ } as BurgerComponents,
+ state: ActionState.INITIAL,
+}
+
+const { actions, reducer } = createSlice({
+ name: 'INGREDIENTS',
+ initialState: initial,
+ reducers: {
+ 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,
+ }
+ },
+ },
+})
+
+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/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
new file mode 100644
index 0000000..0b5f8d7
--- /dev/null
+++ b/src/services/reducers/store.ts
@@ -0,0 +1,23 @@
+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,
+ }),
+ 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..75949aa
--- /dev/null
+++ b/src/services/reducers/types.ts
@@ -0,0 +1,63 @@
+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 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[];
+}
+
+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 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
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
{ 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(