HT6

README.md

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

src/components/basket/basket-item/basket-item.js

@@ -1,12 +1,14 @@
 import React from 'react';
 import { connect } from 'react-redux';
+import { NavLink } from 'react-router-dom';
 import cn from 'classnames';
 import { increment, decrement, remove } from '../../../redux/actions';
 import Button from '../../button';
 import styles from './basket-item.module.css';
 
 function BasketItem({
   product,
+  restaurant,
   amount,
   subtotal,
   increment,
@@ -16,7 +18,13 @@ function BasketItem({
   return (
     <div className={styles.basketItem}>
       <div className={styles.name}>
-        <span>{product.name}</span>
+        <NavLink
+          exact
+          to={`/restaurants/${restaurant}`}
+          activeClassName={styles.active}
+        >
+          {product.name}
+        </NavLink>
       </div>
       <div className={styles.info}>
         <div className={styles.counter}>

src/components/basket/basket-item/basket-item.module.css

@@ -60,6 +60,15 @@
   display: inline-block;
   text-decoration: none;
   color: var(--black);
+  transition: transform 150ms ease-out 0s;
+}
+
+.name > a:hover {
+  transform: translateY(-1px);
+}
+
+.active {
+  font-weight: bold;
 }
 
 .info {

src/components/basket/basket.js

@@ -21,9 +21,10 @@ 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, restaurant, amount, subtotal }) => (
         <BasketItem
           product={product}
+          restaurant={restaurant}
           amount={amount}
           key={product.id}
           subtotal={subtotal}

src/components/restaurant/restaurant.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { createStructuredSelector } from 'reselect';
+import { Route, Switch } from 'react-router-dom';
 
 import Menu from '../menu';
 import Reviews from '../reviews';
@@ -13,10 +14,15 @@ import { averageRatingSelector } from '../../redux/selectors';
 const Restaurant = ({ restaurant, averageRating }) => {
   const { id, name, menu, reviews } = restaurant;
   const tabs = [
-    { title: 'Menu', content: <Menu menu={menu} restaurantId={id} /> },
+    {
+      title: 'Menu',
+      target: `/restaurants/${id}`,
+      exact: true,
+    },
     {
       title: 'Reviews',
-      content: <Reviews reviews={reviews} restaurantId={id} />,
+      target: `/restaurants/${id}/reviews`,
+      exact: true,
     },
   ];
 
@@ -26,6 +32,22 @@ const Restaurant = ({ restaurant, averageRating }) => {
         {!!averageRating && <Rate value={averageRating} />}
       </Banner>
       <Tabs tabs={tabs} />
+      <Switch>
+        <Route
+          exact
+          path={`/restaurants/${id}/reviews`}
+          render={(props) => (
+            <Reviews {...props} reviews={reviews} restaurantId={id} />
+          )}
+        />
+        <Route
+          exact
+          path={`/restaurants/${id}`}
+          render={(props) => (
+            <Menu {...props} menu={menu} restaurantId={id} />
+          )}
+        />
+      </Switch>
     </div>
   );
 };

src/components/restaurants/restaurants.js

@@ -1,31 +1,23 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { NavLink } from 'react-router-dom';
 import { createStructuredSelector } from 'reselect';
 import PropTypes from 'prop-types';
+import Tabs from '../tabs';
 import Restaurant from '../restaurant';
 import { restaurantsListSelector } from '../../redux/selectors';
 
-import styles from './restaurants.module.css';
-
 const Restaurants = ({ restaurants, match }) => {
   const { restId } = match.params;
   const restaurant = restaurants.find((restaurant) => restaurant.id === restId);
 
+  const tabs = restaurants.map(({ id, name }) => ({
+    title: name,
+    target: `/restaurants/${id}`,
+  }))
+
   return (
     <>
-      <div className={styles.tabs}>
-        {restaurants.map(({ id, name }, index) => (
-          <NavLink
-            key={id}
-            className={styles.tab}
-            to={`/restaurants/${id}`}
-            activeClassName={styles.active}
-          >
-            {name}
-          </NavLink>
-        ))}
-      </div>
+      <Tabs tabs={tabs} />
       <Restaurant restaurant={restaurant} />
     </>
   );

src/components/tabs/tabs.js

@@ -1,28 +1,27 @@
-import React, { useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import cn from 'classnames';
+import { NavLink } from 'react-router-dom';
 
 import styles from './tabs.module.css';
 
 const Tabs = ({ tabs }) => {
-  const [activeTab, setActiveTab] = useState(0);
-
-  const { content } = tabs[activeTab];
 
   return (
     <>
       <div className={styles.tabs}>
-        {tabs.map(({ title }, index) => (
-          <span
-            key={title}
-            className={cn(styles.tab, { [styles.active]: index === activeTab })}
-            onClick={() => setActiveTab(index)}
+        {tabs.map(({ target, title, exact, ...props }, index) => (
+          <NavLink
+            exact={exact}
+            key={index}
+            to={target}
+            className={styles.tab}
+            activeClassName={styles.active}
           >
             {title}
-          </span>
+          </NavLink>
         ))}
       </div>
-      {content}
+
     </>
   );
 };
@@ -31,7 +30,8 @@ Tabs.propTypes = {
   tabs: PropTypes.arrayOf(
     PropTypes.shape({
       title: PropTypes.string.isRequired,
-      content: PropTypes.element.isRequired,
+      target: PropTypes.string.isRequired,
+      exact: PropTypes.bool,
     }).isRequired
   ).isRequired,
 };

src/components/tabs/tabs.module.css

@@ -11,6 +11,7 @@
 
 .tab {
   padding: 4px 12px;
+  color: var(--black);
 }
 
 .tab.active {

src/redux/selectors.js

@@ -32,15 +32,31 @@ export const productAmountSelector = getById(orderSelector, 0);
 export const productSelector = getById(productsSelector);
 const reviewSelector = getById(reviewsSelector);
 
+const productsWithRestaurantIdSelector = createSelector(
+  restaurantsListSelector,
+  (restaurants) =>
+    restaurants.reduce((acc, restaurant) =>
+    ({
+      ...acc,
+      ...restaurant.menu.reduce((acc, product) =>
+      ({
+        ...acc,
+        [product]: restaurant.id
+      }), {})
+    }), {})
+);
+
 export const orderProductsSelector = createSelector(
   productsSelector,
   orderSelector,
-  (products, order) =>
+  productsWithRestaurantIdSelector,
+  (products, order, restaurants) =>
     Object.keys(order)
       .filter((productId) => order[productId] > 0)
       .map((productId) => products[productId])
       .map((product) => ({
         product,
+        restaurant: restaurants[product.id],
         amount: order[product.id],
         subtotal: order[product.id] * product.price,
       }))