Metelev: HT5

src/components/menu/menu.js

@@ -1,42 +1,50 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
+import { useEffect } from 'react';
 
 import Product from '../product';
 import Basket from '../basket';
 
 import styles from './menu.module.css';
+import Loader from '../loader';
+import { loadProducts } from '../../redux/actions';
+import { connect } from 'react-redux';
+import {
+  productsLoadedSelector,
+  productsLoadingSelector,
+} from '../../redux/selectors';
+
+function Menu({ menu, id, productsLoading, productsLoaded, loadProducts }) {
+  useEffect(() => {
+    if (!productsLoading && !productsLoaded) loadProducts(id);
+  }, [id, productsLoading, productsLoaded, loadProducts]);
+
+  if (productsLoading !== false) {
+    return <Loader />;
+  }
 
-class Menu extends Component {
-  static propTypes = {
-    menu: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
-  };
-
-  state = { error: null };
-
-  componentDidCatch(error) {
-    this.setState({ error });
+  if (!productsLoaded) {
+    return <div className={styles.menu}>'No data :('</div>;
   }
 
-  render() {
-    const { menu } = this.props;
-
-    if (this.state.error) {
-      return <p>Меню этого ресторана сейчас недоступно :(</p>;
-    }
-
-    return (
-      <div className={styles.menu}>
-        <div>
-          {menu.map((id) => (
-            <Product key={id} id={id} />
-          ))}
-        </div>
-        <div>
-          <Basket />
-        </div>
+  return (
+    <div className={styles.menu}>
+      <div>
+        {productsLoaded &&
+          menu.map((productId) => <Product key={productId} id={productId} />)}
       </div>
-    );
-  }
+      <div>
+        <Basket />
+      </div>
+    </div>
+  );
 }
 
-export default Menu;
+const mapStateToProps = (state, props) => ({
+  productsLoading: productsLoadingSelector(state, props),
+  productsLoaded: productsLoadedSelector(state, props),
+});
+
+const mapDispatchToProps = {
+  loadProducts,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Menu);

src/components/product/product.js

@@ -1,16 +1,11 @@
-import { useEffect } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import styles from './product.module.css';
 import Button from '../button';
 import { decrement, increment } from '../../redux/actions';
 import { amountSelector, productSelector } from '../../redux/selectors';
 
-function Product({ product, amount, decrement, increment, fetchData }) {
-  useEffect(() => {
-    fetchData && fetchData(product.id);
-  }, []); // eslint-disable-line
-
+function Product({ product, amount, decrement, increment }) {
   return (
     <div className={styles.product} data-id="product">
       <div className={styles.content}>
@@ -49,7 +44,6 @@ Product.propTypes = {
     price: PropTypes.number,
     ingredients: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
   }).isRequired,
-  fetchData: PropTypes.func,
   // from connect
   amount: PropTypes.number,
   increment: PropTypes.func,
@@ -61,11 +55,6 @@ const mapStateToProps = (state, props) => ({
   product: productSelector(state, props),
 });
 
-// const mapDispatchToProps = {
-//   increment,
-//   decrement,
-// };
-
 const mapDispatchToProps = (dispatch, props) => ({
   increment: () => dispatch(increment(props.id)),
   decrement: () => dispatch(decrement(props.id)),

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,19 @@ import Tabs from '../tabs';
 import {
   averageRatingSelector,
   restaurantSelector,
+  reviewsLoadedSelector,
+  reviewsLoadingSelector,
 } from '../../redux/selectors';
+import Loader from '../loader';
+import { loadReviews } from '../../redux/actions';
 
-const Restaurant = ({ restaurant, averageRating }) => {
+const Restaurant = ({
+  restaurant,
+  averageRating,
+  reviewsLoading,
+  reviewsLoaded,
+  loadReviews,
+}) => {
   const { id, name, menu, reviews } = restaurant;
 
   const [activeTab, setActiveTab] = useState('menu');
@@ -21,14 +31,23 @@ const Restaurant = ({ restaurant, averageRating }) => {
     { id: 'reviews', label: 'Reviews' },
   ];
 
+  // Ревью нужны сразу, чтобы нарисовать рейтинг в беннере
+  // Ходить за рейтингом отдельно в баннере выглядит странно
+  useEffect(() => {
+    if (!reviewsLoading && !reviewsLoaded) loadReviews(id);
+  }, [id, reviewsLoading, reviewsLoaded, loadReviews]);
+
+  if (reviewsLoading !== false) return <Loader />;
+  if (!reviewsLoaded) 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 === 'reviews' && <Reviews reviews={reviews} restId={id} />}
+      {activeTab === 'menu' && <Menu menu={menu} key={id} id={id} />}
+      {activeTab === 'reviews' && <Reviews reviews={reviews} id={id} />}
     </div>
   );
 };
@@ -46,6 +65,12 @@ Restaurant.propTypes = {
 const mapStateToProps = (state, props) => ({
   restaurant: restaurantSelector(state, props),
   averageRating: averageRatingSelector(state, props),
+  reviewsLoading: reviewsLoadingSelector(state, props),
+  reviewsLoaded: reviewsLoadedSelector(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/reviews.js

@@ -5,30 +5,66 @@ 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 Loader from '../loader';
+import {
+  reviewsLoadedSelector,
+  reviewsLoadingSelector,
+  usersLoadedSelector,
+  usersLoadingSelector,
+} from '../../redux/selectors';
 
-const Reviews = ({ reviews, restId, loadReviews }) => {
+const Reviews = ({
+  reviews,
+  id,
+  reviewsLoading,
+  reviewsLoaded,
+  loadReviews,
+  usersLoading,
+  usersLoaded,
+  loadUsers,
+}) => {
   useEffect(() => {
-    loadReviews(restId);
-  }, [restId, loadReviews]);
+    if (!reviewsLoading && !reviewsLoaded) loadReviews(id);
+    if (!usersLoading && !usersLoaded) loadUsers();
+  }, [
+    id,
+    reviewsLoading,
+    reviewsLoaded,
+    loadReviews,
+    usersLoading,
+    usersLoaded,
+    loadUsers,
+  ]);
+
+  if (reviewsLoading !== false || usersLoading !== false) return <Loader />;
+  if (!reviewsLoaded && !usersLoaded) return 'No data :(';
 
   return (
     <div className={styles.reviews}>
       {reviews.map((id) => (
         <Review key={id} id={id} />
       ))}
-      <ReviewForm restId={restId} />
+      <ReviewForm restId={id} />
     </div>
   );
 };
 
 Reviews.propTypes = {
-  restId: PropTypes.string,
+  id: PropTypes.string,
   reviews: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
 };
 
+const mapStateToProps = (state, props) => ({
+  usersLoading: usersLoadingSelector(state, props),
+  usersLoaded: usersLoadedSelector(state, props),
+  reviewsLoading: reviewsLoadingSelector(state, props),
+  reviewsLoaded: reviewsLoadedSelector(state, props),
+});
+
 const mapDispatchToProps = {
   loadReviews,
+  loadUsers,
 };
 
-export default connect(null, mapDispatchToProps)(Reviews);
+export default connect(mapStateToProps, mapDispatchToProps)(Reviews);