Merge pull request #300 from Studio-Yandex-Practicum/api-294-get-cart…

…-list #294-api-get-cart-list
Studio-Yandex-Practicum · Apr 17, 2024 · 44a9f76 · 44a9f76
2 parents b8c1caa + f436eee
commit 44a9f76
Show file tree

Hide file tree

Showing 15 changed files with 223 additions and 198 deletions.
diff --git a/src/app/providers/StoreProvider/config/StateSchema.ts b/src/app/providers/StoreProvider/config/StateSchema.ts
@@ -16,6 +16,7 @@ import { IFeedbackSchema } from '@/pages/FeedbackPage/model/types/types'
 import { ICategorySchema, IMainCategorySchema } from '@/widgets/CategoryList/types/types'
 import { ICategoryFiltersSchema } from '@/components/Dropdown/types/types'
 import type { IFeedbackFormSchema } from '@/widgets/FeedbackForm/model/scheme/feedbackFormSliceSchema'
+import { ICartSchema } from '@/pages/CartPage/model/types'
 
 export interface StateSchema {
   login: LoginSchema
@@ -37,6 +38,7 @@ export interface StateSchema {
   categorySlug: CategorySlug
   categoryBranches: ICategorySchema
   getCategories: IMainCategorySchema
+  cart: ICartSchema
   categoryFilters: ICategoryFiltersSchema
 }
 

diff --git a/src/app/providers/StoreProvider/config/store.ts b/src/app/providers/StoreProvider/config/store.ts
@@ -21,6 +21,7 @@ import { getCategoriesReducer } from '@/widgets/CategoryList/slice/pageCategorie
 import { feedbackReducer } from '@/pages/FeedbackPage/model/slice/feedbackSlice'
 import { categoryFiltersSliceReducer } from '@/components/Dropdown/slice/filtersSlice'
 import { feedbackFormReducer } from '@/widgets/FeedbackForm/model/slice/feedbackFormSlice'
+import { cartReducer } from '@/pages/CartPage/model/slice'
 
 export type RootState = StateSchema
 
@@ -44,6 +45,7 @@ const rootReducer: ReducersMapObject<RootState> = {
   categorySlug: categorySlugSliceReducer,
   categoryBranches: categoryBranchesReducer,
   getCategories: getCategoriesReducer,
+  cart: cartReducer,
   categoryFilters: categoryFiltersSliceReducer
 }
 

diff --git a/src/assets/images/cart/arrow-right.svg b/src/assets/images/cart/arrow-right.svg
diff --git a/src/entities/ProductEntity/ui/ProductEntity/ProductEntity.module.scss b/src/entities/ProductEntity/ui/ProductEntity/ProductEntity.module.scss
@@ -8,7 +8,7 @@
   background: var.$white;
   border-radius: 10px;
   height: 110px;
-  width: 80%;
+  width: 60%;
 }
 
 .frame {
@@ -49,8 +49,7 @@
   color: var.$body-color;
   text-overflow: ellipsis;
   overflow: hidden;
-  width: 250px;
-
+
   @include media.respond-to('large') {
     width: 100%;
   }

diff --git a/src/entities/ProductEntity/ui/ProductEntity/ProductEntity.stories.tsx b/src/entities/ProductEntity/ui/ProductEntity/ProductEntity.stories.tsx
@@ -18,10 +18,19 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   args: {
-    src: image1,
-    name: 'Переходник',
-    article: '1229239192',
-    price: 782,
-    currency: '₽'
+    id: 1,
+    category: 'техника',
+    brand: 'Tefal',
+    images: [
+      {
+        image: image1
+      }
+    ],
+    price: '1000',
+    name: 'Tefal Iron',
+    slug: '1hfjnfjkf',
+    description: 'Functional',
+    code: 108290,
+    wb_urls: 'jnfne'
   }
 }
diff --git a/src/entities/ProductEntity/ui/ProductEntity/ProductEntity.tsx b/src/entities/ProductEntity/ui/ProductEntity/ProductEntity.tsx
@@ -1,27 +1,27 @@
 import { type FC } from 'react'
 
-import { TProduct } from '@/mockData/productsData'
+import { IProductData } from '@/pages/CartPage/model/types'
 import Subheading from '@/shared/ui/Subheading/Subheading'
 
 import styles from './ProductEntity.module.scss'
 
 /**
  * Компонент служит для отображения товаров, пришедших с сервера.
- * @param {string} src-картика с изображением продукта;
+ * @param {IImagesData[]} images-картика с изображением продукта;
  * @param {string} name- название продукта;
- * @param {string} article -артикул продукта;
+ * @param {number} id -артикул продукта;
  * @param {number} price -стоимость продукта;
  * @param {string} currency - валюта, в которой обозначена стоимость;
  */
 
-export const ProductEntity: FC<TProduct> = product => {
+export const ProductEntity: FC<IProductData> = product => {
   return (
     <div className={`${styles.description}`}>
       <div className={`${styles.frame}`}>
-        <img src={product.src} alt={'product'} className={styles.image} />
+        <img src={product.images[0].image} alt={'product'} className={styles.image} />
       </div>
       <div className={`${styles.description_wrapper}`}>
-        <Subheading>{product.article}</Subheading>
+        <Subheading>{product.id}</Subheading>
         <a className={`${styles.name}`}>{product.name}</a>
       </div>
     </div>

diff --git a/src/features/CartEdit/ui/CartEdit/CartEdit.module.scss b/src/features/CartEdit/ui/CartEdit/CartEdit.module.scss
@@ -71,7 +71,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 20px;
+  width: 50px; // bug поменяла 20 на 50 для того,чтобы svg отображался в storybook, при 20px в storybook svg сжимается сильно и пропадает, на сайте padding от <Button> переписывается, а в storybook нет 
   height: 100%;
   transition: background 0.25s;
 }
@@ -164,8 +164,14 @@
   font-size: 15px;
   line-height: 1.2;
   font-weight: 400;
+  margin:0;
+  padding: 0;
 
   &:hover {
     color: var.$theme-primary-color;
   }
 }
+
+.arrowIcon {
+  rotate: 180deg;
+}
diff --git a/src/features/CartEdit/ui/CartEdit/CartEdit.stories.tsx b/src/features/CartEdit/ui/CartEdit/CartEdit.stories.tsx
@@ -27,17 +27,23 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   args: {
+    cartId: 85,
+    amount: 2,
     product: {
-      article: '1866887687',
-      quantity: 1,
-      src: image1,
-      name: 'Переходник',
-      price: 1634,
-      currency: 'RUB'
-    },
-    decreaseQuantity: () => {},
-    increaseQuantity: () => {},
-    setQuantity: () => {},
-    removeProduct: () => {}
+      id: 1,
+      category: 'техника',
+      brand: 'Tefal',
+      images: [
+        {
+          image: image1
+        }
+      ],
+      price: '1000',
+      name: 'Tefal Iron',
+      slug: '1hfjnfjkf',
+      description: 'Functional',
+      code: 108290,
+      wb_urls: 'jnfne'
+    }
   }
 }
diff --git a/src/features/CartEdit/ui/CartEdit/CartEdit.tsx b/src/features/CartEdit/ui/CartEdit/CartEdit.tsx
@@ -1,53 +1,53 @@
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 
+import ArrowIcon from '@/assets/images/cart/arrow-right.svg'
 import { ProductEntity } from '@/entities/ProductEntity/ui/ProductEntity/ProductEntity'
-import { TCartItemExt } from '@/mockData/cartData'
+import { IProductData } from '@/pages/CartPage/model/types'
+import { Button } from '@/shared/ui/Button/Button'
 import ButtonDots from '@/shared/ui/ButtonDots/ButtonDots'
 import Paragraph from '@/shared/ui/Paragraph/Paragraph'
 import Subheading from '@/shared/ui/Subheading/Subheading'
 
 import styles from './CartEdit.module.scss'
 
 export type TCartEditProps = {
-  product: TCartItemExt
-  decreaseQuantity: (productArticle: string) => void
-  increaseQuantity: (productArticle: string) => void
-  setQuantity: (productArticle: string, quantity: number) => void
-  removeProduct: (productArticle: string) => void
+  cartId: number
+  amount: number
+  product: IProductData
 }
 
 /**
  * Компонент используется для отображения добавленных в корзину продуктов, изменения кол-ва продуктов в корзине,
  * для удаления продуктов из корзины, для добавления продуктов в закладки
- * @param {TCartItemExt} product - это продукт для определения состояния
- * @param {(productArticle: string) => void} decreaseQuantity- функция для уменьшения количества товара в корзине
- * @param {(productArticle: string) => void} increaseQuantity -функция для увеличения количества товара в корзине
- * @param {(productArticle: string, quantity: number) => void} setQuantity- функция для того, чтобы изменить количество продукта самостоятельно, поставив в input необходимое количество
- * @param {(productArticle: string) => void} removeProduct -функция для удаления продукта из корзины
+ * @param {number} cartId - id корзины
+ * @param {number} amount - количество товаров в корзине
+ * @param {IProductData} product - это продукт для определения состояния
  */
 
-export const CartEdit: React.FC<TCartEditProps> = ({
-  product,
-  decreaseQuantity,
-  increaseQuantity,
-  setQuantity,
-  removeProduct
-}: TCartEditProps) => {
-  const [amount, setAmount] = useState<number>(0)
+// eslint-disable-next-line  @typescript-eslint/no-unused-vars
+export const CartEdit: React.FC<TCartEditProps> = ({ cartId, amount, product }: TCartEditProps) => {
   const [needToOpenContextMenuButtonDots, setNeedToOpen] = useState(false)
 
-  useEffect(() => {
-    setAmount(product.quantity)
-  }, [product.quantity])
-
   function deleteProductHandler() {
     setNeedToOpen(false)
-    removeProduct(product.article)
+    // removeProduct(product.id) переделать на вызов action https://github.com/Studio-Yandex-Practicum/maxboom_frontend/issues/319
   }
   function addToFavoritesHandler() {
     setNeedToOpen(false)
   }
 
+  function increaseAmountHandler() {
+    // tbd https://github.com/Studio-Yandex-Practicum/maxboom_frontend/issues/317
+  }
+
+  function decreaseAmountHandler() {
+    // tbd https://github.com/Studio-Yandex-Practicum/maxboom_frontend/issues/318
+  }
+
+  function setAmountHandler() {
+    //tbd https://github.com/Studio-Yandex-Practicum/maxboom_frontend/issues/316
+  }
+
   return (
     <>
       <div className={styles.container}>
@@ -56,68 +56,49 @@ export const CartEdit: React.FC<TCartEditProps> = ({
           <div className={`${styles.sum_wrapper}`}>
             <Paragraph className={`${styles.sum}`}>
               {' '}
-              {product.price * product.quantity} {product.currency}
+              {amount * Number(product.price)} {product.brand}
+              {/* currency, not brand, c Number непонятно пока*/}
             </Paragraph>
             <Subheading className={`${styles.price}`}>
               {' '}
-              {product.price} {product.currency}/шт
+              {product.price} {product.brand}/шт
+              {/* currency, not brand */}
             </Subheading>
           </div>
         </div>
         <div className={`${styles.counter}`}>
-          <button
+          <Button
             className={`${styles.button} ${styles.button_decrease}`}
             id="button-decrease"
-            onClick={() => {
-              decreaseQuantity(product.article)
-            }}>
-            <svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
-              <path
-                clipRule="evenodd"
-                d="M15.0303 6.46967C15.3232 6.76256 15.3232 7.23744 15.0303 7.53033L10.5607 12L15.0303 16.4697C15.3232 16.7626 15.3232 17.2374 15.0303 17.5303C14.7374 17.8232 14.2626 17.8232 13.9697 17.5303L8.96967 12.5303C8.82902 12.3897 8.75 12.1989 8.75 12C8.75 11.8011 8.82902 11.6103 8.96967 11.4697L13.9697 6.46967C14.2626 6.17678 14.7374 6.17678 15.0303 6.46967Z"
-                fill="black"
-                fillRule="evenodd"
-              />
-            </svg>
-          </button>
+            onClick={decreaseAmountHandler}>
+            <ArrowIcon className={styles.arrowIcon} />
+          </Button>
           <input
             value={amount}
             min="1"
             max="99"
             type="text"
             className={`${styles.input}`}
-            onChange={e => {
-              setQuantity(product.article, Number(e.target.value))
-            }}></input>
-          <button
+            onChange={setAmountHandler}></input>
+          <Button
             className={`${styles.button} ${styles.button_increase}`}
             id="button-increase"
-            onClick={() => {
-              increaseQuantity(product.article)
-            }}>
-            <svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
-              <path
-                clipRule="evenodd"
-                d="M8.96967 17.5303C8.67678 17.2374 8.67678 16.7626 8.96967 16.4697L13.4393 12L8.96967 7.53033C8.67678 7.23744 8.67678 6.76256 8.96967 6.46967C9.26256 6.17678 9.73744 6.17678 10.0303 6.46967L15.0303 11.4697C15.171 11.6103 15.25 11.8011 15.25 12C15.25 12.1989 15.171 12.3897 15.0303 12.5303L10.0303 17.5303C9.73744 17.8232 9.26256 17.8232 8.96967 17.5303Z"
-                fill="black"
-                fillRule="evenodd"
-              />
-            </svg>
-          </button>
+            onClick={increaseAmountHandler}>
+            <ArrowIcon />
+          </Button>
         </div>
         <ButtonDots className={styles.button_dots} isMenuOpen={needToOpenContextMenuButtonDots}>
           <div className={styles.wrapper}>
             <ul className={styles.menu}>
               <li className={styles.item}>
-                <button type="button" className={styles.menu_button} onClick={addToFavoritesHandler}>
+                <Button type="button" className={styles.menu_button} onClick={addToFavoritesHandler}>
                   В закладки
-                </button>
+                </Button>
               </li>
-
               <li>
-                <button type="button" className={styles.menu_button} onClick={deleteProductHandler}>
+                <Button type="button" className={styles.menu_button} onClick={deleteProductHandler}>
                   Удалить
-                </button>
+                </Button>
               </li>
             </ul>
           </div>