3. - Links from Basket Item to Restaurant

Author: Iryna Kashyntseva

src/components/basket/basket-item/basket-item.js

@@ -1,10 +1,12 @@
 import { connect } from 'react-redux';
 import cn from 'classnames';
 import { increment, decrement, remove } from '../../../redux/actions';
+import { Link } from 'react-router-dom';
 import Button from '../../button';
 import styles from './basket-item.module.css';
 
 function BasketItem({
+  restId,
   product,
   amount,
   subtotal,
@@ -15,7 +17,7 @@ function BasketItem({
   return (
     <div className={styles.basketItem}>
       <div className={styles.name}>
-        <span>{product.name}</span>
+        <Link to={`/restaurants/${restId}`}>{product.name}</Link>
       </div>
       <div className={styles.info}>
         <div className={styles.counter}>

src/components/basket/basket.js

@@ -19,10 +19,11 @@ function Basket({ title = 'Basket', total, orderProducts }) {
   return (
     <div className={styles.basket}>
       <h4 className={styles.title}>{title}</h4>
-      {orderProducts.map(({ product, amount, subtotal }) => (
+      {orderProducts.map(({ product, amount, restId, subtotal }) => (
         <BasketItem
           product={product}
           amount={amount}
+          restId={restId}
           key={product.id}
           subtotal={subtotal}
         />

src/components/menu/menu.js

@@ -57,7 +57,7 @@ class Menu extends Component {
       <div className={styles.menu}>
         <div>
           {menu.map((id) => (
-            <Product key={id} id={id} />
+            <Product key={id} id={id} restId={this.props.restId} />
           ))}
         </div>
         <div>

src/components/product/product.js

@@ -57,7 +57,7 @@ const mapStateToProps = (state, props) => ({
 });
 
 const mapDispatchToProps = (dispatch, props) => ({
-  increment: () => dispatch(increment(props.id)),
+  increment: () => dispatch(increment(props.id, props.restId)),
   decrement: () => dispatch(decrement(props.id)),
 });
 

src/redux/actions.js

@@ -20,7 +20,7 @@ import {
   reviewsLoadedSelector,
 } from './selectors';
 
-export const increment = (id) => ({ type: INCREMENT, id });
+export const increment = (id, restId) => ({ type: INCREMENT, id, restId });
 export const decrement = (id) => ({ type: DECREMENT, id });
 export const remove = (id) => ({ type: REMOVE, id });
 

src/redux/reducer/order.js

@@ -1,16 +1,22 @@
+import produce from 'immer';
 import { DECREMENT, INCREMENT, REMOVE } from '../constants';
 
 // { [productId]: amount }
-export default function (state = {}, action) {
-  const { type, id } = action;
+export default produce((draft = {}, action) => {
+  const { type, id, restId } = action;
   switch (type) {
     case INCREMENT:
-      return { ...state, [id]: (state[id] || 0) + 1 };
+      draft[id] = { amount: (draft[id]?.amount || 0) + 1, restId };
+      break;
     case DECREMENT:
-      return { ...state, [id]: state[id] > 0 ? (state[id] || 0) - 1 : 0 };
+      draft[id] = {
+        amount: draft[id]?.amount > 0 ? (draft[id]?.amount || 0) - 1 : 0,
+      };
+      break;
     case REMOVE:
-      return { ...state, [id]: 0 };
+      draft[id] = { amount: 0 };
+      break;
     default:
-      return state;
+      return draft;
   }
-}
+});

src/redux/selectors.js

@@ -32,18 +32,22 @@ export const restaurantSelector = (state, { id }) =>
   restaurantsSelector(state)[id];
 export const productSelector = (state, { id }) => productsSelector(state)[id];
 export const reviewSelector = (state, { id }) => reviewsSelector(state)[id];
-export const amountSelector = (state, { id }) => orderSelector(state)[id] || 0;
+export const amountSelector = (state, { id }) =>
+  orderSelector(state)[id]?.amount || 0;
+export const productRestIdSelector = (state, id) =>
+  orderSelector(state)[id]?.restId;
 export const orderProductsSelector = createSelector(
   orderSelector,
   productsSelector,
   (order, products) =>
     Object.keys(order)
-      .filter((productId) => order[productId] > 0)
+      .filter((productId) => order[productId].amount > 0)
       .map((productId) => products[productId])
       .map((product) => ({
         product,
-        amount: order[product.id],
-        subtotal: order[product.id] * product.price,
+        restId: order[product.id].restId,
+        amount: order[product.id].amount,
+        subtotal: order[product.id].amount * product.price,
       }))
 );