Lesson5

src/components/menu/menu.js

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

src/components/restaurant/restaurant.js

@@ -1,34 +1,56 @@
-import { useState } from 'react';
+import { useState, useEffect, useMemo } 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';
 import {
   averageRatingSelector,
   restaurantSelector,
+  reviewsLoadedSelector,
+  reviewsLoadingSelector,
 } from '../../redux/selectors';
+import { loadReviews } from '../../redux/actions';
 
-const Restaurant = ({ restaurant, averageRating }) => {
+const Restaurant = ({
+  restaurant,
+  averageRating,
+  loadReviews,
+  reviwesLoading,
+  reviewsLoaded,
+}) => {
   const { id, name, menu, reviews } = restaurant;
-
   const [activeTab, setActiveTab] = useState('menu');
-
   const tabs = [
     { id: 'menu', label: 'Menu' },
     { id: 'reviews', label: 'Reviews' },
   ];
 
+  useEffect(() => {
+    if (!reviwesLoading && !reviewsLoaded) loadReviews(id);
+  }, [id, loadReviews, reviwesLoading, reviewsLoaded]);
+
+  const rateComponent = useMemo(() => {
+    if (reviwesLoading) return <Loader />;
+    if (!reviewsLoaded) return <Rate value={0} />;
+    return <Rate value={averageRating} />;
+  }, [reviwesLoading, reviewsLoaded, averageRating]);
+
+  const reviewsComponent = useMemo(() => {
+    if (reviwesLoading) return <Loader />;
+    if (!reviewsLoaded) return <Reviews reviews={[]} restId={id} />;
+    return <Reviews reviews={reviews} restId={id} />;
+  }, [reviwesLoading, reviewsLoaded, id, reviews]);
+
   return (
     <div>
-      <Banner heading={name}>
-        <Rate value={averageRating} />
-      </Banner>
+      <Banner heading={name}>{rateComponent}</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} restId={id} />}
+      {activeTab === 'reviews' && reviewsComponent}
     </div>
   );
 };
@@ -46,6 +68,11 @@ Restaurant.propTypes = {
 const mapStateToProps = (state, props) => ({
   restaurant: restaurantSelector(state, props),
   averageRating: averageRatingSelector(state, props),
+  reviwesLoading: reviewsLoadingSelector(state, props),
+  reviewsLoaded: reviewsLoadedSelector(state, props),
 });
 
-export default connect(mapStateToProps)(Restaurant);
+const mapDispatchToProps = {
+  loadReviews,
+};
+export default connect(mapStateToProps, mapDispatchToProps)(Restaurant);

src/components/reviews/reviews.js

@@ -4,13 +4,21 @@ import PropTypes from 'prop-types';
 import Review from './review';
 import ReviewForm from './review-form';
 import styles from './reviews.module.css';
+import Loader from '../loader';
+import {
+  usersLoadingSelector,
+  usersLoadedSelector,
+} from '../../redux/selectors';
 
-import { loadReviews } from '../../redux/actions';
+import { loadUsers } from '../../redux/actions';
 
-const Reviews = ({ reviews, restId, loadReviews }) => {
+const Reviews = ({ reviews, restId, loadUsers, usersLoading, usersLoaded }) => {
   useEffect(() => {
-    loadReviews(restId);
-  }, [restId, loadReviews]);
+    if (!usersLoading && !usersLoaded) loadUsers();
+  }, [loadUsers, usersLoading, usersLoaded]);
+
+  if (usersLoading) return <Loader />;
+  if (!usersLoaded) return 'No data :(';
 
   return (
     <div className={styles.reviews}>
@@ -27,8 +35,13 @@ Reviews.propTypes = {
   reviews: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
 };
 
+const mapStateToProps = (state, props) => ({
+  usersLoading: usersLoadingSelector(state),
+  usersLoaded: usersLoadedSelector(state),
+});
+
 const mapDispatchToProps = {
-  loadReviews,
+  loadUsers,
 };
 
-export default connect(null, mapDispatchToProps)(Reviews);
+export default connect(mapStateToProps, mapDispatchToProps)(Reviews);