HT-6 Kostenevich

src/components/app/app.js

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

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

@@ -3,6 +3,8 @@ import cn from 'classnames';
 import { increment, decrement, remove } from '../../../redux/actions';
 import Button from '../../button';
 import styles from './basket-item.module.css';
+import { restaurantByProductIdSelector } from '../../../redux/selectors';
+import { Link } from 'react-router-dom';
 
 function BasketItem({
   product,
@@ -11,11 +13,12 @@ function BasketItem({
   increment,
   decrement,
   remove,
+  restId,
 }) {
   return (
     <div className={styles.basketItem}>
       <div className={styles.name}>
-        <span>{product.name}</span>
+        <Link to={`/restaurants/${restId}/menu`}>{product.name}</Link>
       </div>
       <div className={styles.info}>
         <div className={styles.counter}>
@@ -36,4 +39,8 @@ const mapDispatchToProps = (dispatch, ownProps) => ({
   remove: () => dispatch(remove(ownProps.product.id)),
 });
 
-export default connect(null, mapDispatchToProps)(BasketItem);
+const mapStateToProps = (state, ownProps) => ({
+  restId: restaurantByProductIdSelector(state, ownProps),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(BasketItem);

src/components/restaurant/restaurant.js

@@ -1,34 +1,59 @@
-import { useState } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import Menu from '../menu';
 import Reviews from '../reviews';
 import Banner from '../banner';
 import Rate from '../rate';
-import Tabs from '../tabs';
 import {
   averageRatingSelector,
   restaurantSelector,
 } from '../../redux/selectors';
+import styles from './restaurant.module.css';
+import { NavLink, Switch, Route, Redirect } from 'react-router-dom';
 
 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', label: 'Menu', restId: id },
+    { id: 'reviews', label: 'Reviews', restId: id },
   ];
 
   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} />}
+
+      <div className={styles.tabs}>
+        {tabs.map(({ id, label, restId }) => (
+          <NavLink
+            key={id}
+            to={`/restaurants/${restId}/${id}`}
+            className={styles.tab}
+            activeClassName={styles.active}
+          >
+            {label}
+          </NavLink>
+        ))}
+      </div>
+      <Switch>
+        <Route path="/restaurants/:restId/:id">
+          {({ match }) => {
+            console.log(match.params);
+
+            switch (match.params.id) {
+              case 'menu':
+                return <Menu menu={menu} key={id} restId={id} />;
+              case 'reviews':
+                return <Reviews reviews={reviews} restId={id} />;
+              default:
+                return 'no data((';
+            }
+          }}
+        </Route>
+        <Redirect to={`/restaurants/:restId/menu`} />
+      </Switch>
     </div>
   );
 };

src/components/restaurant/restaurant.module.css

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

src/components/restaurants/restaurants.js

@@ -39,7 +39,7 @@ function Restaurants({ restaurants, loading, loaded, loadRestaurants }) {
         <Route path="/restaurants/:restId">
           {({ match }) => <Restaurant id={match.params.restId} />}
         </Route>
-        <Redirect to={`/restaurants/${restaurants[0]?.id}`} />
+        <Redirect to={`/restaurants/${restaurants[0]?.id}/menu`} />
       </Switch>
     </div>
   );

src/redux/selectors.js

@@ -72,3 +72,13 @@ export const averageRatingSelector = createSelector(
     );
   }
 );
+
+export const restaurantByProductIdSelector = createSelector(
+  [restaurantsSelector, (state, ownProps) => ownProps.product.id],
+  (restaurants, id) => {
+    const restaurant = Object.values(restaurants).find((restaurant) =>
+      restaurant.menu.find((value) => value === id)
+    );
+    return restaurant.id;
+  }
+);