summaryrefslogtreecommitdiff
path: root/src-migrate/modules/cart/components/CartItemAction.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src-migrate/modules/cart/components/CartItemAction.tsx')
-rw-r--r--src-migrate/modules/cart/components/CartItemAction.tsx104
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