HW-3

src/components/app/app.js

@@ -2,11 +2,27 @@ import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import Restaurants from '../restaurants';
 import Header from '../header';
+import Basket from '../basket';
+
+const getProductsMap = (restaurants) => {
+  const productsMap = new Map();
+  restaurants
+    .flatMap(item => item.menu)
+    .forEach(product => {
+        productsMap.set(product.id, {
+          name: product.name,
+          price: product.price,
+        })
+    });
+  return productsMap;
+};
 
 export default class App extends PureComponent {
   render() {
+    const productsMap = getProductsMap(this.props.restaurants);
     return (
       <div>
+        <Basket productsMap={productsMap} />
         <Header />
         <Restaurants restaurants={this.props.restaurants} />
       </div>
@@ -16,4 +32,5 @@ export default class App extends PureComponent {
 
 App.propTypes = {
   restaurants: PropTypes.array,
+  order: PropTypes.object,
 };

src/components/basket/basket.js

@@ -0,0 +1,41 @@
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+
+import Item from './item';
+
+import styles from './basket.module.css';
+
+const getTotal = (productsMap, orderItems) => {
+  return orderItems.reduce(
+    (previous, current) => previous + productsMap.get(current.id).price * current.amount, 
+    0
+  );
+};
+
+const Basket = ({productsMap, order}) => {
+  const orderItems = Object.entries(order).map(item => ({
+    id: item[0],
+    amount: item[1],
+  }));
+
+  return <div className={styles.basket}>
+    <strong>Your order</strong>
+    <ul>
+      {orderItems.map(
+        (item) => <Item {...item} {...productsMap.get(item.id)} key={item.id} />
+      )}
+    </ul>
+    <div>Total: {getTotal(productsMap, orderItems)}$</div>
+  </div>
+};
+
+Basket.propTypes = {
+  order: PropTypes.object.isRequired,
+  productsMap: PropTypes.object.isRequired,
+};
+
+const mapStateToProps = (state) => ({
+  order: state.order || {},
+});
+
+export default connect(mapStateToProps)(Basket);

src/components/basket/basket.module.css

@@ -0,0 +1,11 @@
+.basket {
+  background-color: #ccc;
+  padding: 20px 10px;
+}
+.basket-item {
+  margin-bottom: 5px;
+}
+.basket-buttons {
+  display: inline-flex;
+  margin-left: 15px;
+}

src/components/basket/index.js

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

src/components/basket/item.js

@@ -0,0 +1,46 @@
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+
+import Button from '../button';
+import { decrement, increment, remove } from '../../redux/actions';
+
+import styles from './basket.module.css';
+
+const Item = ({id, amount, name, price, increment, decrement, remove}) => (
+  <li className={styles['basket-item']}>
+    {name} {price}$ x {amount} = {price * amount}$
+    <span className={styles['basket-buttons']}>
+      <Button
+        onClick={increment}
+        icon="plus"
+      />
+      <Button
+        onClick={decrement}
+        icon="minus"
+      />
+      <Button
+        onClick={remove}
+        icon="delete"
+      />
+    </span>  
+  </li>
+);
+
+Item.propTypes = {
+  id: PropTypes.string.isRequired,
+  amount: PropTypes.number.isRequired,
+  name: PropTypes.string.isRequired,
+  price: PropTypes.number.isRequired,
+  increment: PropTypes.func.isRequired,
+  decrement: PropTypes.func.isRequired,
+  remove: PropTypes.func.isRequired,
+};
+
+
+const mapDispatchToProps = (dispatch, props) => ({
+  decrement: () => dispatch(decrement(props.id)),
+  increment: () => dispatch(increment(props.id)),
+  remove: () => dispatch(remove(props.id)),
+});
+
+export default connect(null, mapDispatchToProps)(Item);

src/components/button/button.js

@@ -4,10 +4,13 @@ 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/components/header/header.js

@@ -1,4 +1,5 @@
 import { ReactComponent as Logo } from '../../icons/logo.svg';
+
 import styles from './header.module.css';
 
 const Header = () => (

src/redux/actions.js

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

src/redux/constants.js

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

src/redux/reducer/order.js

@@ -1,13 +1,28 @@
-import { DECREMENT, INCREMENT } from '../constants';
+import { DECREMENT, INCREMENT, REMOVE } from '../constants';
+
+const removeItem = (state, id) => {
+  let newState = { ...state };
+  delete newState[id];
+  return newState;
+};
 
 // { [productId]: amount }
 export default function (state = {}, action) {
   const { type, id } = action;
   switch (type) {
     case INCREMENT:
       return { ...state, [id]: (state[id] || 0) + 1 };
+
     case DECREMENT:
-      return { ...state, [id]: (state[id] || 0) - 1 };
+      let newAmount = (state[id] || 0) - 1;
+      if (newAmount > 0) {
+        return { ...state, [id]: newAmount };
+      }
+      return removeItem(state, id);
+
+    case REMOVE:
+      return removeItem(state, id);
+
     default:
       return state;
   }