homework-2021-12-10

src/components/restaurants/restaurants.js

@@ -5,17 +5,20 @@ import Restaurant from '../restaurant';
 import Tabs from '../tabs';
 
 function Restaurants({ restaurants }) {
-  const [activeId, setActiveId] = useState(restaurants[0].id);
+  const [activeId, setActiveId] = useState(
+    restaurants[Object.keys(restaurants)[0]].id
+  );
 
   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]
-  );
+  const activeRestaurant = restaurants[activeId];
 
   return (
     <div>
@@ -26,12 +29,7 @@ function Restaurants({ restaurants }) {
 }
 
 Restaurants.propTypes = {
-  restaurants: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string.isRequired,
-      name: PropTypes.string,
-    }).isRequired
-  ).isRequired,
+  restaurants: PropTypes.object.isRequired,
 };
 
 const mapStateToProps = (state) => ({

src/components/reviews/review/review.js

@@ -1,34 +1,36 @@
 import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
 
 import Rate from '../../rate';
 import styles from './review.module.css';
 
-const Review = ({ user, text, rating }) => (
+const Review = ({ id, user, review }) => (
   <div className={styles.review} data-id="review">
     <div className={styles.content}>
       <div>
         <h4 className={styles.name} data-id="review-user">
-          {user}
+          {user.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,
+  id: PropTypes.string.isRequired,
+  user: PropTypes.shape,
+  review: PropTypes.shape,
 };
 
-Review.defaultProps = {
-  user: 'Anonymous',
-};
+const mapStateToProps = (state, props) => ({
+  review: state.reviews[props.id],
+  user: state.users[state.reviews[props.id].userId],
+});
 
-export default Review;
+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/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;
+  }
+};