Fixes

mate-academy · Jul 31, 2023 · bbd2171 · bbd2171
1 parent c1e2d59
commit bbd2171
Show file tree

Hide file tree

Showing 5 changed files with 124 additions and 116 deletions.
diff --git a/src/components/CartItem/CartItem.scss b/src/components/CartItem/CartItem.scss
@@ -0,0 +1,47 @@
+@import "../../styles/global-imports";
+
+.CartItem {
+  display: flex;
+  align-items: center;
+  padding: 24px 40px 24px 24px;
+
+  box-sizing: border-box;
+
+  border: 1px solid $c-elements;
+
+  &__delete {
+    margin-right: 24px;
+    width: 16px;
+    height: 16px;
+
+    border: none;
+    background: no-repeat center url("../../images/icons/icon-close.svg");
+
+    cursor: pointer;
+
+    @include hover(transform, rotate(90deg));
+  }
+
+  &__image {
+    margin-right: 24px;
+    padding: 7px;
+
+    & > img {
+      max-width: 66px;
+      max-height: 66px;
+      width: 100%;
+    }
+  }
+
+  &__title {
+    @extend %body-text;
+  }
+
+  &__quantity {
+    display: flex;
+    align-items: center;
+    gap: 13px;
+    margin-left: auto;
+    margin-right: 43px;
+  }
+}
diff --git a/src/components/CartItem/CartItem.tsx b/src/components/CartItem/CartItem.tsx
@@ -0,0 +1,71 @@
+/* eslint-disable jsx-a11y/control-has-associated-label */
+import './CartItem.scss';
+import { useAppDispatch } from '../../app/hooks';
+import {
+  CartItemType,
+  decreaseQuantity,
+  increaseQuantity,
+  remove,
+} from '../../features/cart/cartSlice';
+import { calculateDiscount } from '../../helpers/calculateDiscount';
+import { Button } from '../Button/Button';
+
+type Props = {
+  item: CartItemType;
+};
+
+export const CartItem: React.FC<Props> = ({ item }) => {
+  const dispatch = useAppDispatch();
+
+  const { id, imageUrl, name } = item.product;
+
+  return (
+    <div className="CartItem">
+      <button
+        className="CartItem__delete"
+        type="button"
+        data-cy="cartDeleteButton"
+        onClick={() => dispatch(remove(id))}
+      />
+
+      <div className="CartItem__image">
+        <img
+          src={imageUrl}
+          alt={name}
+        />
+      </div>
+
+      <div className="CartItem__title">
+        {name}
+      </div>
+
+      <div className="CartItem__quantity">
+        <Button
+          variant="quantity"
+          sign="minus"
+          disabled={item.quantity === 1}
+          onClick={() => dispatch(decreaseQuantity(id))}
+        />
+
+        <span
+          data-cy="productQauntity"
+        >
+          {item.quantity}
+        </span>
+
+        <Button
+          variant="quantity"
+          sign="plus"
+          onClick={() => dispatch(increaseQuantity(id))}
+        />
+      </div>
+
+      <div className="CartItem__price">
+        <h2>
+          {`$${calculateDiscount(item.product)}`}
+        </h2>
+      </div>
+
+    </div>
+  );
+};
diff --git a/src/features/cart/cartSlice.ts b/src/features/cart/cartSlice.ts
@@ -1,13 +1,13 @@
 import { PayloadAction, createSlice } from '@reduxjs/toolkit';
 import { Product } from '../../types/Product';
 
-export type CartItem = {
+export type CartItemType = {
   id: string;
   quantity: number;
   product: Product;
 };
 
-type CartState = CartItem[];
+type CartState = CartItemType[];
 
 const initialState: CartState = [];
 

diff --git a/src/pages/Cart/Cart.scss b/src/pages/Cart/Cart.scss
@@ -45,52 +45,6 @@
     }
   }
 
-  &__item {
-    display: flex;
-    align-items: center;
-    padding: 24px 40px 24px 24px;
-
-    box-sizing: border-box;
-
-    border: 1px solid $c-elements;
-
-    &-delete {
-      margin-right: 24px;
-      width: 16px;
-      height: 16px;
-
-      border: none;
-      background: no-repeat center url("../../images/icons/icon-close.svg");
-
-      cursor: pointer;
-
-      @include hover(transform, rotate(90deg));
-    }
-
-    &-image {
-      margin-right: 24px;
-      padding: 7px;
-
-      & > img {
-        max-width: 66px;
-        max-height: 66px;
-        width: 100%;
-      }
-    }
-
-    &-title {
-      @extend %body-text;
-    }
-
-    &-quantity {
-      display: flex;
-      align-items: center;
-      gap: 13px;
-      margin-left: auto;
-      margin-right: 43px;
-    }
-  }
-
   &__return {
     margin-bottom: 16px;
   }

diff --git a/src/pages/Cart/Cart.tsx b/src/pages/Cart/Cart.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable jsx-a11y/control-has-associated-label */
 import {
   useState,
   useMemo,
@@ -9,36 +8,19 @@ import { Button } from '../../components/Button/Button';
 import { GoBackButton } from '../../components/GoBackButton/GoBackButton';
 import { calculateDiscount } from '../../helpers/calculateDiscount';
 import { Breadcrumbs } from '../../components/Breadcrumbs/Breadcrumbs';
-import { useAppDispatch, useAppSelector } from '../../app/hooks';
-import {
-  decreaseQuantity,
-  increaseQuantity,
-  remove,
-} from '../../features/cart/cartSlice';
+import { useAppSelector } from '../../app/hooks';
+import { CartItem } from '../../components/CartItem/CartItem';
 
 export const Cart = () => {
   const [isActive, setIsActive] = useState(false);
   const cart = useAppSelector(state => state.cart);
-  const dispatch = useAppDispatch();
 
   const totalPrice = useMemo(() => {
     return cart.reduce((acc, curr) => {
       return acc + (calculateDiscount(curr.product) * curr.quantity);
     }, 0);
   }, [cart]);
 
-  const handleDeleteItem = (id: string) => {
-    dispatch(remove(id));
-  };
-
-  const handleIncreaseQuantity = (itemId: string) => {
-    dispatch(increaseQuantity(itemId));
-  };
-
-  const handleDecreaseQuantity = (itemId: string) => {
-    dispatch(decreaseQuantity(itemId));
-  };
-
   const handleCheckout = () => {
     setIsActive(true);
 
@@ -84,54 +66,8 @@ export const Cart = () => {
             <div className="Cart__products">
               <ul className="Cart__products-list">
                 {cart.map(item => (
-                  <li className="Cart__products-item" key={item.id}>
-                    <div className="Cart__item">
-                      <button
-                        className="Cart__item-delete"
-                        type="button"
-                        data-cy="cartDeleteButton"
-                        onClick={handleDeleteItem.bind(null, item.product.id)}
-                      />
-
-                      <div className="Cart__item-image">
-                        <img
-                          src={item.product.imageUrl}
-                          alt={item.product.name}
-                        />
-                      </div>
-
-                      <div className="Cart__item-title">
-                        {item.product.name}
-                      </div>
-
-                      <div className="Cart__item-quantity">
-                        <Button
-                          variant="quantity"
-                          sign="minus"
-                          disabled={item.quantity === 1}
-                          onClick={() => handleDecreaseQuantity(item.id)}
-                        />
-
-                        <span
-                          data-cy="productQauntity"
-                        >
-                          {item.quantity}
-                        </span>
-
-                        <Button
-                          variant="quantity"
-                          sign="plus"
-                          onClick={() => handleIncreaseQuantity(item.id)}
-                        />
-                      </div>
-
-                      <div className="Cart__item-price">
-                        <h2>
-                          {`$${calculateDiscount(item.product)}`}
-                        </h2>
-                      </div>
-
-                    </div>
+                  <li key={item.id}>
+                    <CartItem item={item} />
                   </li>
                 ))}
               </ul>