Ht3

src/components/app/app.js

@@ -2,12 +2,14 @@ import React, { 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.js

@@ -0,0 +1,99 @@
+import React, { useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { clear, increment, decrement } from '../../redux/actions';
+import MinusIcon from './icons/minus.svg';
+import PlusIcon from './icons/plus.svg';
+import popup from '../../hocs/popup';
+
+import styles from './basket.module.css';
+
+const Basket = ({
+  order = {},
+  restaurants,
+  clearBasket,
+  increment,
+  decrement,
+  isOpenBasket,
+  hideBasket,
+  openBasket,
+}) => {
+  const products = useMemo(() => {
+    return restaurants.flatMap(({ menu }) => menu);
+  }, [restaurants]);
+
+  const getCountProduct = (productId) => {
+    return order[productId] || 0;
+  };
+
+  return (
+    <div className={styles.basket}>
+      <button
+        className={styles.button}
+        onClick={isOpenBasket ? hideBasket : openBasket}
+        data-id="basket-clear"
+      >
+        ≡
+      </button>
+      {isOpenBasket && (
+        <div className={styles.products}>
+          {products.map((product) => (
+            <div key={product.id} className={styles.product}>
+              {product.name}
+              <div>Price {product.price} $ </div>
+              <div>Count {getCountProduct(product.id)}</div>
+              <div>
+                Total coast {getCountProduct(product.id) * product.price}
+              </div>
+              <div className={styles.buttons}>
+                <button
+                  className={styles.button}
+                  onClick={() => decrement(product.id)}
+                  data-id="product-decrement"
+                >
+                  <img src={MinusIcon} alt="minus" />
+                </button>
+                <button
+                  className={styles.button}
+                  onClick={() => increment(product.id)}
+                  data-id="product-increment"
+                >
+                  <img src={PlusIcon} alt="plus" />
+                </button>
+              </div>
+            </div>
+          ))}
+          <button
+            className={styles.button}
+            onClick={clearBasket}
+            data-id="basket-clear"
+          >
+            x
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+Basket.propTypes = {
+  order: PropTypes.object.isRequired,
+  clearBasket: PropTypes.func.isRequired,
+  increment: PropTypes.func.isRequired,
+  decrement: PropTypes.func.isRequired,
+  hideBasket: PropTypes.func.isRequired,
+  openBasket: PropTypes.func.isRequired,
+  isOpenBasket: PropTypes.bool.isRequired,
+};
+
+const mapStateToProps = (state) => ({
+  order: state.order,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  clearBasket: () => dispatch(clear()),
+  increment: (productId) => dispatch(increment(productId)),
+  decrement: (productId) => dispatch(decrement(productId)),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(popup(Basket));

src/components/basket/basket.module.css

@@ -0,0 +1,49 @@
+.basket {
+  position: relative;
+  padding: 15px;
+}
+
+.products {
+  position: absolute;
+  padding: 15px;
+  margin-top: 10px;
+  width: 50%;
+  height: 300px;
+  z-index: 5;
+  border: 1px solid var(--grey);
+  background: var(--white);
+  overflow-y: scroll;
+}
+
+.product {
+  padding: 5px;
+  margin: 5px 0;
+  border: 1px solid var(--grey);
+}
+
+.buttons {
+  width: 80px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.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;
+}

src/components/basket/index.js

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

src/hocs/popup.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import usePopup from '../hooks/use-popup';
+
+export default (WrappedComponent) => ({ initialState, ...props }) => {
+  const popupProps = usePopup(initialState);
+  return <WrappedComponent {...props} {...popupProps} />;
+};

src/hooks/use-popup.js

@@ -0,0 +1,9 @@
+import { useState } from 'react';
+
+export default function usePopup(initialState = false) {
+  const [isOpenBasket, toggleBasket] = useState(initialState);
+  const hideBasket = () => toggleBasket(false);
+  const openBasket = () => toggleBasket(true);
+
+  return { isOpenBasket, hideBasket, openBasket };
+}

src/redux/actions.js

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

src/redux/constants.js

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

src/redux/reducers/order.js

@@ -1,13 +1,15 @@
-import { DECREMENT, INCREMENT } from '../constants';
+import { DECREMENT, INCREMENT, CLEAR } from '../constants';
 
 // { [productId]: amount }
-export default (state = 0, action) => {
+export default (state = {}, action) => {
   const { type, payload } = action;
   switch (type) {
     case INCREMENT:
       return { ...state, [payload.id]: (state[payload.id] || 0) + 1 };
     case DECREMENT:
       return { ...state, [payload.id]: (state[payload.id] || 0) - 1 };
+    case CLEAR:
+      return {};
     default:
       return state;
   }