Misnik ht 3

src/components/app/app.js

@@ -2,12 +2,14 @@ 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() {
     return (
       <div>
         <Header />
+        <Basket restaurants={this.props.restaurants}/>
         <Restaurants restaurants={this.props.restaurants} />
       </div>
     );

src/components/basket/basket-item/basket-item.js

@@ -0,0 +1,43 @@
+import { connect } from 'react-redux';
+import { decrement, deleteItem, increment } from '../../../redux/actions';
+import styles from '../../product/product.module.css';
+import Button from '../../button';
+
+function BasketItem({ id, name, amount, decrement, increment, deleteItem, summ }) {
+  return (
+    <div>
+      <div>
+        <span>{name}</span>&nbsp;
+        <span>{amount}</span>&nbsp;
+        <span>{summ}</span>
+      </div>
+      <div className={styles.buttons}>
+        <Button
+          onClick={decrement}
+          data-id='product-decrement'
+          icon='minus'
+        />
+        <Button
+          onClick={increment}
+          data-id='product-increment'
+          icon='plus'
+        />
+        <Button
+          onClick={deleteItem}
+          data-id='product-delete'
+          icon='delete'
+        />
+      </div>
+    </div>
+  )
+}
+
+const mapStateToProps = () => ({})
+
+const mapDispatchToProps = (dispatch, props) => ({
+  decrement: () => dispatch(decrement(props.id)),
+  increment: () => dispatch(increment(props.id)),
+  deleteItem: () => dispatch(deleteItem(props.id))
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(BasketItem)

src/components/basket/basket-item/index.js

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

src/components/basket/basket.js

@@ -0,0 +1,37 @@
+import BasketItem from './basket-item';
+import { connect } from 'react-redux';
+
+function Basket ({ restaurants, orderMap, amount }) {
+
+  const menu = restaurants.map((item) => item.menu).reduce((previousValue, currentValue) => previousValue.concat(currentValue))
+  const newOrderMap = orderMap;
+  let allSum = 0;
+
+  const products = Object.entries(newOrderMap).filter(item => item[1] > 0).map((item) => {
+    const productItems = menu.find(({ id }) => item[0] === id)
+    const sum = productItems.price * item[1]
+    allSum = allSum + sum
+    return {
+      id: item[0],
+      name: productItems.name,
+      amount: item[1],
+      sum,
+      allSum
+    }
+  })
+
+  return (
+    <div>
+      {products.map((item) => (
+        <BasketItem key={item.id} id={item.id} name={item.name} amount={item.amount} summ={item.sum}/>
+      ))}
+      <p>Общая сумма заказа: {allSum}</p>
+    </div>
+  )
+}
+
+const mapStateToProps = (state) => ({
+  orderMap: state.order
+})
+
+export default connect(mapStateToProps)(Basket)

src/components/basket/index.js

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

src/components/button/button.js

@@ -4,10 +4,12 @@ import styles from './button.module.css';
 
 import { ReactComponent as PlusIcon } from '../../icons/plus.svg';
 import { ReactComponent as MinusIcon } from '../../icons/minus.svg';
+import { ReactComponent as DeleteIcon } from '../../icons/delete.svg';
 
 const icons = {
   plus: PlusIcon,
   minus: MinusIcon,
+  delete: DeleteIcon
 };
 
 const Button = ({ icon, ...props }) => {

src/redux/actions.js

@@ -1,4 +1,5 @@
-import { DECREMENT, INCREMENT } from './constants';
+import { DECREMENT, DELETE, INCREMENT } from './constants';
 
 export const increment = (id) => ({ type: INCREMENT, id });
 export const decrement = (id) => ({ type: DECREMENT, id });
+export const deleteItem = (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, DELETE, INCREMENT } from '../constants';
 
 // { [productId]: amount }
 export default function (state = {}, action) {
@@ -7,7 +7,9 @@ export default function (state = {}, action) {
     case INCREMENT:
       return { ...state, [id]: (state[id] || 0) + 1 };
     case DECREMENT:
-      return { ...state, [id]: (state[id] || 0) - 1 };
+      return { ...state, [id]: (state[id]) > 0 ? state[id] - 1 : 0 };
+    case DELETE:
+      return { ...state, [id]: 0 };
     default:
       return state;
   }