HW-6

src/components/app/app.js

@@ -1,5 +1,5 @@
 import { PureComponent } from 'react';
-import { Route, Switch } from 'react-router-dom';
+import { Redirect, Route, Switch } from 'react-router-dom';
 import Restaurants from '../restaurants';
 import Header from '../header';
 import Basket from '../basket';
@@ -10,7 +10,9 @@ export default class App extends PureComponent {
       <div>
         <Header />
         <Switch>
-          <Route path="/" exact component={() => <h2>Home Page!</h2>} />
+          <Route path="/" exact>
+            <Redirect to="/restaurants" />
+          </Route>
           <Route path="/checkout" component={Basket} />
           <Route path="/restaurants" component={Restaurants} />
           <Route path="/" component={() => <h2>404 - Page Not Found :(</h2>} />

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

@@ -1,11 +1,13 @@
 import { connect } from 'react-redux';
+import { Link } 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,
+  restId,
   amount,
   subtotal,
   increment,
@@ -15,7 +17,7 @@ function BasketItem({
   return (
     <div className={styles.basketItem}>
       <div className={styles.name}>
-        <span>{product.name}</span>
+        <Link to={`/restaurants/${restId}`}>{product.name}</Link>
       </div>
       <div className={styles.info}>
         <div className={styles.counter}>

src/components/basket/basket.js

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

src/components/restaurant/restaurant.js

@@ -1,6 +1,8 @@
 import { useState } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
+import { Switch, Route, NavLink, Redirect } from 'react-router-dom';
+
 import Menu from '../menu';
 import Reviews from '../reviews';
 import Banner from '../banner';
@@ -14,21 +16,28 @@ import {
 const Restaurant = ({ restaurant, averageRating }) => {
   const { id, name, menu, reviews } = restaurant;
 
-  const [activeTab, setActiveTab] = useState('menu');
-
   const tabs = [
-    { id: 'menu', label: 'Menu' },
-    { id: 'reviews', label: 'Reviews' },
+    { id: 'menu', name: 'Menu' },
+    { id: 'reviews', name: 'Reviews' },
   ];
 
   return (
     <div>
       <Banner heading={name}>
         <Rate value={averageRating} />
       </Banner>
-      <Tabs tabs={tabs} activeId={activeTab} onChange={setActiveTab} />
-      {activeTab === 'menu' && <Menu menu={menu} key={id} restId={id} />}
-      {activeTab === 'reviews' && <Reviews reviews={reviews} restId={id} />}
+
+      <Tabs tabs={tabs} prefix={`/restaurants/${id}`} />
+
+      <Switch>
+        <Route path="/restaurants/:id/menu">
+          <Menu menu={menu} key={id} restId={id} />
+        </Route>
+        <Route path="/restaurants/:id/reviews">
+          <Reviews reviews={reviews} restId={id} />
+        </Route>
+        <Redirect to={`/restaurants/${id}/menu`} />
+      </Switch>
     </div>
   );
 };

src/components/restaurants/restaurants.js

@@ -10,8 +10,8 @@ import {
   restaurantsLoadedSelector,
 } from '../../redux/selectors';
 import { loadRestaurants } from '../../redux/actions';
+import Tabs from '../tabs';
 
-import styles from './restaurants.module.css';
 function Restaurants({ restaurants, loading, loaded, loadRestaurants }) {
   useEffect(() => {
     if (!loading && !loaded) loadRestaurants();
@@ -22,18 +22,7 @@ function Restaurants({ restaurants, loading, loaded, loadRestaurants }) {
 
   return (
     <div>
-      <div className={styles.tabs}>
-        {restaurants.map(({ id, name }) => (
-          <NavLink
-            key={id}
-            to={`/restaurants/${id}`}
-            className={styles.tab}
-            activeClassName={styles.active}
-          >
-            {name}
-          </NavLink>
-        ))}
-      </div>
+      <Tabs tabs={restaurants} prefix="/restaurants" />
       <Switch>
         <Route path="/restaurants/:restId">
           {({ match }) => <Restaurant id={match.params.restId} />}

src/components/tabs/tabs.js

@@ -1,33 +1,37 @@
 import PropTypes from 'prop-types';
-import cn from 'classnames';
+import { NavLink } from 'react-router-dom';
 
 import styles from './tabs.module.css';
 
-function Tabs({ tabs, activeId, onChange }) {
+function Tabs({ tabs, prefix }) {
   return (
     <div className={styles.tabs}>
-      {tabs.map(({ id, label }) => (
-        <span
+      {tabs.map(({ id, name }) => (
+        <NavLink
           key={id}
-          className={cn(styles.tab, { [styles.active]: id === activeId })}
-          onClick={() => onChange(id)}
+          to={`${prefix}/${id}`}
+          className={styles.tab}
+          activeClassName={styles.active}
         >
-          {label}
-        </span>
+          {name}
+        </NavLink>
       ))}
     </div>
   );
 }
 
+Tabs.defaultProps = {
+  prefix: '',
+};
+
 Tabs.propTypes = {
   tabs: PropTypes.arrayOf(
     PropTypes.shape({
       id: PropTypes.string.isRequired,
       label: PropTypes.string,
     }).isRequired
   ).isRequired,
-  activeId: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
+  prefix: PropTypes.string,
 };
 
 export default Tabs;

src/redux/selectors.js

@@ -33,14 +33,29 @@ export const restaurantSelector = (state, { id }) =>
 export const productSelector = (state, { id }) => productsSelector(state)[id];
 export const reviewSelector = (state, { id }) => reviewsSelector(state)[id];
 export const amountSelector = (state, { id }) => orderSelector(state)[id] || 0;
+
+const productToRestaurantMapSelector = createSelector(
+  [restaurantsListSelector],
+  (restaurants) => {
+    const map = new Map();
+    restaurants.forEach((restaurant) => {
+      restaurant.menu.forEach((product) => {
+        map.set(product.id, restaurant.id);
+      });
+    });
+    return map;
+  }
+);
+
 export const orderProductsSelector = createSelector(
-  [productsSelector, orderSelector],
-  (products, order) =>
+  [productsSelector, orderSelector, productToRestaurantMapSelector],
+  (products, order, productToRestaurantMap) =>
     Object.keys(order)
       .filter((productId) => order[productId] > 0)
       .map((productId) => products[productId])
       .map((product) => ({
         product,
+        restId: productToRestaurantMap.get(product.id),
         amount: order[product.id],
         subtotal: order[product.id] * product.price,
       }))