From fc8e5234ced34aae3797ab037a2a810194bd10a3 Mon Sep 17 00:00:00 2001 From: Olga Zlobina Date: Mon, 13 Dec 2021 22:50:55 +0300 Subject: [PATCH] homework-2021-12-10 --- src/components/restaurants/restaurants.js | 22 ++++++++++----------- src/components/reviews/review/review.js | 24 ++++++++++++----------- src/components/reviews/reviews.js | 2 +- src/redux/reducer/index.js | 2 ++ src/redux/reducer/restaurants.js | 7 ++++++- src/redux/reducer/reviews.js | 7 ++++++- src/redux/reducer/users.js | 15 ++++++++++++++ 7 files changed, 53 insertions(+), 26 deletions(-) create mode 100644 src/redux/reducer/users.js diff --git a/src/components/restaurants/restaurants.js b/src/components/restaurants/restaurants.js index 2037758..6f024a2 100644 --- a/src/components/restaurants/restaurants.js +++ b/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 (
@@ -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) => ({ diff --git a/src/components/reviews/review/review.js b/src/components/reviews/review/review.js index fe89ecb..64e9342 100644 --- a/src/components/reviews/review/review.js +++ b/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 }) => (

- {user} + {user.name}

- {text} + {review.text}

- +
); 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); diff --git a/src/components/reviews/reviews.js b/src/components/reviews/reviews.js index 66f6cf1..1d16f2d 100644 --- a/src/components/reviews/reviews.js +++ b/src/components/reviews/reviews.js @@ -7,7 +7,7 @@ const Reviews = ({ reviews }) => { return (
{reviews.map((review) => ( - + ))}
diff --git a/src/redux/reducer/index.js b/src/redux/reducer/index.js index f86f67d..3b5c632 100644 --- a/src/redux/reducer/index.js +++ b/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, }); diff --git a/src/redux/reducer/restaurants.js b/src/redux/reducer/restaurants.js index e7f30c6..226c7f2 100644 --- a/src/redux/reducer/restaurants.js +++ b/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; diff --git a/src/redux/reducer/reviews.js b/src/redux/reducer/reviews.js index 494b5cd..fb5eba9 100644 --- a/src/redux/reducer/reviews.js +++ b/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; diff --git a/src/redux/reducer/users.js b/src/redux/reducer/users.js new file mode 100644 index 0000000..a995cbe --- /dev/null +++ b/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; + } +};