base commit

client/src/entities/product/ui/ProductCard.tsx

@@ -1,29 +1,23 @@
+import type { ReactNode } from 'react'
 import { useMemo, useRef } from 'react'
-import Button from '@mui/material/Button'
+import Box from '@mui/material/Box'
 import Card from '@mui/material/Card'
 import CardContent from '@mui/material/CardContent'
 import CardMedia from '@mui/material/CardMedia'
 import Chip from '@mui/material/Chip'
-import Box from '@mui/material/Box'
 import Link from '@mui/material/Link'
 import Stack from '@mui/material/Stack'
 import Typography from '@mui/material/Typography'
-import { useMutation, useQueryClient } from '@tanstack/react-query'
-import { Swiper, SwiperSlide } from 'swiper/react'
-import type { Swiper as SwiperType } from 'swiper/types'
-import 'swiper/css'
 import { Link as RouterLink } from 'react-router-dom'
-import { useUnit } from 'effector-react'
-import { addToCart } from '@/entities/cart/api/cart-api'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import 'swiper/css'
 import type { Product } from '@/entities/product/model/types'
 import { formatPriceRub } from '@/shared/lib/format-price'
-import { $user } from '@/shared/model/auth'
+import type { Swiper as SwiperType } from 'swiper/types'
 
-type Props = { product: Product; mediaHeight?: number }
+type Props = { product: Product; mediaHeight?: number; actions?: ReactNode }
 
-export function ProductCard({ product, mediaHeight = 200 }: Props) {
-  const qc = useQueryClient()
-  const user = useUnit($user)
+export function ProductCard({ product, mediaHeight = 200, actions }: Props) {
   const swiperRef = useRef<SwiperType | null>(null)
   const imageUrls = useMemo(() => {
     const fromImages = (product.images ?? [])
@@ -46,11 +40,6 @@ export function ProductCard({ product, mediaHeight = 200 }: Props) {
     swiperRef.current.slideTo(idx, 0)
   }
 
-  const addMut = useMutation({
-    mutationFn: () => addToCart({ productId: product.id, qty: 1 }),
-    onSuccess: () => void qc.invalidateQueries({ queryKey: ['me', 'cart'] }),
-  })
-
   return (
     <Card
       variant="outlined"
@@ -160,18 +149,7 @@ export function ProductCard({ product, mediaHeight = 200 }: Props) {
           <Typography variant="h6" color="primary">
             {formatPriceRub(product.priceCents)}
           </Typography>
-          <Button
-            variant="contained"
-            size="small"
-            disabled={!user || addMut.isPending}
-            onClick={(e) => {
-              e.preventDefault()
-              e.stopPropagation()
-              addMut.mutate()
-            }}
-          >
-            {user ? 'В корзину' : 'Войдите, чтобы купить'}
-          </Button>
+          {actions}
         </Stack>
       </CardContent>
     </Card>