HT-5 kostenevich

src/components/menu/menu.js

@@ -5,6 +5,13 @@ import Product from '../product';
 import Basket from '../basket';
 
 import styles from './menu.module.css';
+import { connect } from 'react-redux';
+import { loadProducts } from '../../redux/actions';
+import {
+  productLoadedSelector,
+  productLoadingSelector,
+} from '../../redux/selectors';
+import Loader from '../loader';
 
 class Menu extends Component {
   static propTypes = {
@@ -13,11 +20,19 @@ class Menu extends Component {
 
   state = { error: null };
 
+  componentDidMount() {
+    if (!this.props.loading && !this.props.loaded)
+      this.props.loadProductList(this.props.restId);
+  }
+
   componentDidCatch(error) {
     this.setState({ error });
   }
 
   render() {
+    if (this.props.loading) return <Loader />;
+    if (!this.props.loaded) return 'No data :(';
+
     const { menu } = this.props;
 
     if (this.state.error) {
@@ -39,4 +54,14 @@ class Menu extends Component {
   }
 }
 
-export default Menu;
+const mapStateToProps = (state, props) => ({
+  loading: productLoadingSelector(state, props),
+  loaded: productLoadedSelector(state, props),
+  restId: props.restId,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  loadProductList: (restId) => dispatch(loadProducts(restId)),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(Menu);

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,23 @@ import Tabs from '../tabs';
 import {
   averageRatingSelector,
   restaurantSelector,
+  reviewLoadedSelector,
+  reviewLoadingSelector,
 } from '../../redux/selectors';
+import { loadReviews } from '../../redux/actions';
+
+const Restaurant = ({
+  restaurant,
+  averageRating,
+  loaded,
+  loading,
+  loadReviews,
+  restId,
+}) => {
+  useEffect(() => {
+    if (!loaded && !loading) loadReviews(restId);
+  }, [restId, loadReviews, loaded, loading]);
 
-const Restaurant = ({ restaurant, averageRating }) => {
   const { id, name, menu, reviews } = restaurant;
 
   const [activeTab, setActiveTab] = useState('menu');
@@ -27,7 +41,7 @@ const Restaurant = ({ restaurant, averageRating }) => {
         <Rate value={averageRating} />
       </Banner>
       <Tabs tabs={tabs} activeId={activeTab} onChange={setActiveTab} />
-      {activeTab === 'menu' && <Menu menu={menu} key={id} />}
+      {activeTab === 'menu' && <Menu menu={menu} key={id} restId={id} />}
       {activeTab === 'reviews' && <Reviews reviews={reviews} restId={id} />}
     </div>
   );
@@ -46,6 +60,13 @@ Restaurant.propTypes = {
 const mapStateToProps = (state, props) => ({
   restaurant: restaurantSelector(state, props),
   averageRating: averageRatingSelector(state, props),
+  restId: props.id,
+  loaded: reviewLoadedSelector(state, props),
+  loading: reviewLoadingSelector(state, props),
+});
+
+const mapDispatchToProps = (dispatch, props) => ({
+  loadReviews: () => dispatch(loadReviews(props.id)),
 });
 
-export default connect(mapStateToProps)(Restaurant);
+export default connect(mapStateToProps, mapDispatchToProps)(Restaurant);

src/components/reviews/review/review.js

@@ -6,23 +6,25 @@ import styles from './review.module.css';
 
 import { reviewWitUserSelector } from '../../../redux/selectors';
 
-const Review = ({ user, text, rating }) => (
-  <div className={styles.review} data-id="review">
-    <div className={styles.content}>
-      <div>
-        <h4 className={styles.name} data-id="review-user">
-          {user}
-        </h4>
-        <p className={styles.comment} data-id="review-text">
-          {text}
-        </p>
-      </div>
-      <div className={styles.rate}>
-        <Rate value={rating} />
+const Review = ({ user, text, rating }) => {
+  return (
+    <div className={styles.review} data-id="review">
+      <div className={styles.content}>
+        <div>
+          <h4 className={styles.name} data-id="review-user">
+            {user}
+          </h4>
+          <p className={styles.comment} data-id="review-text">
+            {text}
+          </p>
+        </div>
+        <div className={styles.rate}>
+          <Rate value={rating} />
+        </div>
       </div>
     </div>
-  </div>
-);
+  );
+};
 
 Review.propTypes = {
   user: PropTypes.string,
@@ -36,9 +38,14 @@ Review.defaultProps = {
 
 // const mapStateToProps = (state, props) => ({
 //   ...reviewWitUserSelector(state, props),
+//   loading: reviewLoadingSelector(state, props),
+//   loaded: reviewLoadedSelector(state, props),
+//   restId: props.restId,
 // });
 
-// const mapStateToProps = (state, props) => reviewWitUserSelector(state, props);
+// const mapDispatchToProps = (dispatch, props) => ({
+//   loadReviews: () => dispatch(loadReviews(props.restId)),
+// });
 
 const mapStateToProps = reviewWitUserSelector;
 

src/components/reviews/reviews.js

@@ -5,17 +5,45 @@ 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 {
+  reviewLoadedSelector,
+  reviewLoadedUsers,
+  reviewLoadingSelector,
+  reviewLoadingUsers,
+} from '../../redux/selectors';
+import Loader from '../loader';
 
-const Reviews = ({ reviews, restId, loadReviews }) => {
+const Reviews = ({
+  reviews,
+  restId,
+  loadReviews,
+  loaded,
+  loading,
+  loadedUsers,
+  loadingUsers,
+  loadUsers,
+}) => {
   useEffect(() => {
-    loadReviews(restId);
-  }, [restId, loadReviews]);
+    if (!loadedUsers && !loadingUsers) loadUsers();
+    if (!loaded && !loading) loadReviews(restId);
+  }, [
+    restId,
+    loadReviews,
+    loadUsers,
+    loaded,
+    loadedUsers,
+    loading,
+    loadingUsers,
+  ]);
+
+  if (loading || loadingUsers) return <Loader />;
+  if (!loaded || !loadedUsers) return 'No data :(';
 
   return (
     <div className={styles.reviews}>
       {reviews.map((id) => (
-        <Review key={id} id={id} />
+        <Review key={id} id={id} restId={restId} />
       ))}
       <ReviewForm restId={restId} />
     </div>
@@ -27,8 +55,19 @@ Reviews.propTypes = {
   reviews: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
 };
 
-const mapDispatchToProps = {
-  loadReviews,
+const mapStateToProps = (state, props) => {
+  return {
+    restId: props.restId,
+    loadedUsers: reviewLoadedUsers(state),
+    loadingUsers: reviewLoadingUsers(state),
+    loaded: reviewLoadedSelector(state, props),
+    loading: reviewLoadingSelector(state, props),
+  };
 };
 
-export default connect(null, mapDispatchToProps)(Reviews);
+const mapDispatchToProps = (dispatch, props) => ({
+  loadReviews: () => dispatch(loadReviews(props.restId)),
+  loadUsers: () => dispatch(loadUsers()),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(Reviews);