[ht5] middleware api & thunk

.gitignore

@@ -21,3 +21,5 @@ node_modules
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.idea/

src/components/menu/menu.js

@@ -1,13 +1,21 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import Product from '../product';
 import Basket from '../basket';
 
 import styles from './menu.module.css';
+import {
+  restaurantMenuLoadedSelector,
+  restaurantMenuLoadingSelector,
+  restaurantMenuSelector,
+} from '../../redux/selectors';
+import Loader from '../loader';
+import { loadProducts } from '../../redux/actions';
 
 class Menu extends React.Component {
   static propTypes = {
-    menu: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
+    restaurantId: PropTypes.string.isRequired,
   };
 
   state = { error: null };
@@ -16,8 +24,27 @@ class Menu extends React.Component {
     this.setState({ error });
   }
 
+  _loadMenu() {
+    const { loading, loaded, loadProducts, restaurantId } = this.props;
+
+    if (!loading && !loaded) {
+      loadProducts(restaurantId);
+    }
+  }
+
+  componentDidMount() {
+    this._loadMenu();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.restaurantId !== prevProps.restaurantId) {
+      this._loadMenu();
+    }
+  }
+
   render() {
-    const { menu } = this.props;
+    if (this.props.loading || !this.props.loaded) return <Loader />;
+    const menu = this.props.products;
 
     if (this.state.error) {
       return <p>В этом ресторане меню не доступно</p>;
@@ -26,8 +53,8 @@ class Menu extends React.Component {
     return (
       <div className={styles.menu}>
         <div>
-          {menu.map((id) => (
-            <Product key={id} id={id} />
+          {Object.values(menu).map((product) => (
+            <Product key={product.id} product={product} />
           ))}
         </div>
         <div>
@@ -38,4 +65,10 @@ class Menu extends React.Component {
   }
 }
 
-export default Menu;
+const mapStateToProps = (state, { restaurantId }) => ({
+  products: restaurantMenuSelector(state, restaurantId),
+  loading: restaurantMenuLoadingSelector(state, restaurantId),
+  loaded: restaurantMenuLoadedSelector(state, restaurantId),
+});
+
+export default connect(mapStateToProps, { loadProducts })(Menu);

src/components/product/product.js

@@ -1,13 +1,12 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { createStructuredSelector } from 'reselect';
 import styles from './product.module.css';
 
 import { decrement, increment } from '../../redux/actions';
 
 import Button from '../button';
-import { productAmountSelector, productSelector } from '../../redux/selectors';
+import { productAmountSelector } from '../../redux/selectors';
 
 const Product = ({ product, amount, increment, decrement, fetchData }) => {
   useEffect(() => {
@@ -51,14 +50,13 @@ Product.propTypes = {
   increment: PropTypes.func,
 };
 
-const mapStateToProps = createStructuredSelector({
-  amount: productAmountSelector,
-  product: productSelector,
+const mapStateToProps = (state, { product }) => ({
+  amount: productAmountSelector(state, product),
 });
 
-const mapDispatchToProps = (dispatch, ownProps) => ({
-  increment: () => dispatch(increment(ownProps.id)),
-  decrement: () => dispatch(decrement(ownProps.id)),
+const mapDispatchToProps = (dispatch, { product }) => ({
+  increment: () => dispatch(increment(product.id)),
+  decrement: () => dispatch(decrement(product.id)),
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(Product);

src/components/restaurant/restaurant.js

@@ -7,13 +7,14 @@ import Banner from '../banner';
 import Rate from '../rate';
 import Tabs from '../tabs';
 import { averageRatingSelector } from '../../redux/selectors';
+import { loadProducts } from '../../redux/actions';
 
-const Restaurant = ({ id, name, menu, reviews, averageRating }) => {
+const Restaurant = ({ id, name, averageRating }) => {
   const tabs = [
-    { title: 'Menu', content: <Menu menu={menu} /> },
+    { title: 'Menu', content: <Menu restaurantId={id} /> },
     {
       title: 'Reviews',
-      content: <Reviews reviews={reviews} restaurantId={id} />,
+      content: <Reviews restaurantId={id} />,
     },
   ];
 
@@ -35,6 +36,8 @@ Restaurant.propTypes = {
   averageRating: PropTypes.number,
 };
 
-export default connect((state, props) => ({
+const mapStateToProps = (state, props) => ({
   averageRating: averageRatingSelector(state, props),
-}))(Restaurant);
+});
+
+export default connect(mapStateToProps, { loadProducts })(Restaurant);

src/components/restaurants/restaurants.js

@@ -11,12 +11,17 @@ import {
 } from '../../redux/selectors';
 import { loadRestaurants } from '../../redux/actions';
 
-const Restaurants = ({ restaurants, loadRestaurants, loading, loaded }) => {
+const Restaurants = ({
+  restaurants,
+  loadRestaurants,
+  restaurantsLoading,
+  restaurantsLoaded,
+}) => {
   useEffect(() => {
-    if (!loading && !loaded) loadRestaurants();
+    if (!restaurantsLoading && !restaurantsLoaded) loadRestaurants();
   }, []); // eslint-disable-line
 
-  if (loading || !loaded) return <Loader />;
+  if (restaurantsLoading || !restaurantsLoaded) return <Loader />;
 
   const tabs = restaurants.map((restaurant) => ({
     title: restaurant.name,
@@ -37,8 +42,8 @@ Restaurants.propTypes = {
 export default connect(
   (state) => ({
     restaurants: restaurantsListSelector(state),
-    loading: restaurantsLoadingSelector(state),
-    loaded: restaurantsLoadedSelector(state),
+    restaurantsLoading: restaurantsLoadingSelector(state),
+    restaurantsLoaded: restaurantsLoadedSelector(state),
   }),
   { loadRestaurants }
 )(Restaurants);

src/components/reviews/review/review.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import Rate from '../../rate';
 import styles from './review.module.css';
 import { connect } from 'react-redux';
-import { reviewWitUserSelector } from '../../../redux/selectors';
+import { reviewWithUserSelector } from '../../../redux/selectors';
 
 const Review = ({ review: { user = 'Anonymous', text, rating } }) => (
   <div className={styles.review} data-id="review">
@@ -33,5 +33,5 @@ Review.propTypes = {
 };
 
 export default connect((state, props) => ({
-  review: reviewWitUserSelector(state, props),
+  review: reviewWithUserSelector(state, props),
 }))(Review);

src/components/reviews/reviews.js

@@ -5,17 +5,41 @@ import ReviewForm from './review-form';
 import styles from './reviews.module.css';
 import { connect } from 'react-redux';
 
-import { loadReviews } from '../../redux/actions';
+import { loadReviews, loadUsers } from '../../redux/actions';
+import Loader from '../loader';
+import {
+  restaurantReviewsLoadedSelector,
+  restaurantReviewsLoadingSelector,
+  reviewsListSelector,
+  usersLoadedSelector,
+  usersLoadingSelector,
+} from '../../redux/selectors';
 
-const Reviews = ({ reviews, restaurantId, loadReviews }) => {
+const Reviews = ({
+  reviews,
+  restaurantId,
+  loadReviews,
+  reviewsLoading,
+  reviewsLoaded,
+  loadUsers,
+  usersLoading,
+  usersLoaded,
+}) => {
   useEffect(() => {
-    loadReviews(restaurantId);
-  }, [loadReviews, restaurantId]);
+    if (!reviewsLoading && !reviewsLoaded) loadReviews(restaurantId);
+  }, [loadReviews, restaurantId]); // eslint-disable-line
+
+  useEffect(() => {
+    if (!usersLoading && !usersLoaded) loadUsers();
+  }, []); //eslint-disable-line
+
+  if (reviewsLoading || !reviewsLoaded || usersLoading || !usersLoaded)
+    return <Loader />;
 
   return (
     <div className={styles.reviews}>
-      {reviews.map((id) => (
-        <Review key={id} id={id} />
+      {reviews.map((review) => (
+        <Review key={review.id} {...review} />
       ))}
       <ReviewForm restaurantId={restaurantId} />
     </div>
@@ -24,7 +48,14 @@ const Reviews = ({ reviews, restaurantId, loadReviews }) => {
 
 Reviews.propTypes = {
   restaurantId: PropTypes.string.isRequired,
-  reviews: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
 };
 
-export default connect(null, { loadReviews })(Reviews);
+const mapStateToProps = (state, { restaurantId }) => ({
+  reviewsLoading: restaurantReviewsLoadingSelector(state, restaurantId),
+  reviewsLoaded: restaurantReviewsLoadedSelector(state, restaurantId),
+  reviews: reviewsListSelector(state, restaurantId),
+  usersLoading: usersLoadingSelector(state),
+  usersLoaded: usersLoadedSelector(state),
+});
+
+export default connect(mapStateToProps, { loadReviews, loadUsers })(Reviews);