Homework 6

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

@@ -4,19 +4,21 @@ import cn from 'classnames';
 import { increment, decrement, remove } from '../../../redux/actions';
 import Button from '../../button';
 import styles from './basket-item.module.css';
+import { Link } from 'react-router-dom';
 
 function BasketItem({
   product,
   amount,
   subtotal,
+  restaurantId,
   increment,
   decrement,
   remove,
 }) {
   return (
     <div className={styles.basketItem}>
       <div className={styles.name}>
-        <span>{product.name}</span>
+        <Link to={`/restaurants/${restaurantId}`}>{product.name}</Link>
       </div>
       <div className={styles.info}>
         <div className={styles.counter}>

src/components/basket/basket.js

@@ -21,12 +21,13 @@ 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 }) => (
         <BasketItem
           product={product}
           amount={amount}
           key={product.id}
           subtotal={subtotal}
+          restaurantId={restaurantId}
         />
       ))}
       <hr className={styles.hr} />

src/components/restaurant/restaurant.js

@@ -7,24 +7,50 @@ 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 { NavLink, Route, Switch, useRouteMatch } from 'react-router-dom';
+
+import styles from './restaurant.module.css';
 
 const Restaurant = ({ id, name, menu, reviews, averageRating }) => {
-  const tabs = [
-    { title: 'Menu', content: <Menu menu={menu} restaurantId={id} /> },
-    {
-      title: 'Reviews',
-      content: <Reviews reviews={reviews} restaurantId={id} />,
-    },
-  ];
+  const match = useRouteMatch();
+  const menuUrl = `${match.url}/menu`;
+  const reviewsUrl = `${match.url}/reviews`;
+  console.log(match);
 
   return (
     <div>
       <Banner heading={name}>
         {!!averageRating && <Rate value={averageRating} />}
       </Banner>
-      <Tabs tabs={tabs} />
+      <div className={styles.tabs}>
+        <NavLink
+          key={'menu'}
+          to={menuUrl}
+          className={styles.tab}
+          activeClassName={styles.active}
+        >
+          Menu
+        </NavLink>
+        <NavLink
+          key={'reviews'}
+          to={reviewsUrl}
+          className={styles.tab}
+          activeClassName={styles.active}
+        >
+          Reviews
+        </NavLink>
+      </div>
+      <Switch>
+        <Route
+          path={`${match.path}/menu`}
+          render={() => <Menu menu={menu} restaurantId={id} />}
+        />
+        <Route
+          path={`${match.path}/reviews`}
+          render={() => <Reviews reviews={reviews} restaurantId={id} />}
+        />
+      </Switch>
     </div>
   );
 };

src/components/restaurants/restaurants.js

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