Ht4 - kostenevich

package.json

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

src/components/menu/menu.js

@@ -7,13 +7,13 @@ import Basket from '../basket';
 import styles from './menu.module.css';
 
 class Menu extends Component {
-  static propTypes = {
-    menu: PropTypes.arrayOf(
-      PropTypes.shape({
-        id: PropTypes.string.isRequired,
-      }).isRequired
-    ).isRequired,
-  };
+  // static propTypes = {
+  //   menu: PropTypes.arrayOf(
+  //     PropTypes.shape({
+  //       id: PropTypes.string.isRequired,
+  //     }).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 Button from '../button';
 import { decrement, increment } from '../../redux/actions';
+import { productAmountSelector, productSelector } from '../../redux/selectors';
 
 function Product({ product, amount, decrement, increment, fetchData }) {
   useEffect(() => {
@@ -56,8 +57,8 @@ Product.propTypes = {
 };
 
 const mapStateToProps = (state, props) => ({
-  amount: state.order[props.id] || 0,
-  product: state.products[props.id],
+  amount: productAmountSelector(state)(props.id),
+  product: productSelector(state)(props.id),
 });
 
 // const mapDispatchToProps = {

src/components/restaurant/restaurant.js

@@ -5,16 +5,20 @@ import Reviews from '../reviews';
 import Banner from '../banner';
 import Rate from '../rate';
 import Tabs from '../tabs';
+import { connect } from 'react-redux';
+import {
+  averageRatingSelector,
+  restaurantSelector,
+} from '../../redux/selectors';
 
-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 averageRating = useMemo(() => {
+  //   const total = reviews.reduce((acc, { rating }) => acc + rating, 0);
+  //   return Math.round(total / reviews.length);
+  // }, [reviews]);
 
   const tabs = [
     { id: 'menu', label: 'Menu' },
@@ -28,22 +32,33 @@ const Restaurant = ({ restaurant }) => {
       </Banner>
       <Tabs tabs={tabs} activeId={activeTab} onChange={setActiveTab} />
       {activeTab === 'menu' && <Menu menu={menu} key={id} />}
-      {activeTab === 'reviews' && <Reviews reviews={reviews} />}
+      {activeTab === 'reviews' && (
+        <Reviews reviews={reviews} restaurantId={id} />
+      )}
     </div>
   );
 };
 
-Restaurant.propTypes = {
-  restaurant: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    name: PropTypes.string,
-    menu: PropTypes.array,
-    reviews: PropTypes.arrayOf(
-      PropTypes.shape({
-        rating: PropTypes.number.isRequired,
-      }).isRequired
-    ).isRequired,
-  }).isRequired,
+Restaurant.defaultProps = {
+  averageRating: 3,
 };
 
-export default Restaurant;
+// Restaurant.propTypes = {
+//   restaurant: PropTypes.shape({
+//     id: PropTypes.string.isRequired,
+//     name: PropTypes.string,
+//     menu: PropTypes.array,
+//     reviews: PropTypes.arrayOf(
+//       PropTypes.shape({
+//         rating: PropTypes.number.isRequired,
+//       }).isRequired
+//     ).isRequired,
+//   }).isRequired,
+// };
+
+export default connect((state, props) => {
+  return {
+    restaurant: restaurantSelector(state)(props.id),
+    averageRating: averageRatingSelector(state)(props.id),
+  };
+})(Restaurant);

src/components/restaurants/restaurants.js

@@ -3,39 +3,31 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import Restaurant from '../restaurant';
 import Tabs from '../tabs';
+import { tabsSelector, restaurantsSelector } from '../../redux/selectors';
 
-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({ restaurants, tabs }) {
+  const [activeId, setActiveId] = useState(restaurants[0]);
 
   return (
     <div>
       <Tabs tabs={tabs} onChange={setActiveId} activeId={activeId} />
-      <Restaurant restaurant={activeRestaurant} />
+      <Restaurant id={activeId} />
     </div>
   );
 }
 
-Restaurants.propTypes = {
-  restaurants: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string.isRequired,
-      name: PropTypes.string,
-    }).isRequired
-  ).isRequired,
-};
-
-const mapStateToProps = (state) => ({
-  restaurants: state.restaurants,
-});
+// Restaurants.propTypes = {
+//   restaurants: PropTypes.arrayOf(
+//     PropTypes.shape({
+//       id: PropTypes.string.isRequired,
+//       name: PropTypes.string,
+//     }).isRequired
+//   ).isRequired,
+// };
 
-export default connect(mapStateToProps)(Restaurants);
+export default connect((state) => {
+  return {
+    tabs: tabsSelector(state),
+    restaurants: restaurantsSelector(state),
+  };
+})(Restaurants);

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

@@ -1,19 +1,18 @@
 import { connect } from 'react-redux';
-
 import useForm from '../../../hooks/use-form';
 import Rate from '../../rate';
 import Button from '../../button';
-
 import styles from './review-form.module.css';
+import { submit } from '../../../redux/actions';
+import { restaurantSelector } from '../../../redux/selectors';
 
 const INITIAL_VALUES = { name: '', text: '', rating: 3 };
 
-const ReviewForm = ({ onSubmit }) => {
+const ReviewForm = ({ onSubmit, restaurantId }) => {
   const { values, handlers, reset } = useForm(INITIAL_VALUES);
-
   const handleSubmit = (ev) => {
     ev.preventDefault();
-    onSubmit(values);
+    onSubmit({ ...values, restaurantId });
     reset();
   };
 
@@ -51,6 +50,13 @@ const ReviewForm = ({ onSubmit }) => {
   );
 };
 
-export default connect(null, () => ({
-  onSubmit: (values) => console.log(values), // TODO
-}))(ReviewForm);
+const mapStateToProps = (state, props) => {
+  return {
+    restaurantId: props.restaurantId,
+  };
+};
+const mapDispatchToProps = (dispatch) => ({
+  onSubmit: (values) => dispatch(submit(values)),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(ReviewForm);

src/components/reviews/review/review.js

@@ -1,34 +1,43 @@
 import PropTypes from 'prop-types';
-
+import { connect } from 'react-redux';
+import { reviewsSelector, userSelector } from '../../../redux/selectors';
 import Rate from '../../rate';
 import styles from './review.module.css';
 
-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 = ({ user, review }) => {
+  const { text, rating } = review;
+  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,
-  text: PropTypes.string,
-  rating: PropTypes.number.isRequired,
+  );
 };
 
+// Review.propTypes = {
+//   user: PropTypes.string,
+//   text: PropTypes.string,
+//   rating: PropTypes.number.isRequired,
+// };
+
 Review.defaultProps = {
   user: 'Anonymous',
 };
 
-export default Review;
+export default connect((state, props) => {
+  return {
+    review: reviewsSelector(state)(props.id),
+    user: userSelector(state)(props.id),
+  };
+})(Review);

src/components/reviews/reviews.js

@@ -1,25 +1,27 @@
 import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { reviewsSelector } from '../../redux/selectors';
 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>
   );
 };
 
-Reviews.propTypes = {
-  reviews: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string.isRequired,
-    }).isRequired
-  ).isRequired,
-};
+// Reviews.propTypes = {
+//   reviews: PropTypes.arrayOf(
+//     PropTypes.shape({
+//       id: PropTypes.string.isRequired,
+//     }).isRequired
+//   ).isRequired,
+// };
 
-export default Reviews;
+export default connect()(Reviews);

src/redux/actions.js

@@ -1,5 +1,6 @@
-import { DECREMENT, INCREMENT, REMOVE } from './constants';
+import { DECREMENT, INCREMENT, REMOVE, SUBMIT } from './constants';
 
 export const increment = (id) => ({ type: INCREMENT, id });
 export const decrement = (id) => ({ type: DECREMENT, id });
 export const remove = (id) => ({ type: REMOVE, id });
+export const submit = (values) => ({ type: SUBMIT, 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/idCreator.js

@@ -0,0 +1,15 @@
+import { v4 as uuidv4 } from 'uuid';
+import { SUBMIT } from '../constants';
+export default (store) => (next) => (action) => {
+  if (action.type === SUBMIT) {
+    const reviewId = uuidv4();
+    const userId = uuidv4();
+
+    action.values.userId = userId;
+    action.values.id = reviewId;
+
+    next(action);
+  }
+
+  return;
+};

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,
 });