diff --git a/.idea/workspace.xml b/.idea/workspace.xml new file mode 100644 index 0000000..a301fa0 --- /dev/null +++ b/.idea/workspace.xml @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/app/app.js b/src/components/app/app.js index 3124600..a3efc7c 100644 --- a/src/components/app/app.js +++ b/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 (
-
+ {this.state.showBasket && } +
); diff --git a/src/components/basket/basket.js b/src/components/basket/basket.js new file mode 100644 index 0000000..3220fb3 --- /dev/null +++ b/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( +
+ +

Selected Items:

+ {selectedItems.map(item => ( +
+
+

{item.name}

+

{item.qty*item.price}$

+

qty: {item.qty}

+
+
+ removeItem(item.id)} /> +
+
+
+
+ ) + )} +

Total price: {totalPrice}$

+
+ ) +}; + +const mapStateToProps = (state, props) => ({ + order: state.order +}); + +const mapDispatchToProps = { + decrement, + increment, + removeItem, +}; +export default connect(mapStateToProps, mapDispatchToProps)(Basket); diff --git a/src/components/basket/basket.module.css b/src/components/basket/basket.module.css new file mode 100644 index 0000000..c993ec6 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/components/basket/index.js b/src/components/basket/index.js new file mode 100644 index 0000000..3388ab0 --- /dev/null +++ b/src/components/basket/index.js @@ -0,0 +1 @@ +export { default } from './basket'; \ No newline at end of file diff --git a/src/components/header/header.js b/src/components/header/header.js index 8d5c5c3..8bcd1d6 100644 --- a/src/components/header/header.js +++ b/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}) => (
+
); diff --git a/src/components/header/header.module.css b/src/components/header/header.module.css index 8d48669..7a05a7c 100644 --- a/src/components/header/header.module.css +++ b/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; +} \ No newline at end of file diff --git a/src/icons/basket.svg b/src/icons/basket.svg new file mode 100644 index 0000000..861635e --- /dev/null +++ b/src/icons/basket.svg @@ -0,0 +1 @@ +wheel-cart-glyph \ No newline at end of file diff --git a/src/icons/delete-icon.svg b/src/icons/delete-icon.svg new file mode 100644 index 0000000..269c01d --- /dev/null +++ b/src/icons/delete-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/redux/actions.js b/src/redux/actions.js index 92f8715..57ac85c 100644 --- a/src/redux/actions.js +++ b/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 }); diff --git a/src/redux/constants.js b/src/redux/constants.js index 930d9ef..907588f 100644 --- a/src/redux/constants.js +++ b/src/redux/constants.js @@ -1,2 +1,3 @@ export const INCREMENT = 'INCREMENT'; export const DECREMENT = 'DECREMENT'; +export const REMOVE_ITEM = 'REMOVE_ITEM'; diff --git a/src/redux/reducer/order.js b/src/redux/reducer/order.js index 672d5bb..9d5892e 100644 --- a/src/redux/reducer/order.js +++ b/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; }