diff options
Diffstat (limited to 'src-migrate/modules/cart/components/CartItemAction.tsx')
| -rw-r--r-- | src-migrate/modules/cart/components/CartItemAction.tsx | 104 |
1 files changed, 0 insertions, 104 deletions
diff --git a/src-migrate/modules/cart/components/CartItemAction.tsx b/src-migrate/modules/cart/components/CartItemAction.tsx deleted file mode 100644 index 742d1a39..00000000 --- a/src-migrate/modules/cart/components/CartItemAction.tsx +++ /dev/null @@ -1,104 +0,0 @@ -import React, { useEffect, useState } from 'react' - -import { Spinner, Tooltip } from '@chakra-ui/react' -import { MinusIcon, PlusIcon, Trash2Icon } from 'lucide-react' - -import { CartItem } from '~/common/types/cart' -import { getAuth } from '~/common/libs/auth' -import { deleteUserCart, upsertUserCart } from '~/services/cart' - -import { useDebounce } from 'usehooks-ts' -import { useCartStore } from '../stores/useCartStore' - -import style from '../styles/CartItemAction.module.css' - -type Props = { - item: CartItem -} - -const CartItemAction = ({ item }: Props) => { - const auth = getAuth() - - const [isLoadDelete, setIsLoadDelete] = useState<boolean>(false) - const [isLoadQuantity, setIsLoadQuantity] = useState<boolean>(false) - - const [quantity, setQuantity] = useState<number>(item.quantity) - - const { loadCart } = useCartStore() - - const limitQty = item.limit_qty?.transaction || 0 - - const handleDelete = async () => { - if (typeof auth !== 'object') return - - setIsLoadDelete(true) - await deleteUserCart(auth.id, [item.cart_id]) - await loadCart(auth.id) - setIsLoadDelete(false) - } - - const decreaseQty = () => { setQuantity((quantity) => quantity -= 1) } - const increaseQty = () => { setQuantity((quantity) => quantity += 1) } - const debounceQty = useDebounce(quantity, 1000) - useEffect(() => { - if (isNaN(debounceQty)) setQuantity(1) - if (limitQty > 0 && debounceQty > limitQty) setQuantity(limitQty) - }, [debounceQty, limitQty]) - - useEffect(() => { - const updateCart = async () => { - if (typeof auth !== 'object' || isNaN(debounceQty)) return - - setIsLoadQuantity(true) - await upsertUserCart(auth.id, item.cart_type, item.id, debounceQty, item.selected) - await loadCart(auth.id) - setIsLoadQuantity(false) - } - updateCart() - //eslint-disable-next-line react-hooks/exhaustive-deps - }, [debounceQty]) - - return ( - <div className={style.actionSection}> - <button className={style.deleteButton} onClick={handleDelete} disabled={isLoadDelete}> - {isLoadDelete && <Spinner size='xs' />} - {!isLoadDelete && <Trash2Icon size={16} />} - </button> - - <div className={style.quantitySection}> - {isLoadQuantity && ( - <div className={style.quantityLoading}> - <Spinner size='sm' /> - </div> - )} - - <button - className={style.quantityControl} - onClick={decreaseQty} - disabled={quantity <= 1} - > - <MinusIcon size={16} /> - </button> - - <input - type='number' - className={style.quantity.toString()} - onChange={(e) => setQuantity(parseInt(e.target.value))} - value={quantity} - /> - - <Tooltip label={limitQty > 0 ? `Max. ${limitQty}` : ''}> - <button - className={style.quantityControl} - onClick={increaseQty} - disabled={limitQty > 0 && quantity >= limitQty} - > - <PlusIcon size={16} /> - </button> - </Tooltip> - </div> - </div> - ) -} - -export default CartItemAction
\ No newline at end of file |
