Feature/ht5

src/components/menu/menu.js

@@ -3,12 +3,19 @@ import PropTypes from 'prop-types';
 
 import Product from '../product';
 import Basket from '../basket';
+import Loader from '../loader';
 
 import styles from './menu.module.css';
+import { connect } from 'react-redux';
+import { loadProducts } from '../../redux/actions';
+import { menuLoadedSelector, menuLoadingSelector } from '../../redux/selectors';
 
 class Menu extends Component {
   static propTypes = {
+    id: PropTypes.string.isRequired,
     menu: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
+    loading: PropTypes.bool,
+    loadProducts: PropTypes.func.isRequired,
   };
 
   state = { error: null };
@@ -17,20 +24,32 @@ class Menu extends Component {
     this.setState({ error });
   }
 
+  componentDidMount({ prevId } = {}) {
+    const { id, loading, loadProducts } = this.props;
+
+    if ((!!prevId && prevId === id) || loading) return;
+
+    loadProducts(id);
+  }
+
   render() {
-    const { menu } = this.props;
+    const { menu, loading, loaded } = this.props;
 
     if (this.state.error) {
       return <p>Меню этого ресторана сейчас недоступно :(</p>;
     }
 
+    const products = loading ? (
+      <Loader />
+    ) : !loaded ? (
+      'no data :('
+    ) : (
+      menu.map((id) => <Product key={id} id={id} />)
+    );
+
     return (
       <div className={styles.menu}>
-        <div>
-          {menu.map((id) => (
-            <Product key={id} id={id} />
-          ))}
-        </div>
+        <div>{products}</div>
         <div>
           <Basket />
         </div>
@@ -39,4 +58,13 @@ class Menu extends Component {
   }
 }
 
-export default Menu;
+const mapStateToProps = (state) => ({
+  loading: menuLoadingSelector(state),
+  loaded: menuLoadedSelector(state),
+});
+
+const mapDispathcToProps = (dispatch, props) => ({
+  loadProducts: () => dispatch(loadProducts(props.id)),
+});
+
+export default connect(mapStateToProps, mapDispathcToProps)(Menu);

src/components/product/product.js

@@ -56,6 +56,12 @@ Product.propTypes = {
   decrement: PropTypes.func,
 };
 
+Product.defaultProps = {
+  product: {
+    ingredients: [],
+  },
+};
+
 const mapStateToProps = (state, props) => ({
   amount: amountSelector(state, props),
   product: productSelector(state, props),

src/components/restaurant/restaurant.js

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import Menu from '../menu';
@@ -9,9 +9,18 @@ import Tabs from '../tabs';
 import {
   averageRatingSelector,
   restaurantSelector,
+  reviewsLoadedSelector,
+  reviewsLoadingSelector,
 } from '../../redux/selectors';
+import { loadReviews } from '../../redux/actions';
 
-const Restaurant = ({ restaurant, averageRating }) => {
+const Restaurant = ({
+  restaurant,
+  averageRating,
+  loadReviews,
+  loading,
+  loaded,
+}) => {
   const { id, name, menu, reviews } = restaurant;
 
   const [activeTab, setActiveTab] = useState('menu');
@@ -21,13 +30,17 @@ const Restaurant = ({ restaurant, averageRating }) => {
     { id: 'reviews', label: 'Reviews' },
   ];
 
+  useEffect(() => {
+    if (!loading) loadReviews(id); // eslint-disable-next-line
+  }, [id]);
+
   return (
     <div>
       <Banner heading={name}>
         <Rate value={averageRating} />
       </Banner>
       <Tabs tabs={tabs} activeId={activeTab} onChange={setActiveTab} />
-      {activeTab === 'menu' && <Menu menu={menu} key={id} />}
+      {activeTab === 'menu' && <Menu menu={menu} id={id} key={id} />}
       {activeTab === 'reviews' && <Reviews reviews={reviews} restId={id} />}
     </div>
   );
@@ -41,11 +54,19 @@ Restaurant.propTypes = {
     reviews: PropTypes.array,
   }).isRequired,
   averageRating: PropTypes.number,
+  loading: PropTypes.bool,
+  loaded: PropTypes.bool,
 };
 
 const mapStateToProps = (state, props) => ({
   restaurant: restaurantSelector(state, props),
   averageRating: averageRatingSelector(state, props),
+  loading: reviewsLoadingSelector(state),
+  loaded: reviewsLoadedSelector(state),
 });
 
-export default connect(mapStateToProps)(Restaurant);
+const mapDispatchToProps = {
+  loadReviews,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Restaurant);

src/components/reviews/review/review.js

@@ -32,6 +32,7 @@ Review.propTypes = {
 
 Review.defaultProps = {
   user: 'Anonymous',
+  rating: 0,
 };
 
 // const mapStateToProps = (state, props) => ({

src/components/reviews/reviews.js

@@ -5,18 +5,41 @@ import Review from './review';
 import ReviewForm from './review-form';
 import styles from './reviews.module.css';
 
-import { loadReviews } from '../../redux/actions';
+import Loader from '../loader';
 
-const Reviews = ({ reviews, restId, loadReviews }) => {
+import { loadUsers } from '../../redux/actions';
+import {
+  reviewsLoadedSelector,
+  reviewsLoadingSelector,
+  usersLoadedSelector,
+  usersLoadingSelector,
+} from '../../redux/selectors';
+
+const Reviews = ({
+  reviews,
+  restId,
+  loadUsers,
+  usersLoading,
+  usersLoaded,
+  reviewsLoading,
+  reviewsLoaded,
+}) => {
   useEffect(() => {
-    loadReviews(restId);
-  }, [restId, loadReviews]);
+    if (!usersLoading && !usersLoaded) loadUsers();
+  }, [usersLoading, usersLoaded, loadUsers]);
+
+  const reviewsEls =
+    reviewsLoading || usersLoading ? (
+      <Loader />
+    ) : !reviewsLoaded || !usersLoaded ? (
+      'no data :('
+    ) : (
+      reviews.map((id) => <Review key={id} id={id} />)
+    );
 
   return (
     <div className={styles.reviews}>
-      {reviews.map((id) => (
-        <Review key={id} id={id} />
-      ))}
+      {reviewsEls}
       <ReviewForm restId={restId} />
     </div>
   );
@@ -25,10 +48,22 @@ const Reviews = ({ reviews, restId, loadReviews }) => {
 Reviews.propTypes = {
   restId: PropTypes.string,
   reviews: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
+  loadUsers: PropTypes.func.isRequired,
+  usersLoading: PropTypes.bool,
+  usersLoaded: PropTypes.bool,
+  reviewsLoading: PropTypes.bool,
+  reviewsLoaded: PropTypes.bool,
 };
 
+const mapStateToProps = (state) => ({
+  usersLoading: usersLoadingSelector(state),
+  usersLoaded: usersLoadedSelector(state),
+  reviewsLoading: reviewsLoadingSelector(state),
+  reviewsLoaded: reviewsLoadedSelector(state),
+});
+
 const mapDispatchToProps = {
-  loadReviews,
+  loadUsers,
 };
 
-export default connect(null, mapDispatchToProps)(Reviews);
+export default connect(mapStateToProps, mapDispatchToProps)(Reviews);