HT4

src/components/restaurant/restaurant.js

@@ -16,7 +16,10 @@ const Restaurant = ({ restaurant }) => {
 
   const tabs = [
     { title: 'Menu', content: <Menu menu={menu} /> },
-    { title: 'Reviews', content: <Reviews reviews={reviews} /> },
+    {
+      title: 'Reviews',
+      content: <Reviews reviews={reviews} restaurantId={restaurant.id} />,
+    },
   ];
 
   return (

src/components/restaurants/restaurants.js

@@ -5,10 +5,12 @@ import Restaurant from '../restaurant';
 import Tabs from '../tabs';
 
 const Restaurants = ({ restaurants }) => {
-  const tabs = restaurants.map((restaurant) => ({
-    title: restaurant.name,
-    content: <Restaurant restaurant={restaurant} />,
-  }));
+  const tabs = Object.keys(restaurants).map((restaurantId) => {
+    return {
+      title: restaurants[restaurantId].name,
+      content: <Restaurant restaurant={restaurants[restaurantId]} />,
+    };
+  });
 
   return <Tabs tabs={tabs} />;
 };

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

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

src/components/reviews/review/review.js

@@ -1,26 +1,32 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-
+import { connect } from 'react-redux';
 import Rate from '../../rate';
 import styles from './review.module.css';
+import {
+  reviewsRestaurantSelector,
+  reviewsUsersSelector,
+} 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 = ({ text, user, rating }) => {
+  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,
@@ -32,4 +38,14 @@ Review.defaultProps = {
   user: 'Anonymous',
 };
 
-export default Review;
+const mapStateToProps = (state, ownProps) => {
+  const review = reviewsRestaurantSelector(state)[ownProps.id];
+
+  return {
+    text: reviewsRestaurantSelector(state)[ownProps.id].text,
+    user: reviewsUsersSelector(state)[review.userId].name,
+    rating: reviewsRestaurantSelector(state)[ownProps.id].rating,
+  };
+};
+
+export default connect(mapStateToProps)(Review);

src/components/reviews/reviews.js

@@ -4,13 +4,14 @@ import Review from './review';
 import ReviewForm from './review-form';
 import styles from './reviews.module.css';
 
-const Reviews = ({ reviews }) => {
+const Reviews = ({ reviews, restaurantId }) => {
   return (
     <div className={styles.reviews}>
-      {reviews.map((review) => (
-        <Review key={review.id} {...review} />
+      {reviews.map((id) => (
+        <Review key={id} id={id} />
       ))}
-      <ReviewForm />
+
+      <ReviewForm restaurantId={restaurantId} />
     </div>
   );
 };

src/redux/actions.js

@@ -1,5 +1,6 @@
-import { INCREMENT, DECREMENT, REMOVE } from './constants';
+import { INCREMENT, DECREMENT, REMOVE, SUBMIT } 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 submitReview = (values) => ({ type: SUBMIT, payload: { values } });

src/redux/constants.js

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

src/redux/middleware/uuid.js

@@ -0,0 +1,20 @@
+import { v4 as uuidv4 } from 'uuid';
+import { SUBMIT } from '../constants';
+
+const uuid = (store) => (next) => (action) => {
+  const {
+    payload: { values },
+    type,
+  } = action;
+
+  switch (type) {
+    case SUBMIT:
+      const valuesWithId = { ...values, id: uuidv4(), userId: uuidv4() };
+      next({ ...action, payload: valuesWithId });
+      break;
+    default:
+      next(action);
+  }
+};
+
+export default uuid;

src/redux/reducer/index.js

@@ -4,12 +4,14 @@ import order from './order';
 import restaurants from './restaurants';
 import products from './products';
 import reviews from './reviews';
+import users from './users';
 
 const reducer = combineReducers({
   order,
   restaurants,
   products,
   reviews,
+  users,
 });
 
 export default reducer;

src/redux/reducer/restaurants.js

@@ -1,9 +1,23 @@
-import { normalizedRestaurants as defaultRestaurants } from '../../fixtures';
+import { normalizedRestaurants } from '../../fixtures';
+import { SUBMIT } from '../constants';
 
-const reducer = (restaurants = defaultRestaurants, action) => {
-  const { type } = action;
+const defaultRestaurants = normalizedRestaurants.reduce(
+  (acc, restaurant) => ({ ...acc, [restaurant.id]: restaurant }),
+  {}
+);
 
+const reducer = (restaurants = defaultRestaurants, action) => {
+  const { type, payload } = action;
   switch (type) {
+    case SUBMIT:
+      const restaurantToUpdate = restaurants[payload.restaurantId];
+      return {
+        ...restaurants,
+        [payload.restaurantId]: {
+          ...restaurantToUpdate,
+          reviews: [...restaurantToUpdate.reviews, payload.id],
+        },
+      };
     default:
       return restaurants;
   }

src/redux/reducer/reviews.js

@@ -1,9 +1,25 @@
-import { normalizedReviews as defaultReviews } from '../../fixtures';
+import { normalizedReviews } from '../../fixtures';
+import { SUBMIT } from '../constants';
+
+const defaultReviews = normalizedReviews.reduce(
+  (acc, review) => ({ ...acc, [review.id]: review }),
+  {}
+);
 
 const reducer = (reviews = defaultReviews, action) => {
-  const { type } = action;
+  const { type, payload } = action;
 
   switch (type) {
+    case SUBMIT:
+      return {
+        ...reviews,
+        [payload.id]: {
+          id: payload.id,
+          userId: payload.userId,
+          text: payload.text,
+          rating: payload.rate,
+        },
+      };
     default:
       return reviews;
   }

src/redux/reducer/users.js

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

src/redux/selectors.js

@@ -3,6 +3,8 @@ import { createSelector } from 'reselect';
 // const restaurantsSelector = (state) => state.restaurants;
 const orderSelector = (state) => state.order;
 const productsSelector = (state) => state.products;
+const reviewsSelector = (state) => state.reviews;
+const usersSelector = (state) => state.users;
 
 export const orderProductsSelector = createSelector(
   productsSelector,
@@ -24,3 +26,13 @@ export const totalSelector = createSelector(
   (orderProducts) =>
     orderProducts.reduce((acc, { subtotal }) => acc + subtotal, 0)
 );
+
+export const reviewsRestaurantSelector = createSelector(
+  reviewsSelector,
+  (reviews) => reviews
+);
+
+export const reviewsUsersSelector = createSelector(
+  usersSelector,
+  (users) => users
+);

src/redux/store.js

@@ -1,12 +1,13 @@
 import { applyMiddleware, createStore } from 'redux';
 import { composeWithDevTools } from 'redux-devtools-extension';
 import logger from './middleware/logger';
+import uuid from './middleware/uuid';
 
 import reducer from './reducer';
 
 const store = createStore(
   reducer,
-  composeWithDevTools(applyMiddleware(logger))
+  composeWithDevTools(applyMiddleware(logger, uuid))
 );
 
 export default store;