i have a delete function
that when called, it shows a snackbar, and every snackbar has a unique id, and in the delete function, I save these snackbar ids in an state,
const deleteRow = useCallback(async (item: ICheckoutItem, ppid: number, isLastOne = false) => {
let newItems = [...checkoutItems];
newItems = newItems.map(((item) => {
item.properties = item.properties.filter((property) => property.id !== ppid);
return item;
}));
newItems = newItems.filter((item) => item.properties.length > 0);
setCheckoutItems(newItems);
await server_axios.delete(endpoints.orderProductProperties.delete(ppid) + (orderId ? `?order_id=${orderId}` : ''));
await new Promise((resolve) => setTimeout(resolve, 500));
if (isLastOne && type === 'edit') {
enqueueSnackbar(
`تمامی کالاهای پروفیل ${item.product.name} با موفقیت حذف شدند.nهمچنین وضعیت سفارش شما به «حذفشده» تغییر داده شد.`,
{
variant: 'multiline',
color: 'info',
}
);
console.log(snackbar)
snackbar.forEach((id) => {
closeSnackbar(id)
})
setSnackbar([])
} else if (!isLastOne) {
const esId: SnackbarKey = enqueueSnackbar('کالای مورد نظر با موفقیت حذف شد.', {
color: 'info',
variant: 'myCustomVariant',
showTimer: true,
showButton: true,
autoHideDuration: 10 * 1000,
onClick: async () => {
await server_axios.patch(endpoints.orderProductProperties.cancel_delete(ppid))
if (onRefresh) onRefresh();
}
})
setSnackbar(currentSnackbar => {
console.log('Previous snackbar state:', currentSnackbar);
console.log('New snackbar ID:', esId);
const newState = [...currentSnackbar, esId];
console.log('New snackbar state:', newState);
return newState;
});
}
if (afterUpdate) afterUpdate((newItems.length === 0));
}, [checkoutItems, orderId, type, snackbar]);
i ask difference AI and no one can help me to fix this,
the problem is when is call setSnackbar for the first time, the snackbar Id will not save in the snackbard state!!!
but the id of the second snackbard will save!!
and when i call delete function to delete the last record and close all of the snackbar ids, snackbar states has just the last snackbar id!!
this is my all code
export default function ShoppingCartList({ items, type, isMini, afterUpdate, orderId, onRefresh }: Props) {
const checkout = useCheckoutContext();
const [checkoutItems, setCheckoutItems] = useState<ICheckoutItem[]>(items);
const [checkoutItem, setCheckoutItem] = useState<ICheckoutItem>();
const [propertyId, setPropertyId] = useState<number>();
const [property, setProperty] = useState<ICheckoutItemPropertyPrice>();
const [list, setList] = useState<ICheckoutItemPropertyPrice[]>();
const [snackbar, setSnackbar] = useState<SnackbarKey[]>([]);
// const [is, setIs] = useState<boolean>(true);
// const snackbarRef = useRef<any[]>([]);
const cartDialog = useBoolean();
const { enqueueSnackbar, closeSnackbar } = useSnackbar();
const deleteRow = useCallback(async (item: ICheckoutItem, ppid: number, isLastOne = false) => {
let newItems = [...checkoutItems];
newItems = newItems.map(((item) => {
item.properties = item.properties.filter((property) => property.id !== ppid);
return item;
}));
newItems = newItems.filter((item) => item.properties.length > 0);
setCheckoutItems(newItems);
await server_axios.delete(endpoints.orderProductProperties.delete(ppid) + (orderId ? `?order_id=${orderId}` : ''));
await new Promise((resolve) => setTimeout(resolve, 500));
if (isLastOne && type === 'edit') {
enqueueSnackbar(
`تمامی کالاهای پروفیل ${item.product.name} با موفقیت حذف شدند.nهمچنین وضعیت سفارش شما به «حذفشده» تغییر داده شد.`,
{
variant: 'multiline',
color: 'info',
}
);
console.log(snackbar)
snackbar.forEach((id) => {
closeSnackbar(id)
})
setSnackbar([])
} else if (!isLastOne) {
const esId: SnackbarKey = enqueueSnackbar('کالای مورد نظر با موفقیت حذف شد.', {
color: 'info',
variant: 'myCustomVariant',
showTimer: true,
showButton: true,
autoHideDuration: 10 * 1000,
onClick: async () => {
await server_axios.patch(endpoints.orderProductProperties.cancel_delete(ppid))
if (onRefresh) onRefresh();
}
})
setSnackbar(currentSnackbar => {
console.log('Previous snackbar state:', currentSnackbar);
console.log('New snackbar ID:', esId);
const newState = [...currentSnackbar, esId];
console.log('New snackbar state:', newState);
return newState;
});
// updateSnack(esId)
// console.log(esId)
// let newSnackbar = snackbar.length ? [...snackbar, esId] : [esId]
// console.log(newSnackbar)
// setSnackbar([...newSnackbar])
}
if (afterUpdate) afterUpdate((newItems.length === 0));
}, [checkoutItems, orderId, type, snackbar]);
return (
<Box>
{checkoutItem && (
<CartDialog
dialog={cartDialog}
order_form_id={checkoutItem.product.order_form_options.id}
product_name={checkoutItem.product.name}
pId={checkoutItem.id}
listId={propertyId}
listData={list}
onAddCart={handleAddCart}
onDelete={(ppid: number) => deleteRow(checkoutItem, ppid)}
handleUpdateRow={handleUpdateRow}
currentData={property}
type={type}
/>
)}