HT5

src/components/menu/menu.js

@@ -1,17 +1,45 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import Product from '../product';
 import Basket from '../basket';
 
+import { loadProducts } from '../../redux/actions';
+import {
+  productsListSelector,
+  productsLoadedSelector,
+  productsLoadingSelector,
+} from '../../redux/selectors';
+
 import styles from './menu.module.css';
+import Loader from '../loader';
 
 class Menu extends React.Component {
   static propTypes = {
-    menu: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
+    menu: PropTypes.arrayOf(
+      PropTypes.shape({
+        id: PropTypes.string.isRequired,
+        ingredients: PropTypes.arrayOf(PropTypes.string),
+        name: PropTypes.string,
+        price: PropTypes.number,
+      }).isRequired
+    ).isRequired,
   };
 
   state = { error: null };
 
+  componentDidMount() {
+    if (!this.props.loading && !this.props.loaded) {
+      this.props.loadProducts(this.props.restaurantId);
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.restaurantId !== prevProps.restaurantId) {
+      this.props.loadProducts(this.props.restaurantId);
+    }
+  }
+
   componentDidCatch(error) {
     this.setState({ error });
   }
@@ -23,11 +51,13 @@ class Menu extends React.Component {
       return <p>В этом ресторане меню не доступно</p>;
     }
 
+    if (this.props.loading || !this.props.loaded) return <Loader />;
+
     return (
       <div className={styles.menu}>
         <div>
-          {menu.map((id) => (
-            <Product key={id} id={id} />
+          {menu.map((product) => (
+            <Product key={product.id} id={product.id} />
           ))}
         </div>
         <div>
@@ -38,4 +68,11 @@ class Menu extends React.Component {
   }
 }
 
-export default Menu;
+export default connect(
+  (state) => ({
+    menu: productsListSelector(state),
+    loading: productsLoadingSelector(state),
+    loaded: productsLoadedSelector(state),
+  }),
+  { loadProducts }
+)(Menu);

src/components/restaurant/restaurant.js

@@ -11,7 +11,7 @@ import { averageRatingSelector } from '../../redux/selectors';
 const Restaurant = ({ restaurant, averageRating }) => {
   const { id, name, menu, reviews } = restaurant;
   const tabs = [
-    { title: 'Menu', content: <Menu menu={menu} /> },
+    { title: 'Menu', content: <Menu menu={menu} restaurantId={id} /> },
     {
       title: 'Reviews',
       content: <Reviews reviews={reviews} restaurantId={id} />,
@@ -20,9 +20,7 @@ const Restaurant = ({ restaurant, averageRating }) => {
 
   return (
     <div>
-      <Banner heading={name}>
-        <Rate value={averageRating} />
-      </Banner>
+      <Banner heading={name}>{/* <Rate value={averageRating} /> */}</Banner>
       <Tabs tabs={tabs} />
     </div>
   );
@@ -39,5 +37,5 @@ Restaurant.propTypes = {
 };
 
 export default connect((state, props) => ({
-  averageRating: averageRatingSelector(state, props),
+  // averageRating: averageRatingSelector(state, props),
 }))(Restaurant);

src/components/reviews/reviews.js

@@ -5,17 +5,38 @@ import Review from './review';
 import ReviewForm from './review-form';
 import styles from './reviews.module.css';
 
-import { loadReviews } from '../../redux/actions';
+import { loadReviews, loadUsers } from '../../redux/actions';
+import {
+  usersListSelector,
+  usersLoadingSelector,
+  usersLoadedSelector,
+  reviewsListSelector,
+  reviewsLoadingSelector,
+  reviewsLoadedSelector,
+} from '../../redux/selectors';
+import Loader from '../loader';
 
-const Reviews = ({ reviews, restaurantId, loadReviews }) => {
+const Reviews = ({
+  reviews,
+  restaurantId,
+  loadReviews,
+  loadUsers,
+  loading,
+  loaded,
+}) => {
   useEffect(() => {
-    loadReviews(restaurantId);
-  }, [loadReviews, restaurantId]);
+    loadUsers();
+    if (!loading && !loaded) {
+      loadReviews(restaurantId);
+    }
+  }, [loading, loaded, loadUsers, loadReviews, restaurantId]);
+
+  if (loading || !loaded) return <Loader />;
 
   return (
     <div className={styles.reviews}>
-      {reviews.map((id) => (
-        <Review key={id} id={id} />
+      {reviews.map((review) => (
+        <Review key={review.id} id={review.id} />
       ))}
       <ReviewForm restaurantId={restaurantId} />
     </div>
@@ -24,7 +45,19 @@ const Reviews = ({ reviews, restaurantId, loadReviews }) => {
 
 Reviews.propTypes = {
   restaurantId: PropTypes.string.isRequired,
-  reviews: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
+  reviews: PropTypes.arrayOf(PropTypes.object.isRequired).isRequired,
 };
 
-export default connect(null, { loadReviews })(Reviews);
+export default connect(
+  ((state) => ({
+    users: usersListSelector(state),
+    loading: usersLoadingSelector(state),
+    loaded: usersLoadedSelector(state),
+  }),
+  (state) => ({
+    reviews: reviewsListSelector(state),
+    loading: reviewsLoadingSelector(state),
+    loaded: reviewsLoadedSelector(state),
+  })),
+  { loadReviews, loadUsers }
+)(Reviews);