Merge branch 'master' of github.com:Studio-Yandex-Practicum/maxboom_f…

…rontend into enhancement_289_favorite-page

src/entities/Category/selectors/categorySelectors.ts

@@ -6,3 +6,5 @@ export const selectDisplayedCategories = (state: RootState) => state.category.di
 export const selectCategoryId = (state: RootState) => state.categoryId.categoryId
 
 export const selectCategorySlug = (state: RootState) => state.categorySlug.categorySlug
+
+export const getLoading = (state: RootState) => state.category.isLoading

src/entities/Category/slice/categorySlice.ts

@@ -8,6 +8,7 @@ import { ApiError, ApiErrorTypes, ApiRoutes } from '@/shared/api/types'
 import type { Category, CategorySchema } from '../types/types'
 
 const initialState: CategorySchema = {
+  isLoading: false,
   categories: [],
   displayedCategories: [],
   error: undefined
@@ -34,13 +35,16 @@ const categorySlice = createSlice({
   extraReducers: builder => {
     builder
       .addCase(fetchCategories.pending, state => {
+        state.isLoading = true
         state.error = undefined
       })
       .addCase(fetchCategories.fulfilled, (state, action) => {
+        state.isLoading = false
         state.categories = action.payload
         state.displayedCategories = action.payload.filter((c: Category) => c.is_visible_on_main === true)
       })
       .addCase(fetchCategories.rejected, (state, { payload }) => {
+        state.isLoading = false
         state.error = rejectedPayloadHandle(payload)
       })
   }

src/entities/Category/types/types.ts

@@ -1,4 +1,5 @@
 export interface CategorySchema {
+  isLoading: boolean
   categories: Category[]
   displayedCategories: Category[]
   error?: string | string[]

src/entities/Payments/Payments.tsx

@@ -10,22 +10,19 @@ type TPayments = {
 
 type Logo = {
   image: string
-  title: string
   url: string
 }
 
 /** платежная система
- * @param {string} image - путь к картинке
- * @param {string} title - название
- * @param {string} url - путь к сайту
+ * @param {url: string, image: string} data[] массив платежных систем
  */
 const Payments: FC<TPayments> = ({ data }) => {
   return (
     <ul className={styles.payments}>
       {data.footer.additional_logos.map(logo => (
-        <li className={styles['payment-nav']} key={logo.title}>
-          <Link to={logo.url} className={styles['payment-item']}>
-            <img className={styles['payment-icon']} src={logo.image} title={logo.title} alt={logo.title} />
+        <li className={styles['payment-nav']} key={logo.url}>
+          <Link to={logo.url} className={styles['payment-item']} target="_blank">
+            <img className={styles['payment-icon']} src={logo.image} title={logo.url} alt={logo.url} />
           </Link>
         </li>
       ))}

src/entities/ProductEntity/ui/ProductEntity/ProductEntity.tsx

@@ -1,6 +1,6 @@
 import { type FC } from 'react'
 
-import { IProduct } from '@/models/ProductModel'
+import { IProduct } from '@/shared/model/types/ProductModel'
 import Subheading from '@/shared/ui/Subheading/Subheading'
 
 import styles from './ProductEntity.module.scss'

src/entities/SideBarButton/index.tsx

@@ -0,0 +1,2 @@
+import SideBarButton from './ui/SideBarButton'
+export default SideBarButton

src/entities/SideBarButton/ui/SideBarButton.module.scss

@@ -0,0 +1,20 @@
+@use '@/shared/styles/utils/variables' as var;
+
+.sideBarButton {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+  width: fit-content;
+  background: var.$white;
+  font-size: 14px;
+  color: var.$body-color;
+  fill: var.$body-color;
+  padding: 5px 15px;
+  transition: 0.25s;
+}
+
+.sideBarButton:hover {
+  color: var.$header-color;
+  fill: var.$header-color;
+}

src/entities/SideBarButton/ui/SideBarButton.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import SideBarButton from './SideBarButton'
+
+const meta = {
+  title: 'entities/SideBarButton',
+  component: SideBarButton,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof SideBarButton>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}

src/entities/SideBarButton/ui/SideBarButton.tsx

@@ -0,0 +1,31 @@
+import { FC } from 'react'
+
+import CategoryIcon from '@/assets/images/sideBarMenu/iconCategory.svg'
+import { Button, ButtonDesign, ButtonSize } from '@/shared/ui/Button/Button'
+
+import styles from './SideBarButton.module.scss'
+
+interface ISideBarButton {
+  onClick: () => void
+}
+
+/**
+ * Компонент кнопки "Меню" - для адаптива Side Bar Menu
+ * @param {function} onClick - функция клика для открытия модального окна SideBarMenuModal
+ */
+
+const SideBarButton: FC<ISideBarButton> = ({ onClick }) => {
+  return (
+    <Button
+      design={ButtonDesign.SQUARE}
+      size={ButtonSize.S}
+      type="button"
+      onClick={onClick}
+      className={styles.sideBarButton}>
+      <span>Меню</span>
+      <CategoryIcon />
+    </Button>
+  )
+}
+
+export default SideBarButton

src/features/CartEdit/model/services/putDecreaseProductAmount.ts

@@ -0,0 +1,23 @@
+import { createAsyncThunk } from '@reduxjs/toolkit'
+
+import { ThunkConfig } from '@/app/providers/StoreProvider/config/StateSchema'
+import { apiErrorIdentify } from '@/shared/api/apiErrorIdentify'
+import { ApiError, ApiErrorTypes, ApiRoutes } from '@/shared/api/types'
+import { IProductCartList } from '@/shared/model/types/ProductCartListModel'
+
+export const putDecreaseProductAmount = createAsyncThunk<IProductCartList, number, ThunkConfig<ApiError>>(
+  'cart-decrease-product-amount',
+  async (productId, thunkAPI) => {
+    const { rejectWithValue, extra } = thunkAPI
+    try {
+      const { data } = await extra.api.put(
+        `api/${ApiRoutes.DECREASE_PRODUCT_AMOUNT}`,
+        { product: productId },
+        { withCredentials: true }
+      )
+      return data
+    } catch (error) {
+      return rejectWithValue(apiErrorIdentify(error, ApiErrorTypes.DATA_EMPTY_ERROR))
+    }
+  }
+)

src/features/CartEdit/model/services/putIncreaseProductAmount.ts

@@ -1,9 +1,9 @@
 import { createAsyncThunk } from '@reduxjs/toolkit'
 
 import { ThunkConfig } from '@/app/providers/StoreProvider/config/StateSchema'
-import { IProductCartList } from '@/models/ProductCartListModel'
 import { apiErrorIdentify } from '@/shared/api/apiErrorIdentify'
 import { ApiError, ApiErrorTypes, ApiRoutes } from '@/shared/api/types'
+import { IProductCartList } from '@/shared/model/types/ProductCartListModel'
 
 export const putIncreaseProductAmount = createAsyncThunk<IProductCartList, number, ThunkConfig<ApiError>>(
   'cart-increase-product-amount',

src/features/CartEdit/model/slice/productAmountSlice.ts

@@ -2,6 +2,7 @@ import { createSlice } from '@reduxjs/toolkit'
 
 import { rejectedPayloadHandle } from '@/shared/api/rejectedPayloadHandle'
 
+import { putDecreaseProductAmount } from '../services/putDecreaseProductAmount'
 import { putIncreaseProductAmount } from '../services/putIncreaseProductAmount'
 import { IProductAmountStateSchema } from '../types'
 
@@ -21,8 +22,10 @@ const initialState: IProductAmountStateSchema = {
       code: 2147483647,
       wb_urls: ''
     },
-    full_price: 0
-  }
+    full_price: 0,
+    full_weight: 0
+  },
+  isDecreaseSuccessful: false
 }
 
 export const productAmountSlice = createSlice({
@@ -37,6 +40,7 @@ export const productAmountSlice = createSlice({
     builder
       .addCase(putIncreaseProductAmount.pending, state => {
         state.isIncreaseSuccessful = false
+        state.isDecreaseSuccessful = false
       })
       .addCase(putIncreaseProductAmount.fulfilled, (state, { payload }) => {
         state.isIncreaseSuccessful = true
@@ -46,6 +50,18 @@ export const productAmountSlice = createSlice({
         state.isIncreaseSuccessful = false
         state.error = rejectedPayloadHandle(payload)
       })
+
+      .addCase(putDecreaseProductAmount.pending, state => {
+        state.isDecreaseSuccessful = false
+      })
+      .addCase(putDecreaseProductAmount.fulfilled, (state, { payload }) => {
+        state.isDecreaseSuccessful = true
+        state.productList = payload
+      })
+      .addCase(putDecreaseProductAmount.rejected, (state, { payload }) => {
+        state.isDecreaseSuccessful = false
+        state.error = rejectedPayloadHandle(payload)
+      })
   }
 })
 

src/features/CartEdit/model/types.ts

@@ -1,7 +1,8 @@
-import { IProductCartList } from '@/models/ProductCartListModel'
+import { IProductCartList } from '@/shared/model/types/ProductCartListModel'
 
 export interface IProductAmountStateSchema {
   isIncreaseSuccessful: boolean
+  isDecreaseSuccessful: boolean
   productList: IProductCartList
   error?: string | string[]
 }

src/features/CartEdit/ui/CartEdit/CartEdit.module.scss

@@ -71,7 +71,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 50px; // bug поменяла 20 на 50 для того,чтобы svg отображался в storybook, при 20px в storybook svg сжимается сильно и пропадает, на сайте padding от <Button> переписывается, а в storybook нет 
+  width: 50px; // bug поменяла 20 на 50 для того,чтобы svg отображался в storybook, при 20px в storybook svg сжимается сильно и пропадает, на сайте padding от <Button> переписывается, а в storybook нет
   height: 100%;
   transition: background 0.25s;
 }
@@ -174,4 +174,4 @@
 
 .arrowIcon {
   rotate: 180deg;
-}
+}

src/features/CartEdit/ui/CartEdit/CartEdit.stories.tsx

@@ -46,7 +46,8 @@ export const Default: Story = {
         code: 108290,
         wb_urls: 'jnfne'
       },
-      full_price: 0
+      full_price: 0,
+      full_weight: 0
     }
   }
 }

src/features/CartEdit/ui/CartEdit/CartEdit.tsx

@@ -3,14 +3,15 @@ import { useSelector } from 'react-redux'
 
 import ArrowIcon from '@/assets/images/cart/arrow-right.svg'
 import { ProductEntity } from '@/entities/ProductEntity/ui/ProductEntity/ProductEntity'
-import { IProductCartList } from '@/models/ProductCartListModel'
 import { useAppDispatch } from '@/shared/libs/hooks/store'
+import { IProductCartList } from '@/shared/model/types/ProductCartListModel'
 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 { getProductListSelector } from '../../model/selectors'
+import { putDecreaseProductAmount } from '../../model/services/putDecreaseProductAmount'
 import { putIncreaseProductAmount } from '../../model/services/putIncreaseProductAmount'
 import { productAmountActions } from '../../model/slice/productAmountSlice'
 
@@ -48,6 +49,7 @@ export const CartEdit: React.FC<TCartEditProps> = ({ cartId, productList }: TCar
   }
 
   function decreaseAmountHandler() {
+    dispatch(putDecreaseProductAmount(productListState.product.id))
     // tbd https://github.com/Studio-Yandex-Practicum/maxboom_frontend/issues/318
   }
 

src/features/SideBar/index.tsx

@@ -0,0 +1,2 @@
+import SideBar from './ui/SideBar'
+export default SideBar

src/features/SideBar/ui/SideBar.module.scss

@@ -0,0 +1,51 @@
+@use '@/shared/styles/utils/variables' as var;
+@use '@/shared/styles/utils/mixins' as media;
+
+.sideBar {
+  display: flex;
+  flex-direction: column;
+  min-width: 100%;
+  border-radius: 5px;
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    background: var.$body-bg;
+    border-radius: 6px;
+    padding: 10px 10px 10px 15px;
+    cursor: pointer;
+    transition: 0.25s;
+  }
+
+  &__headerText {
+    transition: 0.25s;
+  }
+
+  &__headerArrow {
+    fill: var.$body-color;
+    transition: 0.25s;
+  }
+
+  &__headerArrow_active {
+    transform: rotate(180deg);
+  }
+
+  &__header:hover &__headerText {
+    color: var.$header-color;
+  }
+
+  &__header:hover &__headerArrow path {
+    fill: var.$header-color;
+  }
+
+  &__children {
+    padding: 15px 0 20px;
+    transition: 0.5s;
+
+    &_close {
+      padding: 0;
+    }
+  }
+}