added price filter, changed mobile filter ui

This commit is contained in:
@jcarymuhammedow
2026-02-25 20:31:49 +05:00
parent 53346b5a7b
commit 4e58062899
16 changed files with 530 additions and 536 deletions

View File

@@ -32,6 +32,8 @@ const truncateDescription = (htmlString, maxLength = 80) => {
return truncatedText;
};
import { useCart } from "../../app/api/useCart";
const ProductCard = ({
product,
showAddToCart = true,
@@ -49,64 +51,39 @@ const ProductCard = ({
const { data: favoriteProducts = [] } = useGetFavoritesQuery();
const [isLoading, setIsLoading] = useState(false);
const [localIsFavorite, setLocalIsFavorite] = useState(
favoriteProducts.some((fav) => fav.product?.id === product.id)
favoriteProducts.some((fav) => fav.product?.id === product.id),
);
const truncatedDesc = truncateDescription(
product.description,
descriptionMaxLength
descriptionMaxLength,
);
// ✅ Sadece cache'den oku, yeni request gönderme
const { data: cartData } = useGetCartQuery(undefined, {
selectFromResult: (result) => ({
data: result.data,
}),
refetchOnMountOrArgChange: false, // ✅ Mount'ta yeniden çağırma
refetchOnFocus: false,
refetchOnReconnect: false,
});
const { getCartItem } = useCart();
const [addToCart] = useAddToCartMutation();
const [updateCartItem] = useUpdateCartItemMutation();
const [removeFromCart] = useRemoveFromCartMutation();
// ✅ Cart data'yı düzgün parse et
const getCartItem = () => {
if (!cartData || typeof cartData !== "object") {
return null;
}
// Eğer data grouped object ise (store bazlı)
const allCartItems = Object.values(cartData).flat();
return allCartItems.find(
(item) =>
item.product?.id === product.id || item.product_id === product.id
);
};
const cartItem = getCartItem();
const cartItem = getCartItem(product.id);
const [localQuantity, setLocalQuantity] = useState(0);
const [pendingQuantity, setPendingQuantity] = useState(0);
// ✅ Cart item değiştiğinde local state'i güncelle
useEffect(() => {
if (cartItem) {
const qty = cartItem.quantity || cartItem.product_quantity || 0;
setLocalQuantity(qty);
setPendingQuantity(qty);
} else {
setLocalQuantity(0);
setPendingQuantity(0);
}
}, [cartItem]); // ✅ Sadece cartItem değişince, cartData değil
const qty = parseInt(
cartItem?.quantity || cartItem?.product_quantity || 0,
10,
);
setLocalQuantity(qty);
setPendingQuantity(qty);
}, [cartItem]);
// ✅ Favorite state'i güncelle
useEffect(() => {
if (Array.isArray(favoriteProducts)) {
const isFav = favoriteProducts.some(
(fav) => fav.product?.id === product.id
(fav) => fav.product?.id === product.id,
);
setLocalIsFavorite(isFav);
}
@@ -138,38 +115,32 @@ const ProductCard = ({
// ✅ Debounced update - sadece mutation, refetch yok
useEffect(() => {
const updateCart = async () => {
const currentCartQty =
cartItem?.quantity || cartItem?.product_quantity || 0;
const serverQty = parseInt(
cartItem?.quantity || cartItem?.product_quantity || 0,
10,
);
if (pendingQuantity !== currentCartQty && pendingQuantity > 0) {
try {
setIsLoading(true);
await updateCartItem({
productId: product.id,
quantity: pendingQuantity,
}).unwrap();
// ✅ RTK Query invalidatesTags ile otomatik güncellenecek
} catch (error) {
console.error("Failed to update cart item:", error);
// ✅ Hata varsa önceki değere dön
setLocalQuantity(currentCartQty);
setPendingQuantity(currentCartQty);
} finally {
setIsLoading(false);
}
}
};
const debouncedUpdate = debounce(updateCart, 300);
const currentCartQty =
cartItem?.quantity || cartItem?.product_quantity || 0;
if (pendingQuantity !== currentCartQty) {
debouncedUpdate();
if (pendingQuantity === serverQty || pendingQuantity <= 0) {
return;
}
return () => debouncedUpdate.cancel();
const handler = setTimeout(async () => {
try {
setIsLoading(true);
await updateCartItem({
productId: product.id,
quantity: pendingQuantity,
}).unwrap();
} catch (error) {
console.error("Failed to update cart item:", error);
setLocalQuantity(serverQty);
setPendingQuantity(serverQty);
} finally {
setIsLoading(false);
}
}, 500);
return () => clearTimeout(handler);
}, [pendingQuantity, cartItem, product.id, updateCartItem]);
const handleQuantityIncrease = (event) => {