src-migrate/modules/cart/components/ItemSelect.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

import { Checkbox, Spinner } from '@chakra-ui/react'
import React, { useState } from 'react'

import { getAuth } from '~/libs/auth'
import { CartItem } from '~/types/cart'
import { upsertUserCart } from '~/services/cart'

import { useCartStore } from '../stores/useCartStore'

type Props = {
  item: CartItem
}

const CartItemSelect = ({ item }: Props) => {
  const auth = getAuth()
  const { updateCartItem, cart } = useCartStore()

  const [isLoad, setIsLoad] = useState<boolean>(false)

  const handleChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    if (typeof auth !== 'object' || !cart) return
    
    setIsLoad(true);
    const updatedCartItems = cart.products.map(cartItem =>
      cartItem.id === item.id
        ? { ...cartItem, selected: e.target.checked }
        : cartItem
    );

    // Update the entire cart
    const updatedCart = { ...cart, products: updatedCartItems };
    updateCartItem(updatedCart);

    setIsLoad(false);
  }

  return (
    <div className='w-6 my-auto'>
      {isLoad && (
        <Spinner className='my-auto' size='sm' />
      )}

      {!isLoad && (
        <Checkbox
          borderColor='gray.600'
          colorScheme='red'
          size='lg'
          isChecked={item.selected}
          onChange={handleChange}
        />
      )}
    </div>
  )
}

export default CartItemSelect