diff --git a/src/pages/enum.js b/src/pages/enum.js new file mode 100644 index 0000000..e3ea41f --- /dev/null +++ b/src/pages/enum.js @@ -0,0 +1,6 @@ +const TABS_ENUM = { + MENU: 'menu', + REVIEWS: 'reviews', +}; + +export default TABS_ENUM; diff --git a/src/pages/restaurant-page.js b/src/pages/restaurant-page.js new file mode 100644 index 0000000..76560b2 --- /dev/null +++ b/src/pages/restaurant-page.js @@ -0,0 +1,38 @@ +import React from 'react'; +import { connect } from 'react-redux'; +import { createStructuredSelector } from 'reselect'; +import PropTypes from 'prop-types'; +import { restaurantsListSelector } from '../redux/selectors'; +import Menu from '../components/menu'; +import Reviews from '../components/reviews'; +import Restaurants from '../components/restaurants'; +import TABS_ENUM from './enum'; + +const RestaurantPage = ({ restaurants, match }) => { + const { restId, tab } = match.params; + const restaurant = restaurants.find((restaurant) => restaurant.id === restId); + const { menu, reviews } = restaurant; + + switch (tab) { + case TABS_ENUM.MENU: + return ; + case TABS_ENUM.REVIEWS: + return ; + default: + return ; + } +}; + +RestaurantPage.propTypes = { + restaurants: PropTypes.arrayOf( + PropTypes.shape({ + id: PropTypes.string.isRequired, + }).isRequired + ).isRequired, +}; + +export default connect( + createStructuredSelector({ + restaurants: restaurantsListSelector, + }) +)(RestaurantPage); diff --git a/src/pages/restaurants-page.js b/src/pages/restaurants-page.js index 9e8e1ed..0163dd6 100644 --- a/src/pages/restaurants-page.js +++ b/src/pages/restaurants-page.js @@ -1,6 +1,6 @@ import React, { useEffect } from 'react'; import { connect } from 'react-redux'; -import { Route } from 'react-router-dom'; +import { Route, Link, Switch } from 'react-router-dom'; import { createStructuredSelector } from 'reselect'; import Restaurants from '../components/restaurants'; import Loader from '../components/loader'; @@ -11,6 +11,7 @@ import { restaurantsLoadingSelector, } from '../redux/selectors'; import { loadRestaurants } from '../redux/actions'; +import RestaurantPage from './restaurant-page'; function RestaurantsPage({ loading, loaded, loadRestaurants, match }) { useEffect(() => { @@ -28,7 +29,12 @@ function RestaurantsPage({ loading, loaded, loadRestaurants, match }) { ); } - return ; + return ( + + ; + ; + + ); } export default connect( diff --git a/src/redux/selectors.js b/src/redux/selectors.js index ca4f2a9..ceabbda 100644 --- a/src/redux/selectors.js +++ b/src/redux/selectors.js @@ -28,6 +28,18 @@ export const restaurantsListSelector = createSelector( Object.values ); +export const restaurantIdByProductIdSelector = (state, props) => + Object.values(restaurantsSelector(state)).find((rest) => + rest.menu.includes(props.product.id) + ).id; + +export const restaurantSelector = getById(restaurantsSelector); + +export const reviewsListSelector = createSelector( + reviewsSelector, + Object.values +); + export const productAmountSelector = getById(orderSelector, 0); export const productSelector = getById(productsSelector); const reviewSelector = getById(reviewsSelector);