ikashyntseva: Ht5

src/components/menu/menu.js

@@ -1,10 +1,20 @@
 import { Component } from 'react';
+import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 
 import Product from '../product';
 import Basket from '../basket';
+import Loader from '../loader/loader';
+
+import {
+  activeIdRestaurantSelector,
+  productsListSelector,
+  productsLoadingSelector,
+  productsLoadedSelector,
+} from '../../redux/selectors';
 
 import styles from './menu.module.css';
+import { loadProducts } from '../../redux/actions';
 
 class Menu extends Component {
   static propTypes = {
@@ -13,21 +23,29 @@ class Menu extends Component {
 
   state = { error: null };
 
+  componentDidMount() {
+    if (!this.props.loading && !this.props.loaded)
+      this.props.loadProducts(this.props.activeId);
+  }
+
   componentDidCatch(error) {
     this.setState({ error });
   }
 
   render() {
-    const { menu } = this.props;
+    const { products, loaded, loading } = this.props;
 
     if (this.state.error) {
       return <p>Меню этого ресторана сейчас недоступно :(</p>;
     }
 
+    if (loading) return <Loader />;
+    if (!loaded) return 'No data :(';
+
     return (
       <div className={styles.menu}>
         <div>
-          {menu.map((id) => (
+          {products.map(({ id }) => (
             <Product key={id} id={id} />
           ))}
         </div>
@@ -39,4 +57,15 @@ class Menu extends Component {
   }
 }
 
-export default Menu;
+const mapStateToProps = (state, props) => ({
+  activeId: activeIdRestaurantSelector(state, props),
+  products: productsListSelector(state, props),
+  loading: productsLoadingSelector(state, props),
+  loaded: productsLoadedSelector(state, props),
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  loadProducts: (id) => dispatch(loadProducts(id)),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(Menu);

src/components/restaurant/restaurant.js

@@ -1,18 +1,30 @@
-import { useState } from 'react';
+import { useState, useEffect } 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 Loader from '../loader/loader';
 import {
+  reviewsListSelector,
+  reviewsLoadingSelector,
+  reviewsLoadedSelector,
   averageRatingSelector,
   restaurantSelector,
 } from '../../redux/selectors';
+import { loadReviews } from '../../redux/actions';
 
-const Restaurant = ({ restaurant, averageRating }) => {
-  const { id, name, menu, reviews } = restaurant;
+const Restaurant = ({
+  restaurant,
+  reviews,
+  averageRating,
+  loading,
+  loaded,
+  loadReviews,
+}) => {
+  const { id, name } = restaurant;
 
   const [activeTab, setActiveTab] = useState('menu');
 
@@ -21,13 +33,20 @@ const Restaurant = ({ restaurant, averageRating }) => {
     { id: 'reviews', label: 'Reviews' },
   ];
 
+  useEffect(() => {
+    if (!loading && !loaded) loadReviews(id);
+  }, [id, loading, loaded, loadReviews]);
+
+  if (loading) return <Loader />;
+  if (!loaded) return 'No data :(';
+
   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 key={id} />}
       {activeTab === 'reviews' && <Reviews reviews={reviews} restId={id} />}
     </div>
   );
@@ -44,8 +63,15 @@ Restaurant.propTypes = {
 };
 
 const mapStateToProps = (state, props) => ({
+  reviews: reviewsListSelector(state),
+  loading: reviewsLoadingSelector(state),
+  loaded: reviewsLoadedSelector(state),
   restaurant: restaurantSelector(state, props),
   averageRating: averageRatingSelector(state, props),
 });
 
-export default connect(mapStateToProps)(Restaurant);
+const mapDispatchToProps = {
+  loadReviews,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Restaurant);

src/components/reviews/reviews.js

@@ -3,18 +3,27 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import Review from './review';
 import ReviewForm from './review-form';
+import Loader from '../loader/loader';
+import {
+  reviewsListSelector,
+  usersLoadingSelector,
+  usersLoadedSelector,
+} from '../../redux/selectors';
 import styles from './reviews.module.css';
 
-import { loadReviews } from '../../redux/actions';
+import { loadUsers } from '../../redux/actions';
 
-const Reviews = ({ reviews, restId, loadReviews }) => {
+const Reviews = ({ reviews, restId, loadUsers, loading, loaded }) => {
   useEffect(() => {
-    loadReviews(restId);
-  }, [restId, loadReviews]);
+    if (!loading && !loaded) loadUsers();
+  }, [loading, loaded, loadUsers]);
+
+  if (loading) return <Loader />;
+  if (!loaded) return 'No data :(';
 
   return (
     <div className={styles.reviews}>
-      {reviews.map((id) => (
+      {reviews.map(({ id }) => (
         <Review key={id} id={id} />
       ))}
       <ReviewForm restId={restId} />
@@ -27,8 +36,14 @@ Reviews.propTypes = {
   reviews: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
 };
 
+const mapStateToProps = (state) => ({
+  reviews: reviewsListSelector(state),
+  loading: usersLoadingSelector(state),
+  loaded: usersLoadedSelector(state),
+});
+
 const mapDispatchToProps = {
-  loadReviews,
+  loadUsers,
 };
 
-export default connect(null, mapDispatchToProps)(Reviews);
+export default connect(mapStateToProps, mapDispatchToProps)(Reviews);