HT5 done

src/components/menu/menu.js

@@ -18,7 +18,6 @@ class Menu extends React.Component {
 
   render() {
     const { menu } = this.props;
-
     if (this.state.error) {
       return <p>В этом ресторане меню не доступно</p>;
     }

src/components/product/product.js

@@ -4,16 +4,26 @@ import PropTypes from 'prop-types';
 import { createStructuredSelector } from 'reselect';
 import styles from './product.module.css';
 
-import { decrement, increment } from '../../redux/actions';
+import { decrement, increment, loadProduct } from '../../redux/actions';
 
 import Button from '../button';
 import { productAmountSelector, productSelector } from '../../redux/selectors';
+import Loader from '../loader';
 
-const Product = ({ product, amount, increment, decrement, fetchData }) => {
+const Product = ({
+  id,
+  product,
+  amount,
+  increment,
+  decrement,
+  fetchData,
+  loadProduct,
+}) => {
   useEffect(() => {
     fetchData && fetchData(product.id);
   }, []); // eslint-disable-line
 
+  if (!product) return <Loader />;
   return (
     <div className={styles.product} data-id="product">
       <div className={styles.content}>

src/components/restaurant/restaurant.js

@@ -1,22 +1,43 @@
-import React from 'react';
-import { connect } from 'react-redux';
+import React, { useEffect } from 'react';
+import { connect, useDispatch, useSelector } 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 { averageRatingSelector } from '../../redux/selectors';
+import { averageRatingSelector, productsSelector } from '../../redux/selectors';
+import { loadProducts } from '../../redux/actions';
 
-const Restaurant = ({ restaurant, averageRating }) => {
+const Restaurant = ({ restaurant, allProducts, loadProducts }) => {
   const { id, name, menu, reviews } = restaurant;
+  useEffect(() => {
+    const allProdArray = Object.keys(allProducts);
+    if (!allProdArray.includes(menu[0])) {
+      loadProducts(id);
+    }
+  }, [id, menu]);
+
   const tabs = [
     { title: 'Menu', content: <Menu menu={menu} /> },
     {
       title: 'Reviews',
       content: <Reviews reviews={reviews} restaurantId={id} />,
     },
   ];
+  const allReviews = useSelector((state) => state.reviews.entities);
+  const filteredReviewsIdArr = Object.keys(allReviews).filter((reviewId) =>
+    reviews.includes(reviewId)
+  );
+
+  //todo fix loop
+  let averageRating = 0;
+  for (const reviewId of filteredReviewsIdArr) {
+    const review = allReviews[reviewId];
+    const rating = review.rating;
+    averageRating = averageRating + rating;
+  }
+  averageRating = averageRating / filteredReviewsIdArr.length;
 
   return (
     <div>
@@ -38,6 +59,10 @@ Restaurant.propTypes = {
   averageRating: PropTypes.number,
 };
 
-export default connect((state, props) => ({
-  averageRating: averageRatingSelector(state, props),
-}))(Restaurant);
+export default connect(
+  (state, props) => ({
+    //averageRating: averageRatingSelector(state, props),
+    allProducts: productsSelector(state, props),
+  }),
+  { loadProducts }
+)(Restaurant);

src/components/restaurants/restaurants.js

@@ -9,9 +9,18 @@ import {
   restaurantsLoadedSelector,
   restaurantsLoadingSelector,
 } from '../../redux/selectors';
-import { loadRestaurants } from '../../redux/actions';
+import { loadRestaurants, loadUsers } from '../../redux/actions';
 
-const Restaurants = ({ restaurants, loading, loaded, loadRestaurants }) => {
+const Restaurants = ({
+  restaurants,
+  loading,
+  loaded,
+  loadRestaurants,
+  loadUsers,
+}) => {
+  useEffect(() => {
+    loadUsers();
+  }, []);
   useEffect(() => {
     if (!loading && !loaded) loadRestaurants();
   }, [loading, loaded, loadRestaurants]);
@@ -22,7 +31,6 @@ const Restaurants = ({ restaurants, loading, loaded, loadRestaurants }) => {
     title: restaurant.name,
     content: <Restaurant restaurant={restaurant} />,
   }));
-
   return <Tabs tabs={tabs} />;
 };
 
@@ -40,5 +48,5 @@ export default connect(
     loading: restaurantsLoadingSelector(state),
     loaded: restaurantsLoadedSelector(state),
   }),
-  { loadRestaurants }
+  { loadRestaurants, loadUsers }
 )(Restaurants);

src/components/reviews/review/review.js

@@ -1,39 +1,49 @@
 import React from 'react';
-import { connect } from 'react-redux';
+import { connect, useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 
 import Rate from '../../rate';
 import styles from './review.module.css';
-import { reviewWitUserSelector } from '../../../redux/selectors';
+import Loader from '../../loader';
+import { usersSelector } 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 = ({ id }) => {
+  const allUsers = useSelector((state) => usersSelector(state));
+  const allReviews = useSelector((state) => state.reviews.entities);
+  const review = allReviews[id];
+  if (!review) {
+    return <Loader />;
+  }
+  const { userId, text, rating } = review;
+  const user = allUsers[userId].name;
+
+  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,
   text: PropTypes.string,
-  rating: PropTypes.number.isRequired,
+  //rating: PropTypes.number.isRequired,
 };
 
 Review.defaultProps = {
   user: 'Anonymous',
 };
 
-export default connect((state, props) => ({
-  ...reviewWitUserSelector(state, props),
-}))(Review);
+export default connect((state, props) => ({}))(Review);

src/components/reviews/reviews.js

@@ -1,15 +1,23 @@
 import React, { useEffect } from 'react';
-import { connect } from 'react-redux';
+import { connect, useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import Review from './review';
 import ReviewForm from './review-form';
 import styles from './reviews.module.css';
 
 import { loadReviews } from '../../redux/actions';
+import {
+  reviewsIsLoadingSelector,
+  reviewsSelector,
+} from '../../redux/selectors';
+import Loader from '../loader';
 
-const Reviews = ({ reviews, restaurantId, loadReviews }) => {
+const Reviews = ({ reviews, restaurantId, loadReviews, allReviews }) => {
   useEffect(() => {
-    loadReviews(restaurantId);
+    const allReviewsArr = Object.keys(allReviews);
+    if (!allReviewsArr.includes(reviews[0])) {
+      loadReviews(restaurantId);
+    }
   }, [loadReviews, restaurantId]);
 
   return (
@@ -27,4 +35,9 @@ Reviews.propTypes = {
   reviews: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
 };
 
-export default connect(null, { loadReviews })(Reviews);
+export default connect(
+  (state, props) => ({
+    allReviews: reviewsSelector(state).entities,
+  }),
+  { loadReviews }
+)(Reviews);