HT3

src/components/basket/basket.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import Order from '../order';
+import styles from './basket.module.css';
+
+export const basket = ({ restaurants, orderProduct }) => {
+  if (Object.keys(orderProduct).length === 0) {
+    return (
+      <div className={styles.basket}>
+        <div className={styles.title}>Basket is empty</div>
+      </div>
+    );
+  }
+
+  let products = restaurants.reduce(
+    (accumulator, currentValue) => [...accumulator, ...currentValue.menu],
+    []
+  );
+
+  let orderProducts = products.filter((product) => orderProduct[product.id]);
+
+  let totalPrice = `${orderProducts.reduce(
+    (accumulator, currentValue) =>
+      accumulator + orderProduct[currentValue.id] * currentValue.price,
+    0
+  )}$`;
+
+  return (
+    <div className={styles.basket}>
+      <div className={styles.title}>Basket</div>
+      <div>
+        {orderProducts.map((product) => (
+          <Order key={product.id} product={product}></Order>
+        ))}
+      </div>
+      <div className={styles.totalPrice}>
+        Total price: <span>{totalPrice}</span>
+      </div>
+    </div>
+  );
+};
+
+const mapStateToProps = (state) => {
+  return {
+    orderProduct: state.order,
+  };
+};
+
+export default connect(mapStateToProps)(basket);

src/components/basket/basket.module.css

@@ -0,0 +1,18 @@
+.basket {
+  padding: 32px;
+  border-top: 1px solid var(--black);
+  border-bottom: 1px solid var(--black);
+}
+.title {
+  text-align: center;
+  margin-bottom: 16px;
+}
+.totalPrice {
+  margin-top: 16px;
+  padding: 0 32px;
+  font-weight: 300;
+  font-size: 24px;
+}
+.totalPrice span {
+  font-weight: 500;
+}

src/components/basket/index.js

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

src/components/order/index.js

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

src/components/order/order.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import styles from './order.module.css';
+import { decrement, increment, remove } from '../../redux/actions';
+
+const Order = ({ product, amount, increment, decrement, remove }) => {
+  return (
+    <div className={styles.product}>
+      <div className={styles.content}>
+        <div className={styles.productInfo}>
+          <h4 className={styles.productName}>{product.name}</h4>
+          <div className={styles.productPrice}>{product.price} $</div>
+          <div className={styles.productSumPrice}>
+            Sum price: <span>{product.price * amount}$</span>
+          </div>
+        </div>
+        <div className={styles.productControls}>
+          <div className={styles.productCount}>{amount}</div>
+          <div className={styles.buttons}>
+            <button className={styles.button} onClick={decrement}>
+              -
+            </button>
+            <button className={styles.button} onClick={increment}>
+              +
+            </button>
+            <button className={styles.buttonRemove} onClick={remove}>
+              X
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const mapStateToProps = (state, ownProps) => ({
+  amount: state.order[ownProps.product.id] || 0,
+});
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+  increment: () => dispatch(increment(ownProps.product.id)),
+  decrement: () => dispatch(decrement(ownProps.product.id)),
+  remove: () => dispatch(remove(ownProps.product.id)),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(Order);

src/components/order/order.module.css

@@ -0,0 +1,113 @@
+.product {
+  padding: 16px 32px;
+  background: rgba(240, 173, 78, 0.1);
+  margin-bottom: 8px;
+}
+
+.content {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.productName {
+  font-size: 18px;
+  line-height: 28px;
+  font-weight: 600;
+  margin-top: 0;
+  margin-bottom: 8px;
+}
+
+.productPrice {
+  margin-top: 8px;
+  font-size: 18px;
+  line-height: 28px;
+  font-weight: 600;
+  color: var(--yellow);
+}
+
+.productControls {
+  padding: 5px 0;
+  text-align: center;
+  display: inline-block;
+}
+
+.productCount {
+  color: var(--grey-dark);
+  font-weight: 600;
+  margin-bottom: 5px;
+  font-size: 18px;
+  line-height: 28px;
+}
+
+.buttons {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: auto;
+}
+
+.button {
+  color: var(--white);
+  background-color: var(--yellow);
+  border: 1px solid var(--yellow);
+  border-radius: 2px;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  font-weight: 700;
+  font-size: 24px;
+  outline: none;
+  box-shadow: none;
+  cursor: pointer;
+  margin: 0 1px;
+}
+
+.button:hover,
+.button:focus,
+.button:active {
+  border-color: var(--yellow-light);
+  background-color: var(--yellow-light);
+}
+
+.buttonRemove {
+  color: var(--white);
+  background-color: rgba(255, 0, 0, 0.6);
+  border: 1px solid rgba(255, 0, 0, 0.6);
+  border-radius: 2px;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  font-weight: 700;
+  font-size: 24px;
+  outline: none;
+  box-shadow: none;
+  cursor: pointer;
+  margin: 0 1px;
+}
+
+.buttonRemove:hover,
+.buttonRemove:focus,
+.buttonRemove:active {
+  border-color: rgba(255, 0, 0, 0.4);
+  background-color: rgba(255, 0, 0, 0.4);
+}
+
+.footer {
+  padding-top: 16px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.productSumPrice {
+  font-size: 20px;
+}

src/components/restaurants/restaurants.js

@@ -2,6 +2,7 @@ import React, { useState, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import Restaurant from '../restaurant';
 import Navigation from '../navigation';
+import Basket from '../basket';
 
 const Restaurants = ({ restaurants }) => {
   const [activeRestaurantId, setActiveRestaurant] = useState(restaurants[0].id);
@@ -17,6 +18,7 @@ const Restaurants = ({ restaurants }) => {
         restaurants={restaurants}
         onRestaurantClick={setActiveRestaurant}
       />
+      <Basket restaurants={restaurants}></Basket>
       <Restaurant restaurant={activeRestaurant} />
     </div>
   );

src/redux/actions.js

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

src/redux/constants.js

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

src/redux/reducers/order.js

@@ -1,4 +1,4 @@
-import { DECREMENT, INCREMENT } from '../constants';
+import { DECREMENT, INCREMENT, REMOVE } from '../constants';
 
 // { [productId]: amount }
 export default (state = 0, action) => {
@@ -7,7 +7,14 @@ export default (state = 0, action) => {
     case INCREMENT:
       return { ...state, [payload.id]: (state[payload.id] || 0) + 1 };
     case DECREMENT:
+      if (state[payload.id] === undefined || state[payload.id] - 1 <= 0) {
+        delete state[payload.id];
+        return { ...state };
+      }
       return { ...state, [payload.id]: (state[payload.id] || 0) - 1 };
+    case REMOVE:
+      delete state[payload.id];
+      return { ...state };
     default:
       return state;
   }