HT-6: add routing

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

@@ -1,11 +1,15 @@
 import React from 'react';
 import { connect } from 'react-redux';
+import { Link } from 'react-router-dom';
+import { createStructuredSelector } from 'reselect';
 import cn from 'classnames';
+import { productRestaurantSelector } from '../../../redux/selectors';
 import { increment, decrement, remove } from '../../../redux/actions';
 import Button from '../../button';
 import styles from './basket-item.module.css';
 
 function BasketItem({
+  restaurant,
   product,
   amount,
   subtotal,
@@ -16,7 +20,9 @@ function BasketItem({
   return (
     <div className={styles.basketItem}>
       <div className={styles.name}>
-        <span>{product.name}</span>
+        <Link to={`/restaurants/${restaurant.id}`}>
+          <span>{product.name}</span>
+        </Link>
       </div>
       <div className={styles.info}>
         <div className={styles.counter}>
@@ -46,4 +52,9 @@ function BasketItem({
   );
 }
 
-export default connect(null, { increment, decrement, remove })(BasketItem);
+export default connect(
+  createStructuredSelector({
+    restaurant: productRestaurantSelector
+  }),
+  { increment, decrement, remove })
+(BasketItem);

src/components/basket/basket.js

@@ -23,6 +23,7 @@ function Basket({ title = 'Basket', total, orderProducts }) {
       <h4 className={styles.title}>{title}</h4>
       {orderProducts.map(({ product, amount, subtotal }) => (
         <BasketItem
+          id={product.id}
           product={product}
           amount={amount}
           key={product.id}

src/components/restaurant/restaurant.js

@@ -1,30 +1,47 @@
 import React from 'react';
 import { connect } from 'react-redux';
+import { Route, NavLink } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { createStructuredSelector } from 'reselect';
 
 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';
 
-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} />,
-    },
-  ];
+import styles from './restaurant.module.css';
 
+const Restaurant = ({ id, name, menu, reviews, averageRating }) => {
   return (
     <div>
       <Banner heading={name}>
         {!!averageRating && <Rate value={averageRating} />}
       </Banner>
-      <Tabs tabs={tabs} />
+
+      <div className={styles.tabs}>
+        <NavLink
+          exact
+          to={`/restaurants/${id}`}
+          className={styles.tab}
+          activeClassName={styles.active}>
+          Menu
+        </NavLink>
+        <NavLink
+          to={`/restaurants/${id}/reviews`}
+          className={styles.tab}
+          activeClassName={styles.active}>
+          Reviews
+        </NavLink>
+      </div>
+
+      <Route exact path="/restaurants/:id">
+        <Menu menu={menu} restaurantId={id} />
+      </Route>
+
+      <Route path="/restaurants/:id/reviews">
+        <Reviews reviews={reviews} restaurantId={id} />
+      </Route>
     </div>
   );
 };

src/components/restaurant/restaurant.module.css

@@ -0,0 +1,20 @@
+.tabs {
+    height: auto;
+    text-align: center;
+    padding: 12px;
+    background-color: var(--grey);
+}
+
+.tabs span {
+    cursor: pointer;
+}
+
+.tab {
+    padding: 4px 12px;
+    color: var(--black);
+    text-decoration: none;
+}
+
+.tab.active {
+    border-bottom: 1px solid var(--black);
+}

src/redux/reducer/products.js

@@ -1,5 +1,4 @@
 import produce from 'immer';
-import { arrToMap } from '../utils';
 import { LOAD_PRODUCTS, REQUEST, SUCCESS, FAILURE } from '../constants';
 
 const initialState = {
@@ -22,7 +21,15 @@ const reducer = (state = initialState, action) =>
         draft.loading[restaurantId] = false;
         draft.loaded[restaurantId] = true;
         draft.error = null;
-        draft.entities = { ...draft.entities, ...arrToMap(response) };
+        draft.entities = {
+          ...draft.entities,
+          ...response.reduce(
+            (products, product) => ({
+              ...products,
+              [product.id]: {restaurantId, ...product }
+            }),
+            {})
+        };
         break;
       }
       case LOAD_PRODUCTS + FAILURE: {

src/redux/selectors.js

@@ -72,3 +72,9 @@ export const averageRatingSelector = createSelector(
     );
   }
 );
+
+export const productRestaurantSelector = createSelector(
+  restaurantsSelector,
+  productSelector,
+  (restaurants, product) => restaurants[product.restaurantId]
+);