Ht4

package.json

@@ -53,4 +53,4 @@
     "prettier": "^2.5.0",
     "pretty-quick": "^3.1.2"
   }
-}
+}

src/components/menu/menu.js

@@ -8,11 +8,7 @@ import styles from './menu.module.css';
 
 class Menu extends Component {
   static propTypes = {
-    menu: PropTypes.arrayOf(
-      PropTypes.shape({
-        id: PropTypes.string.isRequired,
-      }).isRequired
-    ).isRequired,
+    menu: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
   };
 
   state = { error: null };
@@ -22,7 +18,8 @@ class Menu extends Component {
   }
 
   render() {
-    const { menu } = this.props;
+    const { menu} = this.props;
+      console.log("Menu: ",menu);
 
     if (this.state.error) {
       return <p>Меню этого ресторана сейчас недоступно :(</p>;

src/components/product/product.js

@@ -5,11 +5,13 @@ import PropTypes from 'prop-types';
 import styles from './product.module.css';
 import Button from '../button';
 import { decrement, increment } from '../../redux/actions';
+import { productSelector, amountSelector } from '../../redux/selectors';
 
 function Product({ product, amount, decrement, increment, fetchData }) {
   useEffect(() => {
     fetchData?.(product.id);
   }, []); // eslint-disable-line
+  console.log("Product: ",product);
 
   return (
     <div className={styles.product} data-id="product">
@@ -57,15 +59,10 @@ Product.propTypes = {
 };
 
 const mapStateToProps = (state, props) => ({
-  amount: state.order[props.id] || 0,
-  product: state.products[props.id],
+  amount: amountSelector(state, props),
+  product: productSelector(state, props),
 });
 
-// const mapDispatchToProps = {
-//   decrement,
-//   increment,
-// };
-
 const mapDispatchToProps = (dispatch, props) => ({
   decrement: () => dispatch(decrement(props.id)),
   increment: () => dispatch(increment(props.id)),

src/components/restaurant/restaurant.js

@@ -1,21 +1,22 @@
-import { useMemo, useState } from 'react';
+import { useState } 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 {
+  averageRatingSelector,
+  restaurantSelector,
+} from '../../redux/selectors';
 
-const Restaurant = ({ restaurant }) => {
+const Restaurant = ({ restaurant, averageRating }) => {
   const { id, name, menu, reviews } = restaurant;
+  console.log('Restaurant: ', restaurant, reviews);
 
   const [activeTab, setActiveTab] = useState('menu');
 
-  const averageRating = useMemo(() => {
-    const total = reviews.reduce((acc, { rating }) => acc + rating, 0);
-    return Math.round(total / reviews.length);
-  }, [reviews]);
-
   const tabs = [
     { id: 'menu', label: 'Menu' },
     { id: 'reviews', label: 'Reviews' },
@@ -28,7 +29,7 @@ const Restaurant = ({ restaurant }) => {
       </Banner>
       <Tabs tabs={tabs} activeId={activeTab} onChange={setActiveTab} />
       {activeTab === 'menu' && <Menu menu={menu} key={id} />}
-      {activeTab === 'reviews' && <Reviews reviews={reviews} />}
+      {activeTab === 'reviews' && <Reviews reviews={reviews} restId={id} />}
     </div>
   );
 };
@@ -38,12 +39,13 @@ Restaurant.propTypes = {
     id: PropTypes.string.isRequired,
     name: PropTypes.string,
     menu: PropTypes.array,
-    reviews: PropTypes.arrayOf(
-      PropTypes.shape({
-        rating: PropTypes.number.isRequired,
-      }).isRequired
-    ).isRequired,
+    reviews: PropTypes.array.isRequired,
   }).isRequired,
 };
 
-export default Restaurant;
+const mapStateToProps = (state, props) => ({
+  restaurant: restaurantSelector(state, props),
+  averageRating: averageRatingSelector(state, props),
+});
+
+export default connect(mapStateToProps)(Restaurant);

src/components/restaurants/restaurants.js

@@ -3,39 +3,41 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import Restaurant from '../restaurant';
 import Tabs from '../tabs';
+import { restaurantsSelector } from '../../redux/selectors';
 
 function Restaurants({ restaurants }) {
-  const [activeId, setActiveId] = useState(restaurants[0].id);
-
+  const [activeId, setActiveId] = useState(
+    'a757a0e9-03c1-4a2a-b384-8ac21dbe2fb2'
+  );
   const tabs = useMemo(
-    () => restaurants.map(({ id, name }) => ({ id, label: name })),
+    () =>
+      Object.keys(restaurants).map((id) => ({
+        id,
+        label: restaurants[id].name,
+      })),
     [restaurants]
   );
 
-  const activeRestaurant = useMemo(
-    () => restaurants.find((restaurant) => restaurant.id === activeId),
-    [activeId, restaurants]
-  );
-
   return (
     <div>
       <Tabs tabs={tabs} onChange={setActiveId} activeId={activeId} />
-      <Restaurant restaurant={activeRestaurant} />
+      {/* тут просто передали ID ресторана, там приняли через селекторы из props  нашли нужный ресторан и */}
+      <Restaurant id={activeId} />
     </div>
   );
 }
 
 Restaurants.propTypes = {
-  restaurants: PropTypes.arrayOf(
+  restaurants: PropTypes.shape(
     PropTypes.shape({
       id: PropTypes.string.isRequired,
       name: PropTypes.string,
     }).isRequired
   ).isRequired,
 };
 
-const mapStateToProps = (state) => ({
-  restaurants: state.restaurants,
-});
-
-export default connect(mapStateToProps)(Restaurants);
+export default connect((state) => {
+  return {
+    restaurants: restaurantsSelector(state),
+  };
+})(Restaurants);

src/components/reviews/review/review.js

@@ -1,34 +1,39 @@
 import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import {
+  reviewWitUserSelector,
+} from '../../../redux/selectors';
 
 import Rate from '../../rate';
 import styles from './review.module.css';
 
-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 = ({ text, rating, user }) => {
+  console.log('Review: ');
+  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,
+  userId: PropTypes.string,
   text: PropTypes.string,
   rating: PropTypes.number.isRequired,
 };
 
-Review.defaultProps = {
-  user: 'Anonymous',
-};
+const mapStateToProps = reviewWitUserSelector;
 
-export default Review;
+export default connect(mapStateToProps)(Review);

src/components/reviews/reviews.js

@@ -4,22 +4,20 @@ import ReviewForm from './review-form';
 import styles from './reviews.module.css';
 
 const Reviews = ({ reviews }) => {
+  console.log('Reviews: ', reviews);
+
   return (
     <div className={styles.reviews}>
-      {reviews.map((review) => (
-        <Review key={review.id} {...review} />
+      {reviews.map((id) => (
+        <Review key={id} id={id} />
       ))}
       <ReviewForm />
     </div>
   );
 };
 
 Reviews.propTypes = {
-  reviews: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string.isRequired,
-    }).isRequired
-  ).isRequired,
+  reviews: PropTypes.array.isRequired,
 };
 
-export default Reviews;
+export default Reviews;

src/fixtures.js

@@ -331,4 +331,4 @@ export const normalizedUsers = [
     id: 'dfb982e9-b432-4b7d-aec6-7f6ff2e6af54',
     name: 'Sam',
   },
-];
+];

src/redux/reducer/index.js

@@ -3,10 +3,12 @@ import order from './order';
 import restaurants from './restaurants';
 import products from './products';
 import reviews from './reviews';
+import users from './users'
 
 export default combineReducers({
   order,
   restaurants,
   products,
   reviews,
-});
+  users
+});

src/redux/reducer/restaurants.js

@@ -1,4 +1,9 @@
-import { normalizedRestaurants as defaultRestaurants } from '../../fixtures';
+import { normalizedRestaurants } from '../../fixtures';
+
+const defaultRestaurants = normalizedRestaurants.reduce(
+  (acc, restaurant) => ({ ...acc, [restaurant.id]: restaurant }),
+  {}
+);
 
 export default (restaurants = defaultRestaurants, action) => {
   const { type } = action;

src/redux/reducer/reviews.js

@@ -1,4 +1,9 @@
-import { normalizedReviews as defaultReviews } from '../../fixtures';
+import { normalizedReviews } from '../../fixtures';
+
+const defaultReviews = normalizedReviews.reduce(
+  (acc, review) => ({ ...acc, [review.id]: review }),
+  {}
+);
 
 export default (reviews = defaultReviews, action) => {
   const { type } = action;

src/redux/reducer/users.js

@@ -0,0 +1,15 @@
+import { normalizedUsers } from '../../fixtures';
+
+const defaultUsers = normalizedUsers.reduce(
+  (acc, user) => ({ ...acc, [user.id]: user }),
+  {}
+);
+
+export default (users = defaultUsers, action) => {
+  const { type } = action;
+
+  switch (type) {
+    default:
+      return users;
+  }
+};

src/redux/selectors.js

@@ -1,8 +1,10 @@
 import { createSelector } from 'reselect';
 
-// const restaurantsSelector = (state) => state.restaurants;
-const productsSelector = (state) => state.products;
-const orderSelector = (state) => state.order;
+export const productsSelector = (state) => state.products;
+export const orderSelector = (state) => state.order;
+export const restaurantsSelector = (state) => state.restaurants;
+export const reviewsSelector = (state) => state.reviews;
+export const usersSelector = (state) => state.users;
 
 export const orderProductsSelector = createSelector(
   [productsSelector, orderSelector],
@@ -17,8 +19,39 @@ export const orderProductsSelector = createSelector(
       }))
 );
 
+export const amountSelector = (state, { id }) => orderSelector(state)[id] || 0;
+
+export const productSelector = (state, { id }) => productsSelector(state)[id];
+
+export const reviewSelector = (state, { id }) => reviewsSelector(state)[id];
+
+export const userSelector = (state, { id }) => usersSelector(state)[id];
+
+export const restaurantSelector = (state, { id }) =>
+  restaurantsSelector(state)[id];
+
 export const totalSelector = createSelector(
   [orderProductsSelector],
   (orderProducts) =>
     orderProducts.reduce((acc, { subtotal }) => acc + subtotal, 0)
 );
+
+export const reviewWitUserSelector = createSelector(
+  reviewSelector,
+  usersSelector,
+  (review, users) => ({
+    ...review,
+    user: users[review.userId]?.name,
+  })
+);
+
+export const averageRatingSelector = createSelector(
+  reviewsSelector,
+  restaurantSelector,
+  (reviews, restaurant) => {
+    const ratings = restaurant.reviews.map((id) => reviews[id].rating);
+    return Math.round(
+      ratings.reduce((acc, rating) => acc + rating) / ratings.length
+    );
+  }
+);