diff --git a/src/components/app/app.js b/src/components/app/app.js index eebabc8..3458dc1 100644 --- a/src/components/app/app.js +++ b/src/components/app/app.js @@ -1,5 +1,5 @@ import { PureComponent } from 'react'; -import { Route, Switch } from 'react-router-dom'; +import { Route, Switch, Redirect } from 'react-router-dom'; import Restaurants from '../restaurants'; import Header from '../header'; import Basket from '../basket'; @@ -10,7 +10,11 @@ export default class App extends PureComponent {
-

Home page

} /> + } + />

404 - Not found :(

} /> diff --git a/src/components/basket/basket-item/basket-item.js b/src/components/basket/basket-item/basket-item.js index ad8be9e..b61c8a4 100644 --- a/src/components/basket/basket-item/basket-item.js +++ b/src/components/basket/basket-item/basket-item.js @@ -3,6 +3,8 @@ import cn from 'classnames'; import { increment, decrement, remove } from '../../../redux/actions'; import Button from '../../button'; import styles from './basket-item.module.css'; +import { restaurantByProductIdSelector } from '../../../redux/selectors'; +import { Link } from 'react-router-dom'; function BasketItem({ product, @@ -11,11 +13,12 @@ function BasketItem({ increment, decrement, remove, + restId, }) { return (
- {product.name} + {product.name}
@@ -36,4 +39,8 @@ const mapDispatchToProps = (dispatch, ownProps) => ({ remove: () => dispatch(remove(ownProps.product.id)), }); -export default connect(null, mapDispatchToProps)(BasketItem); +const mapStateToProps = (state, ownProps) => ({ + restId: restaurantByProductIdSelector(state, ownProps), +}); + +export default connect(mapStateToProps, mapDispatchToProps)(BasketItem); diff --git a/src/components/restaurant/restaurant.js b/src/components/restaurant/restaurant.js index 8cb7a7f..2696694 100644 --- a/src/components/restaurant/restaurant.js +++ b/src/components/restaurant/restaurant.js @@ -1,24 +1,22 @@ -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'; import Rate from '../rate'; -import Tabs from '../tabs'; import { averageRatingSelector, restaurantSelector, } from '../../redux/selectors'; +import styles from './restaurant.module.css'; +import { NavLink, Switch, Route, Redirect } from 'react-router-dom'; const Restaurant = ({ restaurant, averageRating }) => { 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', restId: id }, + { id: 'reviews', label: 'Reviews', restId: id }, ]; return ( @@ -26,9 +24,36 @@ const Restaurant = ({ restaurant, averageRating }) => { - - {activeTab === 'menu' && } - {activeTab === 'reviews' && } + +
+ {tabs.map(({ id, label, restId }) => ( + + {label} + + ))} +
+ + + {({ match }) => { + console.log(match.params); + + switch (match.params.id) { + case 'menu': + return ; + case 'reviews': + return ; + default: + return 'no data(('; + } + }} + + +
); }; diff --git a/src/components/restaurant/restaurant.module.css b/src/components/restaurant/restaurant.module.css new file mode 100644 index 0000000..f93fc10 --- /dev/null +++ b/src/components/restaurant/restaurant.module.css @@ -0,0 +1,19 @@ +.tabs { + height: auto; + text-align: center; + padding: 12px; + background-color: var(--grey); +} + +.tabs span { + cursor: pointer; +} + +.tab { + padding: 4px 12px; + color: var(--black); +} + +.tab.active { + border-bottom: 1px solid var(--black); +} diff --git a/src/components/restaurants/restaurants.js b/src/components/restaurants/restaurants.js index bf17a3c..e183966 100644 --- a/src/components/restaurants/restaurants.js +++ b/src/components/restaurants/restaurants.js @@ -39,7 +39,7 @@ function Restaurants({ restaurants, loading, loaded, loadRestaurants }) { {({ match }) => } - +
); diff --git a/src/redux/selectors.js b/src/redux/selectors.js index c3c8da8..9ee1140 100644 --- a/src/redux/selectors.js +++ b/src/redux/selectors.js @@ -72,3 +72,13 @@ export const averageRatingSelector = createSelector( ); } ); + +export const restaurantByProductIdSelector = createSelector( + [restaurantsSelector, (state, ownProps) => ownProps.product.id], + (restaurants, id) => { + const restaurant = Object.values(restaurants).find((restaurant) => + restaurant.menu.find((value) => value === id) + ); + return restaurant.id; + } +);