base commit

client/src/features/cart/toggle-cart-icon/index.ts

@@ -0,0 +1 @@
+export { ToggleCartIcon } from './ui/ToggleCartIcon'

client/src/features/cart/toggle-cart-icon/ui/ToggleCartIcon.tsx

@@ -0,0 +1,62 @@
+import AddShoppingCartOutlinedIcon from '@mui/icons-material/AddShoppingCartOutlined'
+import ShoppingCartOutlinedIcon from '@mui/icons-material/ShoppingCartOutlined'
+import ShoppingCartRoundedIcon from '@mui/icons-material/ShoppingCartRounded'
+import IconButton from '@mui/material/IconButton'
+import Tooltip from '@mui/material/Tooltip'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { useUnit } from 'effector-react'
+import { useNavigate } from 'react-router-dom'
+import { addToCart, fetchMyCart, removeCartItem } from '@/entities/cart/api/cart-api'
+import { $user } from '@/shared/model/auth'
+
+export function ToggleCartIcon(props: { productId: string; size?: 'small' | 'medium' }) {
+  const { productId, size = 'small' } = props
+  const user = useUnit($user)
+  const qc = useQueryClient()
+  const navigate = useNavigate()
+
+  const cartQuery = useQuery({
+    queryKey: ['me', 'cart'],
+    queryFn: fetchMyCart,
+    enabled: Boolean(user),
+  })
+
+  const existing = cartQuery.data?.items.find((x) => x.product.id === productId) ?? null
+  const inCart = Boolean(existing)
+
+  const addMut = useMutation({
+    mutationFn: () => addToCart({ productId, qty: 1 }),
+    onSuccess: () => void qc.invalidateQueries({ queryKey: ['me', 'cart'] }),
+  })
+
+  const removeMut = useMutation({
+    mutationFn: () => removeCartItem(existing!.id),
+    onSuccess: () => void qc.invalidateQueries({ queryKey: ['me', 'cart'] }),
+  })
+
+  const disabled = !user
+  const busy = addMut.isPending || removeMut.isPending
+
+  const onClick = (e: React.MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    if (!user) {
+      navigate('/auth')
+      return
+    }
+    if (inCart) removeMut.mutate()
+    else addMut.mutate()
+  }
+
+  const tooltip = !user ? 'Авторизуйтесь для совершения покупок' : inCart ? 'Убрать из корзины' : 'В корзину'
+
+  return (
+    <Tooltip title={tooltip}>
+      <span>
+        <IconButton size={size} onClick={onClick} disabled={disabled || busy} aria-label={tooltip}>
+          {user ? inCart ? <ShoppingCartRoundedIcon /> : <AddShoppingCartOutlinedIcon /> : <ShoppingCartOutlinedIcon />}
+        </IconButton>
+      </span>
+    </Tooltip>
+  )
+}