hw 4

package.json

@@ -12,7 +12,8 @@
     "react-scripts": "4.0.3",
     "redux": "^4.1.2",
     "redux-devtools-extension": "^2.13.9",
-    "reselect": "^4.1.5"
+    "reselect": "^4.1.5",
+    "uuid": "^8.3.2"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/product/product.js

@@ -1,10 +1,11 @@
-import { useEffect } from 'react';
-import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
+import { amountSelector, productSelector } from '../../redux/selectors';
+import { decrement, increment } from '../../redux/actions';
 
-import styles from './product.module.css';
 import Button from '../button';
-import { decrement, increment } from '../../redux/actions';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import styles from './product.module.css';
+import { useEffect } from 'react';
 
 function Product({ product, amount, decrement, increment, fetchData }) {
   useEffect(() => {
@@ -57,8 +58,8 @@ Product.propTypes = {
 };
 
 const mapStateToProps = (state, props) => ({
-  amount: state.order[props.id] || 0,
-  product: state.products[props.id],
+  amount: amountSelector(state, props.id),
+  product: productSelector(state, props.id),
 });
 
 // const mapDispatchToProps = {

src/components/restaurant/restaurant.js

@@ -1,21 +1,18 @@
-import { useMemo, useState } from 'react';
-import PropTypes from 'prop-types';
-import Menu from '../menu';
-import Reviews from '../reviews';
 import Banner from '../banner';
+import Menu from '../menu';
+import PropTypes from 'prop-types';
 import Rate from '../rate';
+import Reviews from '../reviews';
 import Tabs from '../tabs';
+import { averageRatingSelector } from '../../redux/selectors';
+import { connect } from 'react-redux';
+import { useState } from 'react';
 
-const Restaurant = ({ restaurant }) => {
+const Restaurant = ({ restaurant, averageRating }) => {
   const { id, name, menu, reviews } = restaurant;
 
   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' },
@@ -46,4 +43,8 @@ Restaurant.propTypes = {
   }).isRequired,
 };
 
-export default Restaurant;
+const mapStateToProps = (state) => ({
+  averageRating: averageRatingSelector(state),
+});
+
+export default connect(mapStateToProps)(Restaurant);

src/components/restaurants/restaurants.js

@@ -1,26 +1,18 @@
-import { useMemo, useState } from 'react';
-import { connect } from 'react-redux';
+import { restaurantsSelector, tabsSelector } from '../../redux/selectors';
+
 import PropTypes from 'prop-types';
 import Restaurant from '../restaurant';
 import Tabs from '../tabs';
+import { connect } from 'react-redux';
+import { useState } from 'react';
 
-function Restaurants({ restaurants }) {
-  const [activeId, setActiveId] = useState(restaurants[0].id);
-
-  const tabs = useMemo(
-    () => restaurants.map(({ id, name }) => ({ id, label: name })),
-    [restaurants]
-  );
-
-  const activeRestaurant = useMemo(
-    () => restaurants.find((restaurant) => restaurant.id === activeId),
-    [activeId, restaurants]
-  );
+function Restaurants({ tabs, restaurants }) {
+  const [activeId, setActiveId] = useState(Object.keys(restaurants)[0]);
 
   return (
     <div>
       <Tabs tabs={tabs} onChange={setActiveId} activeId={activeId} />
-      <Restaurant restaurant={activeRestaurant} />
+      <Restaurant restaurant={restaurants[activeId]} />
     </div>
   );
 }
@@ -35,7 +27,8 @@ Restaurants.propTypes = {
 };
 
 const mapStateToProps = (state) => ({
-  restaurants: state.restaurants,
+  restaurants: restaurantsSelector(state),
+  tabs: tabsSelector(state),
 });
 
 export default connect(mapStateToProps)(Restaurants);

src/components/reviews/review/review.js

@@ -1,14 +1,20 @@
-import PropTypes from 'prop-types';
+import {
+  reviewRatingSelector,
+  reviewTextSelector,
+  reviewUserNameSelector,
+} from '../../../redux/selectors';
 
+import PropTypes from 'prop-types';
 import Rate from '../../rate';
+import { connect } from 'react-redux';
 import styles from './review.module.css';
 
-const Review = ({ user, text, rating }) => (
+const Review = ({ id, userName, text, rating }) => (
   <div className={styles.review} data-id="review">
     <div className={styles.content}>
       <div>
         <h4 className={styles.name} data-id="review-user">
-          {user}
+          {userName}
         </h4>
         <p className={styles.comment} data-id="review-text">
           {text}
@@ -22,13 +28,19 @@ const Review = ({ user, text, rating }) => (
 );
 
 Review.propTypes = {
-  user: PropTypes.string,
+  userName: PropTypes.string,
   text: PropTypes.string,
   rating: PropTypes.number.isRequired,
 };
 
 Review.defaultProps = {
-  user: 'Anonymous',
+  userName: 'Anonymous',
 };
 
-export default Review;
+const mapStateToProps = (state, props) => ({
+  userName: reviewUserNameSelector(state, props.id),
+  text: reviewTextSelector(state, props.id),
+  rating: reviewRatingSelector(state, props.id),
+});
+
+export default connect(mapStateToProps)(Review);

src/components/reviews/reviews.js

@@ -7,7 +7,7 @@ const Reviews = ({ reviews }) => {
   return (
     <div className={styles.reviews}>
       {reviews.map((review) => (
-        <Review key={review.id} {...review} />
+        <Review key={review} id={review} />
       ))}
       <ReviewForm />
     </div>

src/redux/middleware/uuid.js

@@ -0,0 +1,5 @@
+import { v4 as uuidv4 } from 'uuid';
+
+export default (store) => (next) => (action) => {
+  return uuidv4();
+};

src/redux/reducer/index.js

@@ -1,12 +1,14 @@
 import { combineReducers } from 'redux';
 import order from './order';
-import restaurants from './restaurants';
 import products from './products';
+import restaurants from './restaurants';
 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;
+export const restaurantsSelector = (state) => state.restaurants;
 const productsSelector = (state) => state.products;
 const orderSelector = (state) => state.order;
+const usersSelector = (state) => state.users;
+const reviewsSelector = (state) => state.reviews;
 
 export const orderProductsSelector = createSelector(
   [productsSelector, orderSelector],
@@ -22,3 +24,35 @@ export const totalSelector = createSelector(
   (orderProducts) =>
     orderProducts.reduce((acc, { subtotal }) => acc + subtotal, 0)
 );
+
+export const productSelector = (state, id) => productsSelector(state)[id];
+
+export const amountSelector = (state, id) => orderSelector(state)[id];
+
+export const reviewSelector = (state, id) => reviewsSelector(state)[id];
+
+export const reviewUserNameSelector = (state, id) =>
+  usersSelector(state)[reviewSelector(state, id).userId].name;
+
+export const reviewTextSelector = (state, id) =>
+  reviewsSelector(state)[id].text;
+
+export const reviewRatingSelector = (state, id) =>
+  reviewsSelector(state)[id].rating;
+
+export const tabsSelector = createSelector(
+  [restaurantsSelector],
+  (restaurants) =>
+    Object.values(restaurants).map(({ id, name }) => ({ id, label: name }))
+);
+
+export const averageRatingSelector = createSelector(
+  [reviewsSelector],
+  (reviews) => {
+    const total = Object.values(reviews).reduce(
+      (acc, { rating }) => acc + rating,
+      0
+    );
+    return Math.round(total / Object.keys(reviews).length);
+  }
+);

yarn.lock

@@ -11294,7 +11294,7 @@ uuid@^3.3.2, uuid@^3.4.0:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
   integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
 
-uuid@^8.3.0:
+uuid@^8.3.0, uuid@^8.3.2:
   version "8.3.2"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==