ikashyntseva: HT6

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,7 @@ export default class App extends PureComponent {
       <div>
         <Header />
         <Switch>
-          <Route path="/" exact component={() => <h2>Home page</h2>} />
+          <Redirect exact from="/" 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

@@ -1,10 +1,13 @@
 import { connect } from 'react-redux';
 import cn from 'classnames';
 import { increment, decrement, remove } from '../../../redux/actions';
+import { Link } from 'react-router-dom';
 import Button from '../../button';
 import styles from './basket-item.module.css';
+import { restaurantsListSelector } from '../../../redux/selectors';
 
 function BasketItem({
+  restId,
   product,
   amount,
   subtotal,
@@ -15,7 +18,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}>
@@ -30,10 +33,16 @@ function BasketItem({
   );
 }
 
+const matchStateToProps = (state, props) => ({
+  restId: restaurantsListSelector(state, props).find(({ menu }) =>
+    menu.includes(props.product.id)
+  ).id,
+});
+
 const mapDispatchToProps = (dispatch, ownProps) => ({
   increment: () => dispatch(increment(ownProps.product.id)),
   decrement: () => dispatch(decrement(ownProps.product.id)),
   remove: () => dispatch(remove(ownProps.product.id)),
 });
 
-export default connect(null, mapDispatchToProps)(BasketItem);
+export default connect(matchStateToProps, mapDispatchToProps)(BasketItem);

src/components/restaurants/restaurant/restaurant.js

@@ -0,0 +1,68 @@
+import { connect } from 'react-redux';
+import { NavLink, Switch, Route, Redirect } from 'react-router-dom';
+import PropTypes from 'prop-types';
+
+import styles from '../restaurants.module.css';
+import Menu from '../../menu';
+import Reviews from '../../reviews';
+import Banner from '../../banner';
+import Rate from '../../rate';
+import {
+  averageRatingSelector,
+  restaurantSelector,
+} from '../../../redux/selectors';
+
+const Restaurant = ({ restaurant = {}, averageRating }) => {
+  const { name, menu, reviews } = restaurant;
+  const restId = restaurant.id;
+  const tabs = [
+    { id: 'menu', label: 'Menu' },
+    { id: 'reviews', label: 'Reviews' },
+  ];
+
+  return (
+    <div>
+      <Banner heading={name}>
+        <Rate value={averageRating} />
+      </Banner>
+      <div className={styles.tabs}>
+        {tabs.map(({ id, label }) => (
+          <NavLink
+            key={id}
+            to={`/restaurants/${restId}/${label.toLowerCase()}`}
+            className={styles.tab}
+            activeClassName={styles.active}
+          >
+            {label}
+          </NavLink>
+        ))}
+      </div>
+      <Switch>
+        <Route path="/restaurants/:restId/menu">
+          <Menu menu={menu} key={restId} restId={restId} />
+        </Route>
+        <Route path="/restaurants/:restId/reviews">
+          <Reviews key={restId} reviews={reviews} restId={restId} />
+        </Route>
+        <Redirect to={`/restaurants/${restId}/menu`} />
+      </Switch>
+    </div>
+  );
+};
+
+Restaurant.propTypes = {
+  restaurant: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string,
+    menu: PropTypes.array,
+    reviews: PropTypes.array,
+  }).isRequired,
+  averageRating: PropTypes.number,
+};
+
+const mapStateToProps = (state, props) => ({
+  restaurant: restaurantSelector(state, props),
+  averageRating: averageRatingSelector(state, props),
+});
+
+export default connect(mapStateToProps)(Restaurant);

src/components/restaurants/restaurants.js

@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import { connect } from 'react-redux';
 import { NavLink, Switch, Route, Redirect } from 'react-router-dom';
 import PropTypes from 'prop-types';
-import Restaurant from '../restaurant';
+import Restaurant from './restaurant';
 import Loader from '../loader';
 import {
   restaurantsListSelector,
@@ -37,7 +37,13 @@ function Restaurants({ restaurants, loading, loaded, loadRestaurants }) {
       </div>
       <Switch>
         <Route path="/restaurants/:restId">
-          {({ match }) => <Restaurant id={match.params.restId} />}
+          {({ match }) =>
+            restaurants.find(({ id }) => id === match.params.restId) ? (
+              <Restaurant id={match.params.restId} />
+            ) : (
+              <h2>404 Not found</h2>
+            )
+          }
         </Route>
         <Redirect to={`/restaurants/${restaurants[0]?.id}`} />
       </Switch>

src/redux/selectors.js

@@ -66,9 +66,11 @@ export const averageRatingSelector = createSelector(
   reviewsSelector,
   restaurantSelector,
   (reviews, restaurant) => {
-    const ratings = restaurant.reviews.map((id) => reviews[id]?.rating || 0);
-    return Math.round(
-      ratings.reduce((acc, rating) => acc + rating, 0) / ratings.length
-    );
+    const ratings = restaurant?.reviews.map((id) => reviews[id]?.rating || 0);
+    return ratings
+      ? Math.round(
+          ratings.reduce((acc, rating) => acc + rating, 0) / ratings.length
+        )
+      : null;
   }
 );