I have a NextJS project with Typescript, and this code is from a cart state manager with zustand, on. I have a map function that change two properties, but one of them acting weird.
The ‘name’ property is changing correctly, but the itemPrice property only change when I try accessing the property directly trough the object, when I access the entire object the value is not the same…
Result
Code for the function
Here is the code for the store.ts file :
import { create } from 'zustand';
import { persist } from 'zustand/middleware';
import { round2 } from '@/lib/utils';
import {
EscompteCaisse,
EscompteCaisseSchema,
OrderPassItem,
OrderPublicItem,
Product,
ShippingAddress,
} from '@/schemas/caisse-schemas';
type Cart = {
items: OrderPublicItem[];
itemsPrice: number;
taxPrice: number;
escompte: number;
escomptePrice: number;
totalPrice: number;
fullPrice: number;
paymentMethod: string;
shippingAddress: ShippingAddress;
};
const initialState: Cart = {
items: [],
itemsPrice: 0,
taxPrice: 0,
escompte: 0,
fullPrice: 0,
escomptePrice: 0,
totalPrice: 0,
paymentMethod: 'PayPal',
shippingAddress: {
fullName: '',
address: '',
city: '',
postalCode: '',
country: '',
},
};
export const cartStore = create<Cart>()(
persist(() => initialState, {
name: 'cartStore',
})
);
export default function usePersonnelCartService() {
const {
items,
itemsPrice,
taxPrice,
escompte,
escomptePrice,
totalPrice,
fullPrice,
paymentMethod,
shippingAddress,
} = cartStore();
return {
items,
itemsPrice,
taxPrice,
escompte,
escomptePrice,
totalPrice,
fullPrice,
paymentMethod,
shippingAddress,
increase: (item: OrderPassItem) => {
console.log(items);
const exist = items.find((x) => x.slug === item.slug);
if (!exist?.format.find((v) => v.name === item.format.name)) {
exist?.format.push({
id: item.format.id,
name: item.format.name,
price: item.format.price,
qty: item.format.qty,
});
}
const updatedItems = exist
? items.filter((x) =>
x.slug === item.slug
? x.format.filter((fo) =>
fo.name === item.format.name
? ((fo.qty = fo.qty + 1),
(exist.itemPrice = exist.itemPrice + fo.price))
: x
)
: x
)
: [
...items,
{
...item,
itemPrice: item.itemPrice || 0 + item.format.price,
format: [
{
id: item.format.id,
name: item.format.name,
price: item.format.price,
qty: 1,
},
],
},
];
const updatedCartItems = updatedItems.map((item) => ({
...item,
itemPrice: item.itemPrice - item.itemPrice * escompte,
}));
console.log(updatedCartItems, 'increase');
const { itemsPrice, taxPrice, totalPrice, fullPrice } = calcPrice(
updatedCartItems,
escompte
);
cartStore.setState({
items: updatedCartItems,
itemsPrice,
taxPrice,
totalPrice,
fullPrice,
});
},
set: (item: OrderPassItem) => {
const exist = items.find((x) => x.slug === item.slug);
if (!exist?.format.find((v) => v.name === item.format.name)) {
exist?.format.push({
id: item.format.id,
name: item.format.name,
price: item.format.price,
qty: item.format.qty,
});
}
const updatedItems = exist
? items.filter((x) =>
x.slug === item.slug
? x.format.filter((fo) =>
fo.name === item.format.name
? ((fo.qty = fo.qty + item.format.qty),
(exist.itemPrice =
exist.itemPrice + fo.price * item.format.qty))
: x
)
: x
)
: [
...items,
{
...item,
itemPrice:
item.itemPrice + item.format.price * item.format.qty ||
0 + item.format.price * item.format.qty,
format: [
{
id: item.format.id,
name: item.format.name,
price: item.format.price,
qty: item.format.qty,
},
],
},
];
const updatedCartItems = updatedItems.map((item) => ({
...item,
itemPrice: item.itemPrice - item.itemPrice * escompte,
}));
const { itemsPrice, taxPrice, totalPrice, fullPrice } = calcPrice(
updatedCartItems,
escompte
);
cartStore.setState({
items: updatedCartItems,
itemsPrice,
taxPrice,
totalPrice,
fullPrice,
});
},
decrease: (item: OrderPassItem) => {
const exist = items.find((x) => x.slug === item.slug);
if (!exist) return;
const updatedItems =
item.format.qty <= 1
? items.filter((x: OrderPublicItem) => x.slug !== item.slug)
: items.filter((x) =>
x.slug === item.slug
? x.format.filter((fo) =>
fo.name === item.format.name && fo.qty !== 0
? ((fo.qty = fo.qty - 1),
(exist.itemPrice = exist.itemPrice - fo.price))
: x
)
: x
);
const updatedCartItems = updatedItems.map((item) => ({
...item,
itemPrice: item.itemPrice - item.itemPrice * escompte,
}));
const { itemsPrice, taxPrice, totalPrice, fullPrice } = calcPrice(
updatedCartItems,
escompte
);
cartStore.setState({
items: updatedCartItems,
itemsPrice,
taxPrice,
totalPrice,
fullPrice,
});
},
addEscompte: (esc: EscompteCaisse | undefined) => {
const escompte = esc?.montant || 0;
console.log('before', items, items[0].itemPrice, items[0].name);
const updatedCartItems = items.map((item) => ({
...item,
itemPrice: 10,
name: 'name',
}));
console.log(
'updated',
updatedCartItems,
updatedCartItems.map((item) => item.itemPrice),
updatedCartItems[0].name,
updatedCartItems[0].itemPrice
);
const { itemsPrice, taxPrice, totalPrice, fullPrice } = calcPrice(
updatedCartItems,
escompte
);
cartStore.setState({
items: updatedCartItems,
itemsPrice,
taxPrice,
totalPrice,
fullPrice,
escompte,
});
},
resetEscompte: () => {
const updatedCartItems = items;
updatedCartItems.map(
(item) =>
(item.itemPrice = item.format.reduce(
(acc, f) => acc + f.qty * f.price,
0
))
);
console.log(updatedCartItems, 'resetEscompte');
const { itemsPrice, taxPrice, totalPrice, fullPrice } = calcPrice(
updatedCartItems,
escompte
);
cartStore.setState({
items: updatedCartItems,
itemsPrice,
taxPrice,
totalPrice,
fullPrice,
escompte: 1,
});
},
// addEscompte: (escompte: EscompteCaisse | undefined) => {
// const { itemsPrice, taxPrice, totalPrice } = calcPrice(
// items,
// escompte?.montant || 0
// );
// cartStore.setState({
// items,
// itemsPrice,
// escompte: escompte?.montant,
// taxPrice,
// totalPrice,
// });
// },
saveShippingAddrress: (shippingAddress: ShippingAddress) => {
cartStore.setState({
shippingAddress,
});
},
savePaymentMethod: (paymentMethod: string) => {
cartStore.setState({
paymentMethod,
});
},
clear: () => {
cartStore.setState({
items: [],
itemsPrice: 0,
escomptePrice: 0,
escompte: 0,
totalPrice: 0,
taxPrice: 0,
fullPrice: 0,
});
},
init: () => cartStore.setState(initialState),
};
}
// const calcPriceBackup = (items: OrderPublicItem[]) => {
// const itemsPrice = round2(
// items.reduce((acc, item) => acc + item.price * item.qty, 0)
// ),
// escomptePrice = round2(itemsPrice > 100 ? 0 : 100),
// taxPrice = round2(Number(0.15 * itemsPrice)),
// totalPrice = round2(itemsPrice + escomptePrice + taxPrice);
// return { itemsPrice, escomptePrice, taxPrice, totalPrice };
// };
const calcPrice = (items: OrderPublicItem[], escompte: number) => {
const itemsPrice = round2(
items.reduce((acc, item) => acc + item.itemPrice, 0)
),
escomptePrice = round2(escompte * itemsPrice),
taxPrice = round2(Number(0 * itemsPrice)),
fullPrice = round2(
items.reduce(
(acc, item) =>
acc +
(item.itemPrice = item.format.reduce(
(acc, f) => acc + f.qty * f.price,
0
)),
0
)
),
totalPrice = itemsPrice;
return { itemsPrice, escomptePrice, taxPrice, totalPrice, fullPrice };
};
Let me know if more code is necessary, but I cannot understand how console.log can output to different value for the same object in the same call ???
I’m expecting the itemPrice to change with the map function. For the ‘name’ property all is working correctly, but for the itemPrice property, the console.log is showing contradictory values… I tried on both Chrome and Firefox on two different computer.
And the final value that is set to the state is the one in the object, so the wrong one.
