From aafe78fa056927d3eda7e1da4f23403110d637db Mon Sep 17 00:00:00 2001 From: dmitrykhotko Date: Mon, 1 Nov 2021 23:10:25 +0300 Subject: [PATCH] ht6 --- .../basket/basket-item/basket-item.js | 4 +++- src/components/basket/basket.js | 3 ++- src/components/menu/menu.js | 4 ++-- src/components/product/product.js | 5 +++-- src/components/restaurant/restaurant.js | 14 ++++++------ src/components/restaurants/restaurants.js | 16 ++++++++++++-- src/components/tabs/tabs.js | 16 ++++++++------ src/redux/actions.js | 4 ++-- src/redux/reducer/order.js | 22 ++++++++++++++----- src/redux/selectors.js | 10 +++++---- 10 files changed, 65 insertions(+), 33 deletions(-) diff --git a/src/components/basket/basket-item/basket-item.js b/src/components/basket/basket-item/basket-item.js index ad8be9e..8229467 100644 --- a/src/components/basket/basket-item/basket-item.js +++ b/src/components/basket/basket-item/basket-item.js @@ -1,5 +1,6 @@ import { connect } from 'react-redux'; import cn from 'classnames'; +import { NavLink } from 'react-router-dom'; import { increment, decrement, remove } from '../../../redux/actions'; import Button from '../../button'; import styles from './basket-item.module.css'; @@ -8,6 +9,7 @@ function BasketItem({ product, amount, subtotal, + restId, increment, decrement, remove, @@ -15,7 +17,7 @@ function BasketItem({ return (
- {product.name} + {product.name}
diff --git a/src/components/basket/basket.js b/src/components/basket/basket.js index ac2f8e0..0daa670 100644 --- a/src/components/basket/basket.js +++ b/src/components/basket/basket.js @@ -19,12 +19,13 @@ function Basket({ title = 'Basket', total, orderProducts }) { return (

{title}

- {orderProducts.map(({ product, amount, subtotal }) => ( + {orderProducts.map(({ product, amount, subtotal, restId }) => ( ))}
diff --git a/src/components/menu/menu.js b/src/components/menu/menu.js index 4e19a21..293f990 100644 --- a/src/components/menu/menu.js +++ b/src/components/menu/menu.js @@ -43,7 +43,7 @@ class Menu extends Component { } render() { - const { menu, loading, loaded } = this.props; + const { menu, loading, loaded, restId } = this.props; if (loading) { return ; @@ -57,7 +57,7 @@ class Menu extends Component {
{menu.map((id) => ( - + ))}
diff --git a/src/components/product/product.js b/src/components/product/product.js index de900d6..3c0dccc 100644 --- a/src/components/product/product.js +++ b/src/components/product/product.js @@ -44,6 +44,7 @@ Product.propTypes = { price: PropTypes.number, ingredients: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired, }).isRequired, + restId: PropTypes.string.isRequired, // from connect amount: PropTypes.number, @@ -57,8 +58,8 @@ const mapStateToProps = (state, props) => ({ }); const mapDispatchToProps = (dispatch, props) => ({ - increment: () => dispatch(increment(props.id)), - decrement: () => dispatch(decrement(props.id)), + increment: () => dispatch(increment(props.id, props.restId)), + decrement: () => dispatch(decrement(props.id, props.restId)), }); export default connect(mapStateToProps, mapDispatchToProps)(Product); diff --git a/src/components/restaurant/restaurant.js b/src/components/restaurant/restaurant.js index 8cb7a7f..d2664ce 100644 --- a/src/components/restaurant/restaurant.js +++ b/src/components/restaurant/restaurant.js @@ -1,6 +1,6 @@ -import { useState } from 'react'; import { connect } from 'react-redux'; import PropTypes from 'prop-types'; + import Menu from '../menu'; import Reviews from '../reviews'; import Banner from '../banner'; @@ -11,14 +11,12 @@ import { restaurantSelector, } from '../../redux/selectors'; -const Restaurant = ({ restaurant, averageRating }) => { +const Restaurant = ({ restaurant, averageRating, activeTab }) => { const { id, name, menu, reviews } = restaurant; - const [activeTab, setActiveTab] = useState('menu'); - const tabs = [ - { id: 'menu', label: 'Menu' }, - { id: 'reviews', label: 'Reviews' }, + { id: 'menu', label: 'Menu', route: `/restaurants/${id}/menu` }, + { id: 'reviews', label: 'Reviews', route: `/restaurants/${id}/reviews` }, ]; return ( @@ -26,7 +24,8 @@ const Restaurant = ({ restaurant, averageRating }) => { - + + {activeTab === 'menu' && } {activeTab === 'reviews' && }
@@ -41,6 +40,7 @@ Restaurant.propTypes = { reviews: PropTypes.array, }).isRequired, averageRating: PropTypes.number, + activeTab: PropTypes.string.isRequired, }; const mapStateToProps = (state, props) => ({ diff --git a/src/components/restaurants/restaurants.js b/src/components/restaurants/restaurants.js index bf17a3c..1d3bb64 100644 --- a/src/components/restaurants/restaurants.js +++ b/src/components/restaurants/restaurants.js @@ -36,10 +36,22 @@ function Restaurants({ restaurants, loading, loaded, loadRestaurants }) { ))}
+ + {({ match }) => ( + + )} + + + {({ match }) => ( + + )} + - {({ match }) => } + {({ match }) => ( + + )} - +
); diff --git a/src/components/tabs/tabs.js b/src/components/tabs/tabs.js index aa6445c..c7817c6 100644 --- a/src/components/tabs/tabs.js +++ b/src/components/tabs/tabs.js @@ -1,19 +1,21 @@ import PropTypes from 'prop-types'; import cn from 'classnames'; +import { NavLink } from 'react-router-dom'; import styles from './tabs.module.css'; -function Tabs({ tabs, activeId, onChange }) { +function Tabs({ tabs, activeId }) { return (
- {tabs.map(({ id, label }) => ( - ( + onChange(id)} + to={route} + className={styles.tab} + activeClassName={cn(styles.tab, { [styles.active]: id === activeId })} > {label} - + ))}
); @@ -24,10 +26,10 @@ Tabs.propTypes = { PropTypes.shape({ id: PropTypes.string.isRequired, label: PropTypes.string, + route: PropTypes.string.isRequired, }).isRequired ).isRequired, activeId: PropTypes.string, - onChange: PropTypes.func.isRequired, }; export default Tabs; diff --git a/src/redux/actions.js b/src/redux/actions.js index 8d98a83..fbd2bed 100644 --- a/src/redux/actions.js +++ b/src/redux/actions.js @@ -20,8 +20,8 @@ import { reviewsLoadedSelector, } from './selectors'; -export const increment = (id) => ({ type: INCREMENT, id }); -export const decrement = (id) => ({ type: DECREMENT, id }); +export const increment = (id, restId) => ({ type: INCREMENT, id, restId }); +export const decrement = (id, restId) => ({ type: DECREMENT, id, restId }); export const remove = (id) => ({ type: REMOVE, id }); export const changeRestaurant = (activeId) => ({ diff --git a/src/redux/reducer/order.js b/src/redux/reducer/order.js index e20530c..80241c4 100644 --- a/src/redux/reducer/order.js +++ b/src/redux/reducer/order.js @@ -1,15 +1,27 @@ import { DECREMENT, INCREMENT, REMOVE } from '../constants'; -// { [productId]: amount } +// { [productId]: {amount, restId} } export default function (state = {}, action) { - const { type, id } = action; + const { type, id, restId } = action; switch (type) { case INCREMENT: - return { ...state, [id]: (state[id] || 0) + 1 }; + const item = state[id] || { restId, amount: 0 }; + return { + ...state, + [id]: { ...item, amount: item.amount + 1 }, + }; case DECREMENT: - return { ...state, [id]: state[id] > 0 ? (state[id] || 0) - 1 : 0 }; + return state[id] + ? { + ...state, + [id]: { + ...state[id], + amount: state[id].amount > 0 ? (state[id].amount || 0) - 1 : 0, + }, + } + : state; case REMOVE: - return { ...state, [id]: 0 }; + return { ...state, [id]: { ...state[id], amount: 0 } }; default: return state; } diff --git a/src/redux/selectors.js b/src/redux/selectors.js index c3c8da8..a1fe6fe 100644 --- a/src/redux/selectors.js +++ b/src/redux/selectors.js @@ -32,18 +32,20 @@ export const restaurantSelector = (state, { id }) => restaurantsSelector(state)[id]; export const productSelector = (state, { id }) => productsSelector(state)[id]; export const reviewSelector = (state, { id }) => reviewsSelector(state)[id]; -export const amountSelector = (state, { id }) => orderSelector(state)[id] || 0; +export const amountSelector = (state, { id }) => + orderSelector(state)[id] ? orderSelector(state)[id].amount : 0; export const orderProductsSelector = createSelector( orderSelector, productsSelector, (order, products) => Object.keys(order) - .filter((productId) => order[productId] > 0) + .filter((productId) => order[productId].amount > 0) .map((productId) => products[productId]) .map((product) => ({ product, - amount: order[product.id], - subtotal: order[product.id] * product.price, + amount: order[product.id].amount, + subtotal: order[product.id].amount * product.price, + restId: order[product.id].restId, })) );