kondrashov hw3. add Basket and dispatch deleteProduct

src/components/app/app.js

@@ -2,13 +2,16 @@ import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import Restaurants from '../restaurants';
 import Header from '../header';
+import Basket from "../basket";
 
 export default class App extends PureComponent {
   render() {
+    const { restaurants } = this.props;
     return (
       <div>
         <Header />
-        <Restaurants restaurants={this.props.restaurants} />
+        <Basket restaurants={restaurants}/>
+        <Restaurants restaurants={restaurants} />
       </div>
     );
   }

src/components/basket/basket.js

@@ -0,0 +1,63 @@
+import { connect } from 'react-redux';
+import {useMemo} from "react";
+import BasketItem from './basketItem';
+import PropTypes from "prop-types";
+
+function Basket({ restaurants, order }) {
+
+    const menus = useMemo(
+        () => restaurants.map(({ menu }) => ( menu )).reduce((pre, cur) => pre.concat(cur)),
+        [restaurants]
+    );
+
+    const products = useMemo(
+        () => Object.keys(order).map(key => {
+        const product = menus.find(({id}) => (id === key));
+        return {
+            id: key,
+            name: product.name,
+            count: order[key],
+            sum: product.price * order[key],
+        }
+    }), [menus, order]);
+
+    const total = useMemo(
+        () => products.length && products.reduce((pre, cur) => pre + cur.sum, 0)
+    , [products]);
+
+    return (
+        <>
+            <div>
+                {products.map(({id, name, count, sum}) =>
+                    <div key={id}>
+                        <BasketItem id={id} name={name} count={count} sum={sum}/>
+                    </div>
+                )}
+            </div>
+            <div>
+                Сумма: {total}
+            </div>
+        </>
+    );
+}
+
+Basket.propTypes = {
+    restaurants: PropTypes.arrayOf(
+        PropTypes.shape({
+            menu: PropTypes.arrayOf(
+                PropTypes.shape({
+                    id: PropTypes.string,
+                    name: PropTypes.string,
+                    price: PropTypes.number,
+                }).isRequired
+            ).isRequired
+        }).isRequired
+    ).isRequired,
+    order: PropTypes.objectOf(PropTypes.number),
+};
+
+const mapStateToProps = (state) => ({
+    order: state.order || 0,
+});
+
+export default connect(mapStateToProps)(Basket);

src/components/basket/basketItem/basketItem.js

@@ -0,0 +1,47 @@
+import { memo } from 'react'
+import { connect } from 'react-redux';
+import {decrement, increment, deleteProduct} from "../../../redux/actions";
+import Button from "../../button";
+import PropTypes from "prop-types";
+
+
+function BasketItem({ id, name, count, sum, decrement, increment, deleteProduct }) {
+    return (
+        <span>
+            {id}{' '}
+            {name}{' '}
+            {count}{' '}
+            {sum}
+            <Button
+                onClick={decrement}
+                icon="minus"
+            />
+            <Button
+                onClick={increment}
+                icon="plus"
+            />
+            <Button
+                onClick={deleteProduct}
+                icon="minus"
+            />
+        </span>
+    );
+}
+
+BasketItem.propTypes = {
+    id: PropTypes.string,
+    name: PropTypes.string,
+    count: PropTypes.number,
+    sum: PropTypes.number,
+    decrement: PropTypes.func,
+    increment: PropTypes.func,
+    deleteProduct: PropTypes.func,
+}
+
+const mapDispatchToProps = (dispatch, props) => ({
+    decrement: () => dispatch(decrement(props.id)),
+    increment: () => dispatch(increment(props.id)),
+    deleteProduct: () => dispatch(deleteProduct(props.id)),
+});
+
+export default connect(null, mapDispatchToProps)(memo(BasketItem));

src/components/basket/basketItem/index.js

@@ -0,0 +1 @@
+export { default } from './basketItem';

src/components/basket/index.js

@@ -0,0 +1 @@
+export { default } from './basket';

src/redux/actions.js

@@ -1,4 +1,5 @@
-import { DECREMENT, INCREMENT } from './constants';
+import { DECREMENT, INCREMENT, DELETE } from './constants';
 
 export const increment = (id) => ({ type: INCREMENT, id });
 export const decrement = (id) => ({ type: DECREMENT, id });
+export const deleteProduct = (id) => ({ type: DELETE, id });

src/redux/constants.js

@@ -1,2 +1,3 @@
 export const INCREMENT = 'INCREMENT';
 export const DECREMENT = 'DECREMENT';
+export const DELETE = 'DELETE';

src/redux/reducer/order.js

@@ -1,4 +1,4 @@
-import { DECREMENT, INCREMENT } from '../constants';
+import { DECREMENT, INCREMENT, DELETE } from '../constants';
 
 // { [productId]: amount }
 export default function (state = {}, action) {
@@ -8,6 +8,8 @@ export default function (state = {}, action) {
       return { ...state, [id]: (state[id] || 0) + 1 };
     case DECREMENT:
       return { ...state, [id]: (state[id] || 0) - 1 };
+    case DELETE:
+      return Object.fromEntries(Object.entries(state).filter(([key]) => key !== id) )
     default:
       return state;
   }