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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
|
import { Checkbox } from '@chakra-ui/react';
import React, { useState, useCallback, useEffect } from 'react';
import { getAuth } from '~/libs/auth';
import { CartItem } from '~/types/cart';
import { upsertUserCart } from '~/services/cart';
import { useCartStore } from '../stores/useCartStore';
import { toast } from 'react-hot-toast';
import {
getSelectedItemsFromCookie,
updateSelectedItemInCookie,
checkboxUpdateState,
} from '~/utils/cart';
interface Props {
item: CartItem;
}
const CartItemSelect: React.FC<Props> = ({ item }) => {
const auth = getAuth();
const { updateCartItem, cart, loadCart } = useCartStore();
const [isUpdating, setIsUpdating] = useState<boolean>(false);
const [localSelected, setLocalSelected] = useState<boolean>(item.selected);
// Subscribe to global checkbox update state
useEffect(() => {
const handleUpdateStateChange = (isUpdating: boolean): void => {
// This component doesn't need to react to global state changes
// Individual checkboxes are managed independently
};
checkboxUpdateState.addListener(handleUpdateStateChange);
return () => checkboxUpdateState.removeListener(handleUpdateStateChange);
}, []);
// Sync local state with cookie and server data
useEffect(() => {
if (isUpdating) return;
const selectedItems = getSelectedItemsFromCookie() as Record<
number,
boolean
>;
const storedState = selectedItems[item.id];
if (storedState !== undefined) {
// Update local state if cookie differs
if (localSelected !== storedState) {
setLocalSelected(storedState);
}
// Sync cart state with cookie if needed
if (storedState !== item.selected && cart) {
const updatedCartItems = cart.products.map((cartItem) =>
cartItem.id === item.id
? { ...cartItem, selected: storedState }
: cartItem
);
updateCartItem({ ...cart, products: updatedCartItems });
}
} else {
// Initialize cookie with server state
setLocalSelected(item.selected);
updateSelectedItemInCookie(item.id, item.selected, false);
}
}, [item.id, item.selected, localSelected, cart, updateCartItem, isUpdating]);
const handleChange = useCallback(
async (e: React.ChangeEvent<HTMLInputElement>): Promise<void> => {
if (typeof auth !== 'object' || !cart || isUpdating) return;
const newSelectedState = e.target.checked;
// Update local state immediately
setLocalSelected(newSelectedState);
setIsUpdating(true);
checkboxUpdateState.startUpdate();
try {
// Update cookie immediately for responsive UI
updateSelectedItemInCookie(item.id, newSelectedState, false);
// Update cart state optimistically
const updatedCartItems = cart.products.map((cartItem) =>
cartItem.id === item.id
? { ...cartItem, selected: newSelectedState }
: cartItem
);
updateCartItem({ ...cart, products: updatedCartItems });
// Send update to server
await upsertUserCart({
userId: auth.id,
type: item.cart_type,
id: item.id,
qty: item.quantity,
selected: newSelectedState,
// purchase_tax_id: item.purchase_tax_id,
// vendor_id: item.vendor_id
});
// Reload cart for consistency
await loadCart(auth.id);
} catch (error) {
console.error('Failed to update item selection:', error);
toast.error('Gagal memperbarui pilihan barang');
// Revert changes on error
setLocalSelected(!newSelectedState);
updateSelectedItemInCookie(item.id, !newSelectedState, false);
loadCart(auth.id);
} finally {
setIsUpdating(false);
checkboxUpdateState.endUpdate();
}
},
[auth, cart, item, isUpdating, updateCartItem, loadCart]
);
const isDisabled: boolean = isUpdating;
return (
<div className='w-6 my-auto relative'>
<Checkbox
borderColor='gray.600'
colorScheme='red'
size='lg'
isChecked={localSelected}
onChange={handleChange}
isDisabled={isDisabled}
opacity={isDisabled ? 0.5 : 1}
cursor={isDisabled ? 'not-allowed' : 'pointer'}
_disabled={{
opacity: 0.5,
cursor: 'not-allowed',
backgroundColor: 'gray.100',
}}
/>
</div>
);
};
export default CartItemSelect;
|
