HT6

README.md

@@ -47,3 +47,8 @@
 5. При загрузках показывать лоадеры, все грузить максимально низко, там где эти данные нужны
 6. Все данные грузить только один раз (не загружать повторно данные, которые уже есть)
 7. (Опционально) переписать все на **immer**
+
+# HT6
+
+1. Сделать reviews/menu отдельными роутами (/restaurant/:id/reviews)
+2. В корзине сделать продукты линками на их ресторан

src/components/basket/basket.js

@@ -21,13 +21,15 @@ function Basket({ title = 'Basket', total, orderProducts }) {
   return (
     <div className={styles.basket}>
       <h4 className={styles.title}>{title}</h4>
-      {orderProducts.map(({ product, amount, subtotal }) => (
+      {orderProducts.map(({ product, amount, subtotal, restaurantId }) => (
+        <Link to={`/restaurants/${restaurantId}/menu`} >
         <BasketItem
           product={product}
           amount={amount}
           key={product.id}
           subtotal={subtotal}
         />
+        </Link>
       ))}
       <hr className={styles.hr} />
       <div className={itemStyles.basketItem}>

src/components/restaurant/restaurant.js

@@ -2,30 +2,33 @@ import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { createStructuredSelector } from 'reselect';
+import {Route, NavLink} from 'react-router-dom';
 
 import Menu from '../menu';
 import Reviews from '../reviews';
 import Banner from '../banner';
 import Rate from '../rate';
-import Tabs from '../tabs';
 import { averageRatingSelector } from '../../redux/selectors';
+import styles from './restaurant.module.css';
 
 const Restaurant = ({ restaurant, averageRating }) => {
   const { id, name, menu, reviews } = restaurant;
-  const tabs = [
-    { title: 'Menu', content: <Menu menu={menu} restaurantId={id} /> },
-    {
-      title: 'Reviews',
-      content: <Reviews reviews={reviews} restaurantId={id} />,
-    },
-  ];
 
   return (
     <div>
       <Banner heading={name}>
         {!!averageRating && <Rate value={averageRating} />}
       </Banner>
-      <Tabs tabs={tabs} />
+      <div className={styles.nav}>
+        <NavLink to={`/restaurants/${id}/menu`} activeClassName={styles.active} className={styles.item}>Menu</NavLink>
+        <NavLink to={`/restaurants/${id}/reviews`} activeClassName={styles.active} className={styles.item}>Reviews</NavLink>
+      </div>
+      <Route path="/restaurants/:restId/menu">
+        <Menu menu={menu} restaurantId={id} />
+      </Route>
+      <Route path="/restaurants/:restId/reviews">
+        <Reviews reviews={reviews} restaurantId={id} />
+      </Route>
     </div>
   );
 };

src/components/restaurant/restaurant.module.css

@@ -0,0 +1,14 @@
+.nav {
+    height: auto;
+    text-align: center;
+    padding: 12px;
+    background-color: var(--grey);
+}
+
+.item {
+    padding: 4px 12px;
+}
+
+.item.active {
+    border-bottom: 1px solid var(--black);
+}

src/components/restaurants/restaurants.js

@@ -19,7 +19,7 @@ const Restaurants = ({ restaurants, match }) => {
           <NavLink
             key={id}
             className={styles.tab}
-            to={`/restaurants/${id}`}
+            to={`/restaurants/${id}/menu`}
             activeClassName={styles.active}
           >
             {name}

src/redux/selectors.js

@@ -35,7 +35,8 @@ const reviewSelector = getById(reviewsSelector);
 export const orderProductsSelector = createSelector(
   productsSelector,
   orderSelector,
-  (products, order) =>
+  restaurantsListSelector,
+  (products, order, restaurants) =>
     Object.keys(order)
       .filter((productId) => order[productId] > 0)
       .map((productId) => products[productId])
@@ -44,6 +45,15 @@ export const orderProductsSelector = createSelector(
         amount: order[product.id],
         subtotal: order[product.id] * product.price,
       }))
+      .map((orderProduct) => {
+        const restaurant = restaurants.find(restaurant =>
+          undefined !== restaurant.menu.find(item => item === orderProduct.product.id)
+        )
+        return {
+          ...orderProduct,
+          restaurantId: restaurant.id,
+        }
+      })
 );
 
 export const totalSelector = createSelector(