Month 8/step 2

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@reduxjs/toolkit": "^1.8.2",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.1.1",
     "@testing-library/user-event": "^13.5.0",
@@ -11,18 +12,27 @@
     "@types/react": "^17.0.37",
     "@types/react-dom": "^17.0.11",
     "@ya.praktikum/react-developer-burger-ui-components": "^1.13.1",
+    "immutability-helper": "^3.1.1",
+    "nanoid": "^4.0.0",
     "prop-types": "^15.8.1",
     "react": "^16.8.6",
+    "react-dnd": "^14.0.5",
+    "react-dnd-html5-backend": "^14.0.5",
     "react-dom": "^16.8.6",
-    "react-redux": "^8.0.1",
+    "react-hook-inview": "^4.5.0",
+    "react-redux": "^8.0.2",
     "react-scripts": "5.0.1",
     "redux": "^4.2.0",
+    "redux-thunk": "^2.4.1",
     "typescript": "^4.6.3",
+    "uuid": "^8.3.2",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
@@ -43,5 +53,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "devDependencies": {
+    "gh-pages": "^4.0.0"
+  },
+  "homepage": "./"
 }

src/components/app/app.jsx

@@ -1,66 +1,48 @@
-import React, { useEffect, useState } from 'react';
+import React, {useState} from 'react';
+import {useDispatch} from "react-redux";
+import {DndProvider} from "react-dnd";
+import {HTML5Backend} from "react-dnd-html5-backend";
+import Main from './app.module.css';
 import AppHeader from '../app-header/app-header';
 import BurgerIngredients from '../burger-ingredients/burger-ingredients';
 import BurgerConstructor from "../burger-constructor/burger-constructor";
-import Main from './app.module.css';
-import { getIngredients } from '../../utils/api';
-import { IngredientsContext } from '../../services/ingredients-context';
-
-const orderInitialState = {
-  "name": "",
-  "order": {
-    "number": ""
-  },
-  "success": false
-}
+import {removeDetails} from "../../services/actions/actions";
 
 const App = () => {
-  const [data, setData] = useState([]);
+  const dispatch = useDispatch();
   const [ingredientsIsOpened, setIngredientsIsOpened] = useState(false);
   const [orderIsOpened, setOrderIsOpened] = useState(false);
   const [modalOpened, setModalOpened] = useState(false)
-  const [modalInfo, setModalInfo] = useState({});
-  const [orderInfo, setOrderInfo] = useState(orderInitialState);
 
   const closeModal = () => {
     setIngredientsIsOpened(false)
     setOrderIsOpened(false)
+    dispatch(removeDetails())
   }
 
-  useEffect(() => {
-    getIngredients().then((res) => setData(res.data)).catch((res) => console.log(res))
-  }, [])
-
-
   return (
     <>
-      <IngredientsContext.Provider value={data}>
+      <DndProvider backend={HTML5Backend}>
         <AppHeader/>
         <div className={Main.main}>
           <BurgerIngredients
             setIngredientsIsOpened={setIngredientsIsOpened}
             ingredientsIsOpened={ingredientsIsOpened}
             closeModal={closeModal}
-            modalInfo={modalInfo}
-            setModalInfo={setModalInfo}
             modalOpened={modalOpened}
             setModalOpened={setModalOpened}
           />
           <BurgerConstructor
-            setIngredientsIsOpened={setIngredientsIsOpened}
             orderIsOpened={orderIsOpened}
             setOrderIsOpened={setOrderIsOpened}
-            setOrderInfo={setOrderInfo}
             closeModal={closeModal}
-            orderInfo={orderInfo}
             modalOpened={modalOpened}
             setModalOpened={setModalOpened}
           />
         </div>
-      </IngredientsContext.Provider>
+      </DndProvider>
     </>
   );
 }
 
-
 export default App;

src/components/burger-constructor/burger-constructor-bun.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from "prop-types";
+import {
+  ConstructorElement
+} from '@ya.praktikum/react-developer-burger-ui-components';
+
+const BurgerConstructorBun = (props) => {
+  const { text, bun, type } = props;
+
+  return (
+  <div  className="pl-8 mr-4 mb-4">
+      <ConstructorElement
+        type={type}
+        isLocked={true}
+        text={`${bun.name} ${text}`}
+        price={bun.price}
+        thumbnail={bun.image}
+      />
+    </div>
+  )
+};
+
+BurgerConstructorBun.propTypes = {
+  text: PropTypes.string.isRequired,
+  bun: PropTypes.object.isRequired,
+  type: PropTypes.string.isRequired
+};
+
+export default BurgerConstructorBun;

src/components/burger-constructor/burger-constructor-empty.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from "prop-types";
+import ConstructorElementEmpty from './burger-constructor.module.css';
+
+const BurgerConstructorEmpty = (props) => {
+  const { text } = props;
+
+  return (
+    <div
+      className={`${ConstructorElementEmpty.constructor__element_empty} pl-8 mr-4 mb-4 text text_type_main-default`}
+    >
+      {text}
+    </div>
+  );
+};
+
+BurgerConstructorEmpty.propTypes = {
+  text: PropTypes.string.isRequired
+};
+
+export default BurgerConstructorEmpty;

src/components/burger-constructor/burger-constructor-empty.module.css

@@ -0,0 +1,6 @@
+.constructor__elements_empty {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+    gap: 16px;
+}

src/components/burger-constructor/burger-constructor-filling.jsx

@@ -0,0 +1,93 @@
+import React, { useRef } from "react";
+import { useDispatch } from "react-redux";
+import { useDrag, useDrop } from "react-dnd";
+import PropTypes from "prop-types";
+import ConstructorFillingStyles from "./burger-constructor-filling.module.css";
+import {  
+  deleteConstructorItem,
+  moveConstructorItem,
+} from "../../services/actions/actions";
+import {  
+  ConstructorElement,  
+  DragIcon,
+} from "@ya.praktikum/react-developer-burger-ui-components";
+
+const BurgerConstructorFilling = (props) => {
+  const { fill, index, id } = props;
+
+  const dispatch = useDispatch();
+  const ref = useRef(null);
+
+  //хук для сортировки элекентов внутри конструктора
+  const [{handlerId}, dropRef] = useDrop({
+    accept: 'item',
+    collect: (monitor) => {
+      return {
+        handlerId: monitor.getHandlerId(),
+      };
+    },
+    hover(item, monitor) {
+      if (!ref.current) {
+        return
+      }
+      const dragIndex = item.index
+      const hoverIndex = index
+      if (dragIndex === hoverIndex) {
+        return
+      }
+      const hoverBoundingRect = ref.current?.getBoundingClientRect()
+      const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2
+      const clientOffset = monitor.getClientOffset()
+      const hoverClientY = clientOffset.y - hoverBoundingRect.top
+      if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
+        return
+      }
+      if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
+        return
+      }
+
+      dispatch(moveConstructorItem(dragIndex, hoverIndex))
+
+      item.index = hoverIndex
+    },    
+  });
+
+  //хук для сортировки элекентов внутри конструктора
+  const [{isDragging}, dragRef] = useDrag({
+    type: 'item',
+    item: () => {
+      return { id, index };
+    },
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging(),
+    }),
+  });
+
+ dragRef(dropRef(ref))
+
+  return (
+
+    <div ref={ref} data-handler-id={handlerId} className={ConstructorFillingStyles.constructor__element}>
+      <div className="mr-2">
+        <DragIcon type="primary" />
+      </div>
+      <ConstructorElement
+        text={fill.name}
+        price={fill.price}
+        thumbnail={fill.image}
+        handleClose={() => {
+          dispatch(deleteConstructorItem(index));
+        }}
+      />
+    </div>
+
+  );
+};
+
+BurgerConstructorFilling.propTypes = {
+  fill: PropTypes.object.isRequired,
+  index: PropTypes.number.isRequired,
+  id: PropTypes.string.isRequired
+};
+
+export default BurgerConstructorFilling;

src/components/burger-constructor/burger-constructor-filling.module.css

@@ -0,0 +1,4 @@
+.constructor__element {
+    display: flex;
+    align-items: center;
+}