Development 291 add to cart

src/app/App.tsx

@@ -1,6 +1,7 @@
 import { useEffect } from 'react'
 import { RouterProvider } from 'react-router-dom'
 
+import { getCart } from '@/entities/CartEntity/model/slice/cartEntitySlice'
 import { loginActions } from '@/features/login/model/slice/loginSlice'
 import { $api } from '@/shared/api/api'
 import { tokenFromStorageGet } from '@/shared/libs/helpers/localStorageHandler'
@@ -17,6 +18,8 @@ function App() {
       dispatch(loginActions.initAuth(token))
       $api.addToken(token)
     }
+
+    dispatch(getCart())
   }, [dispatch])
   return <RouterProvider router={router} />
 }

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 { ICartEntitySchema } from '@/entities/CartEntity/model/types/types'
 import { IAboutUsSchema } from '@/pages/AboutUsPage/model/types/types'
 import { ICartSchema } from '@/pages/CartPage/model/types'
 
@@ -41,6 +42,7 @@ export interface StateSchema {
   categoryBranches: ICategorySchema
   getCategories: IMainCategorySchema
   cart: ICartSchema
+  cartEntity: ICartEntitySchema
   categoryFilters: ICategoryFiltersSchema
 }
 

src/app/providers/StoreProvider/config/store.ts

@@ -23,6 +23,7 @@ import { categoryFiltersSliceReducer } from '@/components/Dropdown/slice/filters
 import { feedbackFormReducer } from '@/widgets/FeedbackForm/model/slice/feedbackFormSlice'
 import { aboutUsReducer } from '@/pages/AboutUsPage/model/slice/aboutUsSlice'
 import { cartReducer } from '@/pages/CartPage/model/slice'
+import { cartEntityReducer } from '@/entities/CartEntity/model/slice/cartEntitySlice'
 
 export type RootState = StateSchema
 
@@ -47,6 +48,7 @@ const rootReducer: ReducersMapObject<RootState> = {
   categorySlug: categorySlugSliceReducer,
   categoryBranches: categoryBranchesReducer,
   getCategories: getCategoriesReducer,
+  cartEntity: cartEntityReducer,
   cart: cartReducer,
   categoryFilters: categoryFiltersSliceReducer
 }

src/entities/CartEntity/model/functions/cartHelper.ts

@@ -0,0 +1,28 @@
+import type { ICartProduct } from '../types/types'
+
+/**
+ * Функция проверки наличия товара в корзине
+ *
+ * @param {string} slug Slug товара
+ * @param {ICartProduct[]} cartProducts Массив товаров в корзине
+ * @returns {boolean} true, если товар есть в корзине
+ */
+export const isInCartBySlug = (slug: string, cartProducts: ICartProduct[]): boolean => {
+  console.log(slug, cartProducts)
+  if (cartProducts.length === 0) return false
+
+  return cartProducts.some(p => p.product.slug === slug)
+}
+
+/**
+ * Функция проверки наличия товара в корзине
+ *
+ * @param {number} id Id товара
+ * @param {ICartProduct[]} cartProducts Массив товаров в корзине
+ * @returns {boolean} true, если товар есть в корзине
+ */
+export const isInCartById = (id: number, cartProducts: ICartProduct[]): boolean => {
+  if (cartProducts.length === 0) return false
+
+  return cartProducts.some(p => p.product.id === id)
+}

src/entities/CartEntity/model/slice/cartEntitySlice.ts

@@ -0,0 +1,79 @@
+import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
+
+import type { ThunkConfig } from '@/app/providers/StoreProvider/config/StateSchema'
+import { apiErrorIdentify } from '@/shared/api/apiErrorIdentify'
+import { rejectedPayloadHandle } from '@/shared/api/rejectedPayloadHandle'
+import { ApiError, ApiErrorTypes, ApiRoutes } from '@/shared/api/types'
+
+import type { IAddedProduct, ICartEntity, ICartEntitySchema } from '../types/types'
+
+export const getCart = createAsyncThunk<ICartEntity, void, ThunkConfig<ApiError>>(
+  'cart/getCart',
+  async (_, thunkAPI) => {
+    const { rejectWithValue, extra } = thunkAPI
+    try {
+      const { data } = await extra.api.get(`api/${ApiRoutes.CART_LIST}/`)
+      return data
+    } catch (error) {
+      return rejectWithValue(apiErrorIdentify(error, ApiErrorTypes.DATA_EMPTY_ERROR))
+    }
+  }
+)
+
+export const addToCart = createAsyncThunk<void, IAddedProduct, ThunkConfig<ApiError>>(
+  'cart/addToCart',
+  async (addedProduct, thunkAPI) => {
+    const { rejectWithValue, extra } = thunkAPI
+    try {
+      await extra.api.post(`api/${ApiRoutes.CART_LIST}/`, addedProduct)
+
+      thunkAPI.dispatch(getCart())
+    } catch (error) {
+      return rejectWithValue(apiErrorIdentify(error, ApiErrorTypes.DATA_EMPTY_ERROR))
+    }
+  }
+)
+
+const initialState: ICartEntitySchema = {
+  isLoading: false,
+  error: null,
+  cart: {
+    id: 0,
+    products: [],
+    user: 0,
+    cart_full_price: 0
+  }
+}
+
+export const cartEntitySlice = createSlice({
+  name: 'cart',
+  initialState,
+  reducers: {},
+  extraReducers: builder => {
+    builder
+      .addCase(getCart.pending, state => {
+        state.isLoading = true
+      })
+      .addCase(getCart.fulfilled, (state, { payload }) => {
+        state.isLoading = false
+        state.cart = payload
+      })
+      .addCase(getCart.rejected, (state, { payload }) => {
+        state.isLoading = false
+        state.error = rejectedPayloadHandle(payload)
+      }),
+      builder
+        .addCase(addToCart.pending, state => {
+          state.isLoading = true
+        })
+        .addCase(addToCart.fulfilled, state => {
+          state.isLoading = false
+        })
+        .addCase(addToCart.rejected, (state, { payload }) => {
+          state.isLoading = false
+          state.error = rejectedPayloadHandle(payload)
+        })
+  }
+})
+
+export const { actions: cartEntityActions, reducer: cartEntityReducer } = cartEntitySlice

src/entities/CartEntity/model/types/types.ts

@@ -0,0 +1,52 @@
+export interface ICartEntitySchema {
+  isLoading?: boolean
+  error?: string | string[] | null
+  cart: ICartEntity
+}
+
+export interface ICartEntity {
+  id: number
+  products: ICartProduct[]
+  user: number
+  cart_full_price: number
+}
+
+export interface ICartProduct {
+  name: string
+  image: 'string'
+  price: number
+  amount: number
+  full_price: number
+  product: TProduct
+}
+
+export interface IAddedProduct {
+  product: number
+  cart: number
+  amount: number
+}
+
+interface IObjectWithImage {
+  image: string
+  index?: number
+}
+
+type TImgList = Array<IObjectWithImage>
+
+type TProduct = {
+  label_popular: boolean
+  label_hit: boolean
+  id: number
+  category: string
+  brand: string
+  price: number
+  name: string
+  slug: string
+  description: string
+  code: number
+  wb_urls: string
+  quantity: number
+  is_deleted: boolean
+  wholesale: number
+  images: TImgList
+}

src/features/ProductImgCarousel/ProductImgCarousel.module.scss

@@ -6,7 +6,7 @@
   display: flex;
   background-color: var.$white;
 
-  @include media.respond-to('middle') {
+  @include media.respond-to('large') {
     flex-direction: column-reverse;
     align-items: center;
   }
@@ -29,7 +29,7 @@
       border-top: 2px solid var.$bg-subscribe;
       border-bottom: 2px solid var.$bg-subscribe;
 
-      @include media.respond-to('middle') {
+      @include media.respond-to('large') {
         border-top: none;
         border-bottom: none;
       }

src/features/ProductImgCarousel/ui/PreviewCarousel/PreviewCarousel.module.scss

@@ -10,8 +10,9 @@
   flex-direction: column;
   overflow: hidden;
 
-  @include media.respond-to('middle') {
+  @include media.respond-to('large') {
     flex-direction: row;
+    justify-content: center;
     width: 100%;
     height: 160px;
   }
@@ -24,15 +25,17 @@
     flex-direction: column;
     overflow: hidden;
 
-    @include media.respond-to('middle') {
+    @include media.respond-to('large') {
       flex-direction: row;
+      justify-content: center;
       width: 80%;
       height: 100%;
     }
   }
 
   &__imageframe {
     width: 100%;
+    max-width: 160px;
     min-height: 110px;
     box-sizing: border-box;
     border-top: 2px solid var.$bg-subscribe;
@@ -43,15 +46,22 @@
     justify-content: center;
     align-items: center;
     cursor: pointer;
+    transition: background-color 0.3s;
 
     &_active {
       background-color: var.$body-bg;
     }
 
-    @include media.respond-to('middle') {
+    @include media.respond-to('large') {
       border-right: none;
       border-bottom: 2px solid var.$bg-subscribe;
     }
+
+    &:last-child {
+      @include media.respond-to('large') {
+        border-right: 2px solid var.$bg-subscribe;
+      }
+    }
   }
 
   &__image {
@@ -76,18 +86,42 @@
       display: none;
     }
 
-    @include media.respond-to('middle') {
+    @include media.respond-to('large') {
       width: 20%;
       height: 100%;
+      flex-direction: row-reverse;
     }
   }
 
   &__button {
     width: 50%;
     height: 100%;
+    transition: background-color 0.3s;
 
     &:hover {
       background-color: var.$body-bg;
     }
+
+    @include media.respond-to('middle') {
+      padding: 1px;
+    }
+
+    &_arrowDown {
+      @include media.respond-to('large') {
+        transform: rotate(270deg);
+      }
+      @include media.respond-to('middle') {
+        transform: rotate(270deg) scale(0.5);
+      }
+    }
+
+    &_arrowUp {
+      @include media.respond-to('large') {
+        transform: rotate(270deg);
+      }
+      @include media.respond-to('middle') {
+        transform: rotate(270deg) scale(0.5);
+      }
+    }
   }
 }

src/features/ProductImgCarousel/ui/PreviewCarousel/PreviewCarousel.tsx

@@ -98,7 +98,7 @@ export const PreviewCarousel: FC<TPreviewCarouselProps> = ({ imgList, curImg, se
           size={ButtonSize.M}
           className={styles.previewcarousel__button}
           onClick={onNextHandle}>
-          <IconArrowDown />
+          <IconArrowDown className={styles.previewcarousel__button_arrowDown} />
         </Button>
         <Button
           type="button"
@@ -107,7 +107,7 @@ export const PreviewCarousel: FC<TPreviewCarouselProps> = ({ imgList, curImg, se
           size={ButtonSize.M}
           className={styles.previewcarousel__button}
           onClick={onPrevHandle}>
-          <IconArrowUp />
+          <IconArrowUp className={styles.previewcarousel__button_arrowUp} />
         </Button>
       </div>
     </div>

src/features/WidgetButtonsPurchase/WidgetButtonsPurchase.module.scss

@@ -1,13 +1,21 @@
 .customButton {
+  max-width: 115px;
+  height: 50px;
+  padding: 5px;
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 10px;
+  gap: 5px;
   cursor: pointer;
   transition: background-color 0.2s ease-in-out;
 
+  &_eye {
+    min-width: 30px;
+    justify-content: center;
+  }
+
   svg {
-    width: 20px;
+    width: 25px;
     height: 20px;
   }
 }

src/features/WidgetButtonsPurchase/WidgetButtonsPurchase.tsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames'
 import { FC } from 'react'
 
 import IconCart from '@/assets/icons/IconCart.svg'
@@ -36,10 +37,14 @@ export const WidgetButtonsPurchase: FC<TWidgetButtonsPurchase> = ({
         theme={isInCart ? ButtonTheme.SUCCESS : ButtonTheme.PRIMARY}
         size={size}
         onClick={handleAddToCart}>
-        <IconCart />
-        Купить
+        <IconCart className={styles.customButton__svg} />
+        {isInCart ? 'Перейти в корзину' : 'Купить'}
       </Button>
-      <Button className={styles.customButton} theme={ButtonTheme.OUTLINED} size={size} onClick={onEyeClick}>
+      <Button
+        className={classNames(styles.customButton, styles.customButton_eye)}
+        theme={ButtonTheme.OUTLINED}
+        size={size}
+        onClick={onEyeClick}>
         <IconEye />
       </Button>
     </>

src/shared/api/api.ts

@@ -7,6 +7,7 @@ export interface ApiInstance extends AxiosInstance {
 
 export const $api: ApiInstance = Object.create(
   axios.create({
+    withCredentials: true,
     baseURL: __API__
   }),
   {