HT4

package.json

@@ -18,6 +18,7 @@
     "redux": "^4.0.5",
     "redux-devtools-extension": "^2.13.8",
     "reselect": "^4.0.0",
+    "uuid": "^8.3.2",
     "web-vitals": "^0.2.4"
   },
   "scripts": {

src/components/menu/menu.js

@@ -8,11 +8,7 @@ import styles from './menu.module.css';
 
 class Menu extends React.Component {
   static propTypes = {
-    menu: PropTypes.arrayOf(
-      PropTypes.shape({
-        id: PropTypes.string.isRequired,
-      }).isRequired
-    ).isRequired,
+    menu: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
   };
 
   state = { error: null };

src/components/product/product.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import styles from './product.module.css';
 
 import { decrement, increment } from '../../redux/actions';
+import { orderSelector, productsSelector } from '../../redux/selectors';
 
 import Button from '../button';
 
@@ -50,8 +51,8 @@ Product.propTypes = {
 };
 
 const mapStateToProps = (state, ownProps) => ({
-  amount: state.order[ownProps.id] || 0,
-  product: state.products[ownProps.id],
+  amount: orderSelector(state)[ownProps.id] || 0,
+  product: productsSelector(state)[ownProps.id],
 });
 
 // const mapDispatchToProps = {

src/components/restaurant/restaurant.js

@@ -1,22 +1,31 @@
 import React, { 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 { reviewsSelector, restaurantsSelector } from '../../redux/selectors';
 
-const Restaurant = ({ restaurant }) => {
-  const { name, menu, reviews } = restaurant;
+const Restaurant = ({ restaurant, restaurantReviews }) => {
+  const { name, menu, reviews, id } = restaurant;
 
   const averageRating = useMemo(() => {
-    const total = reviews.reduce((acc, { rating }) => acc + rating, 0);
+    const total = reviews.reduce(
+      (acc, id) => acc + restaurantReviews[id].rating,
+      0
+    );
+
     return Math.round(total / reviews.length);
-  }, [reviews]);
+  }, [reviews, restaurantReviews]);
 
   const tabs = [
     { title: 'Menu', content: <Menu menu={menu} /> },
-    { title: 'Reviews', content: <Reviews reviews={reviews} /> },
+    {
+      title: 'Reviews',
+      content: <Reviews reviews={reviews} activeRestaurantId={id} />,
+    },
   ];
 
   return (
@@ -32,13 +41,14 @@ const Restaurant = ({ restaurant }) => {
 Restaurant.propTypes = {
   restaurant: PropTypes.shape({
     name: PropTypes.string,
-    menu: PropTypes.array,
-    reviews: PropTypes.arrayOf(
-      PropTypes.shape({
-        rating: PropTypes.number.isRequired,
-      }).isRequired
-    ).isRequired,
+    menu: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
+    reviews: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
   }).isRequired,
 };
 
-export default Restaurant;
+const mapStateToProps = (state, ownProps) => ({
+  restaurant: restaurantsSelector(state)[ownProps.id],
+  restaurantReviews: reviewsSelector(state),
+});
+
+export default connect(mapStateToProps)(Restaurant);

src/components/restaurants/restaurants.js

@@ -3,24 +3,25 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import Restaurant from '../restaurant';
 import Tabs from '../tabs';
+import { restaurantsSelector } from '../../redux/selectors';
 
 const Restaurants = ({ restaurants }) => {
-  const tabs = restaurants.map((restaurant) => ({
+  const tabs = Object.values(restaurants).map((restaurant) => ({
     title: restaurant.name,
-    content: <Restaurant restaurant={restaurant} />,
+    content: <Restaurant id={restaurant.id} />,
   }));
 
   return <Tabs tabs={tabs} />;
 };
 
 Restaurants.propTypes = {
-  restaurants: PropTypes.arrayOf(
+  restaurants: PropTypes.shape(
     PropTypes.shape({
       id: PropTypes.string.isRequired,
     }).isRequired
   ).isRequired,
 };
 
 export default connect((state) => ({
-  restaurants: state.restaurants,
+  restaurants: restaurantsSelector(state),
 }))(Restaurants);

src/components/reviews/review-form/review-form.js

@@ -5,10 +5,11 @@ import Rate from '../../rate';
 import styles from './review-form.module.css';
 import { connect } from 'react-redux';
 import Button from '../../button';
+import { addReview } from '../../../redux/actions';
 
 const INITIAL_VALUES = { name: '', text: '', rating: 5 };
 
-const ReviewForm = ({ onSubmit }) => {
+const ReviewForm = ({ onSubmit, activeRestaurantId }) => {
   const { values, handlers, reset } = useForm(INITIAL_VALUES);
 
   const handleSubmit = (ev) => {
@@ -51,6 +52,6 @@ const ReviewForm = ({ onSubmit }) => {
   );
 };
 
-export default connect(null, () => ({
-  onSubmit: (values) => console.log(values), // TODO
+export default connect(null, (dispatch, activeRestaurantId) => ({
+  onSubmit: (values) => dispatch(addReview(values, activeRestaurantId)),
 }))(ReviewForm);

src/components/reviews/review/review.js

@@ -1,35 +1,56 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 
 import Rate from '../../rate';
 import styles from './review.module.css';
 
-const Review = ({ user, text, rating }) => (
+import { reviewsSelector, usersSelector } from '../../../redux/selectors';
+
+const Review = ({ review, userName }) => (
   <div className={styles.review} data-id="review">
     <div className={styles.content}>
       <div>
         <h4 className={styles.name} data-id="review-user">
-          {user}
+          {userName.name}
         </h4>
         <p className={styles.comment} data-id="review-text">
-          {text}
+          {review.text}
         </p>
       </div>
       <div className={styles.rate}>
-        <Rate value={rating} />
+        <Rate value={review.rating} />
       </div>
     </div>
   </div>
 );
 
 Review.propTypes = {
-  user: PropTypes.string,
-  text: PropTypes.string,
-  rating: PropTypes.number.isRequired,
+  review: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    userId: PropTypes.string,
+    text: PropTypes.string,
+    rating: PropTypes.number.isRequired,
+  }).isRequired,
+  userName: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string,
+  }).isRequired,
 };
 
 Review.defaultProps = {
-  user: 'Anonymous',
+  userName: { name: 'Anonymous' },
+};
+
+const mapStateToProps = (state, ownProps) => {
+  const review = reviewsSelector(state)[ownProps.id];
+  const userId = review.userId;
+  const userName = usersSelector(state)[userId];
+
+  return {
+    review,
+    userName,
+  };
 };
 
-export default Review;
+export default connect(mapStateToProps, null)(Review);

src/components/reviews/reviews.js

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

src/redux/actions.js

@@ -1,5 +1,9 @@
-import { INCREMENT, DECREMENT, REMOVE } from './constants';
+import { INCREMENT, DECREMENT, REMOVE, ADD_REVIEW } from './constants';
 
 export const increment = (id) => ({ type: INCREMENT, payload: { id } });
 export const decrement = (id) => ({ type: DECREMENT, payload: { id } });
 export const remove = (id) => ({ type: REMOVE, payload: { id } });
+export const addReview = (values, activeRestaurantId) => ({
+  type: ADD_REVIEW,
+  payload: { values, activeRestaurantId },
+});

src/redux/constants.js

@@ -1,3 +1,4 @@
 export const INCREMENT = 'INCREMENT';
 export const DECREMENT = 'DECREMENT';
 export const REMOVE = 'REMOVE';
+export const ADD_REVIEW = 'ADD_REVIEW';

src/redux/middleware/uuidCreator.js

@@ -0,0 +1,16 @@
+import { v4 as uuidv4 } from 'uuid';
+
+export default (state) => (next) => (action) => {
+  if (action.type === 'ADD_REVIEW') {
+    const newReviewId = uuidv4();
+    const newUserId = uuidv4();
+
+    action.payload.values = {
+      id: newReviewId,
+      userId: newUserId,
+      ...action.payload.values,
+    };
+  }
+
+  next(action);
+};

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,9 +1,31 @@
-import { normalizedRestaurants as defaultRestaurants } from '../../fixtures';
+import { normalizedRestaurants } from '../../fixtures';
+import { ADD_REVIEW } from '../constants';
+
+const defaultRestaurants = normalizedRestaurants.reduce(
+  (acc, restaurant) => ({
+    ...acc,
+    [restaurant.id]: restaurant,
+  }),
+  {}
+);
 
 export default (restaurants = defaultRestaurants, action) => {
-  const { type } = action;
+  const { type, payload } = action;
 
   switch (type) {
+    case ADD_REVIEW: {
+      const addedNewReview = payload.values.id;
+      const activeRestaurantId = payload.activeRestaurantId.activeRestaurantId;
+      const activeRestaurantData = restaurants[activeRestaurantId];
+
+      return {
+        ...restaurants,
+        [activeRestaurantId]: {
+          ...activeRestaurantData,
+          ...activeRestaurantData.reviews.push(addedNewReview),
+        },
+      };
+    }
     default:
       return restaurants;
   }

src/redux/reducer/reviews.js

@@ -1,9 +1,23 @@
-import { normalizedReviews as defaultReviews } from '../../fixtures';
+import { normalizedReviews } from '../../fixtures';
+import { ADD_REVIEW } from '../constants';
+
+const defaultReviews = normalizedReviews.reduce(
+  (acc, review) => ({ ...acc, [review.id]: review }),
+  {}
+);
 
 export default (reviews = defaultReviews, action) => {
-  const { type } = action;
+  const { type, payload } = action;
 
   switch (type) {
+    case ADD_REVIEW:
+      const newReview = { ...payload.values };
+      delete newReview.name;
+
+      return {
+        ...reviews,
+        [newReview.id]: newReview,
+      };
     default:
       return reviews;
   }

src/redux/reducer/users.js

@@ -0,0 +1,28 @@
+import { normalizedUsers } from '../../fixtures';
+import { ADD_REVIEW } from '../constants';
+
+const defaultUsers = normalizedUsers.reduce(
+  (acc, user) => ({ ...acc, [user.id]: user }),
+  {}
+);
+
+export default (users = defaultUsers, action) => {
+  const { type, payload } = action;
+
+  switch (type) {
+    case ADD_REVIEW: {
+      const newUserId = payload.values.userId;
+      const newUserName = payload.values.name;
+
+      return {
+        ...users,
+        [newUserId]: {
+          id: newUserId,
+          name: newUserName,
+        },
+      };
+    }
+    default:
+      return users;
+  }
+};

src/redux/selectors.js

@@ -1,8 +1,10 @@
 import { createSelector } from 'reselect';
 
-// const restaurantsSelector = (state) => state.restaurants;
-const orderSelector = (state) => state.order;
-const productsSelector = (state) => state.products;
+export const restaurantsSelector = (state) => state.restaurants;
+export const orderSelector = (state) => state.order;
+export const productsSelector = (state) => state.products;
+export const reviewsSelector = (state) => state.reviews;
+export const usersSelector = (state) => state.users;
 
 export const orderProductsSelector = createSelector(
   productsSelector,