basket, remove item, price, total price

src/components/app/app.js

@@ -2,12 +2,24 @@ 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 {
+  constructor(props) {
+    super(props);
+    this.state = {showBasket: false};
+  }
+  handleBasket = () => {
+    this.setState({
+      showBasket: !this.state.showBasket
+    });
+  }
+
   render() {
     return (
       <div>
-        <Header />
+        {this.state.showBasket && <Basket restaurants={this.props.restaurants} handleBasket={this.handleBasket}/>}
+        <Header setBasket={this.handleBasket}/>
         <Restaurants restaurants={this.props.restaurants} />
       </div>
     );

src/components/basket/basket.js

@@ -0,0 +1,63 @@
+import { connect } from 'react-redux';
+import { decrement, increment, removeItem } from '../../redux/actions';
+
+import { ReactComponent as DeleteIcon } from '../../icons/delete-icon.svg';
+import Button from '../button';
+import styles from './basket.module.css';
+
+const Basket = ({ order, decrement, increment, restaurants, removeItem, handleBasket}) => {
+  const dishes = [...restaurants].map(item => item.menu.map(item2 => item2)).flat(2);
+  let selectedItems = [];
+
+  for (let key in order) {
+    dishes.forEach(item => {
+       if (item.id === key){
+         selectedItems = [...selectedItems, item];
+         item.qty = order[key]
+       }
+     })
+  }
+  const totalPrice = selectedItems.reduce(( prev, cur ) => prev + cur.price*cur.qty, 0)
+
+  return(
+    <div className={styles.basket}>
+      <DeleteIcon className={styles.closeIcon} onClick={handleBasket} />
+      <p>Selected Items:</p>
+      {selectedItems.map(item => (
+        <div key={item.id} className={styles.basketItem}>
+          <div>
+            <p>{item.name}</p>
+            <p>{item.qty*item.price}$</p>
+            <p className={styles.qty}>qty: {item.qty}</p>
+          </div>
+          <div className={styles.wrapperButtons}>
+            <DeleteIcon className={styles.deleteIcon} onClick={() => removeItem(item.id)} />
+            <div className={styles.buttons}>
+              <Button
+                onClick={() => decrement(item.id)}
+                icon="minus"
+              />
+              <Button
+                onClick={() => increment(item.id)}
+                icon="plus"
+              />
+            </div>
+          </div>
+        </div>
+        )
+      )}
+      <p>Total price: {totalPrice}$</p>
+    </div>
+  )
+};
+
+const mapStateToProps = (state, props) => ({
+  order: state.order
+});
+
+const mapDispatchToProps = {
+  decrement,
+  increment,
+  removeItem,
+};
+export default connect(mapStateToProps, mapDispatchToProps)(Basket);

src/components/basket/basket.module.css

@@ -0,0 +1,51 @@
+.basket {
+  position: fixed;
+  width: 500px;
+  top: 170px;
+  border: 1px solid var(--grey);
+  z-index: 3;
+  left: calc(50% - 250px);
+  padding: 15px;
+  height: 300px;
+  background: var(--grey);
+  overflow-y: auto;
+}
+
+.basketItem{
+  padding-bottom: 7px;
+  border-bottom: 1px solid darkgray;
+  display: flex;
+  justify-content: space-between;
+}
+
+.buttons {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: auto;
+}
+
+.deleteIcon{
+  width: 20px;
+  height: 20px;
+  fill: var(--yellow);
+  margin: 12px 5px 0 auto;
+  cursor: pointer;
+}
+
+.wrapperButtons{
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.closeIcon{
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  right: 10px;
+  top: 10px;
+  fill: darkgrey;
+  cursor: pointer;
+}

src/components/basket/index.js

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

src/components/header/header.js

@@ -1,9 +1,13 @@
 import { ReactComponent as Logo } from '../../icons/logo.svg';
 import styles from './header.module.css';
 
-const Header = () => (
+import { ReactComponent as BasketIcon } from '../../icons/basket.svg';
+
+
+const Header = ({setBasket}) => (
   <header className={styles.header}>
     <Logo />
+    <BasketIcon className={styles.basket} onClick={setBasket}/>
   </header>
 );
 

src/components/header/header.module.css

@@ -13,3 +13,12 @@
   right: 20px;
   top: 0;
 }
+
+.basket{
+  position: absolute;
+  width: 29px;
+  fill: #fff;
+  top: 16px;
+  right: 55px;
+  cursor: pointer;
+}

src/redux/actions.js

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

src/redux/constants.js

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

src/redux/reducer/order.js

@@ -1,4 +1,4 @@
-import { DECREMENT, INCREMENT } from '../constants';
+import { DECREMENT, INCREMENT, REMOVE_ITEM } from '../constants';
 
 // { [productId]: amount }
 export default function (state = {}, action) {
@@ -8,6 +8,9 @@ export default function (state = {}, action) {
       return { ...state, [id]: (state[id] || 0) + 1 };
     case DECREMENT:
       return { ...state, [id]: (state[id] || 0) - 1 };
+    case REMOVE_ITEM:
+      delete state[id];
+      return { ...state };
     default:
       return state;
   }