Ht6

src/pages/enum.js

@@ -0,0 +1,6 @@
+const TABS_ENUM = {
+  MENU: 'menu',
+  REVIEWS: 'reviews',
+};
+
+export default TABS_ENUM;

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 <Menu menu={menu} restaurantId={restId} />;
+    case TABS_ENUM.REVIEWS:
+      return <Reviews reviews={reviews} restaurantId={restId} />;
+    default:
+      return <Restaurants restaurants={restaurants} match={match} />;
+  }
+};
+
+RestaurantPage.propTypes = {
+  restaurants: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string.isRequired,
+    }).isRequired
+  ).isRequired,
+};
+
+export default connect(
+  createStructuredSelector({
+    restaurants: restaurantsListSelector,
+  })
+)(RestaurantPage);

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 <Route path="/restaurants/:restId" component={Restaurants} />;
+  return (
+    <Switch>
+      <Route path="/restaurants/:restId" exact component={Restaurants} />;
+      <Route path="/restaurants/:restId/:tab" component={RestaurantPage} />;
+    </Switch>
+  );
 }
 
 export default connect(

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);