added debounce to - + buttons
This commit is contained in:
Jelaletdin12
@@ -1,5 +1,5 @@
|
||||
"use client";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useState, useEffect, useMemo } from "react";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import CartItemCard from "../../../features/cart/components/CartItemCard";
|
||||
@@ -13,7 +13,7 @@ import {
|
||||
import { userStore } from "@/features/profile/userStore";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useRouter } from "next/navigation";
|
||||
import type { DeliveryType, PaymentType } from "../../../features/cart/types";
|
||||
import type { DeliveryType, PaymentType } from "@/lib/types/api";
|
||||
|
||||
export default function CartPage() {
|
||||
const [isClient, setIsClient] = useState(false);
|
||||
@@ -22,8 +22,8 @@ export default function CartPage() {
|
||||
const [selectedRegion, setSelectedRegion] = useState<string>("");
|
||||
const [selectedProvince, setSelectedProvince] = useState<number | null>(null);
|
||||
const [note, setNote] = useState<string>("");
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const t = useTranslations();
|
||||
|
||||
const { data: cartResponse, isLoading, isError } = useCart();
|
||||
@@ -37,15 +37,43 @@ export default function CartPage() {
|
||||
setIsClient(true);
|
||||
}, []);
|
||||
|
||||
const regionGroups = provinces.reduce((acc, province) => {
|
||||
if (!acc[province.region]) {
|
||||
acc[province.region] = [];
|
||||
}
|
||||
acc[province.region].push(province);
|
||||
return acc;
|
||||
}, {} as Record<string, typeof provinces>);
|
||||
// Memoize region groups to prevent unnecessary recalculations
|
||||
const regionGroups = useMemo(() => {
|
||||
return provinces.reduce((acc, province) => {
|
||||
if (!acc[province.region]) {
|
||||
acc[province.region] = [];
|
||||
}
|
||||
acc[province.region].push(province);
|
||||
return acc;
|
||||
}, {} as Record<string, typeof provinces>);
|
||||
}, [provinces]);
|
||||
|
||||
const availableRegions = Object.keys(regionGroups);
|
||||
const availableRegions = useMemo(() => Object.keys(regionGroups), [regionGroups]);
|
||||
|
||||
// Memoize items grouped by seller
|
||||
const itemsBySeller = useMemo(() => {
|
||||
return cartItems.reduce((acc, item) => {
|
||||
const sellerId = item.product.channel?.[0]?.id || 0;
|
||||
const sellerName = item.product.channel?.[0]?.name || "Unknown Seller";
|
||||
|
||||
if (!acc[sellerId]) {
|
||||
acc[sellerId] = {
|
||||
seller: { id: sellerId, name: sellerName },
|
||||
items: [],
|
||||
};
|
||||
}
|
||||
acc[sellerId].items.push(item);
|
||||
return acc;
|
||||
}, {} as Record<number, { seller: { id: number; name: string }; items: typeof cartItems }>);
|
||||
}, [cartItems]);
|
||||
|
||||
// Memoize total amount
|
||||
const totalAmount = useMemo(() => {
|
||||
return cartItems.reduce((sum, item) => {
|
||||
const price = parseFloat(item.product.price_amount || "0");
|
||||
return sum + price * item.product_quantity;
|
||||
}, 0);
|
||||
}, [cartItems]);
|
||||
|
||||
const handleDeliveryTypeChange = (type: DeliveryType) => {
|
||||
setDeliveryType(type);
|
||||
@@ -61,7 +89,6 @@ export default function CartPage() {
|
||||
const selectedProvinceData = provinces.find((p) => p.id === selectedProvince);
|
||||
if (!selectedProvinceData) return;
|
||||
|
||||
// Kullanıcı bilgilerini store'dan al
|
||||
const orderData = userStore.getOrderData();
|
||||
if (!orderData) {
|
||||
console.error("User data not found");
|
||||
@@ -92,7 +119,7 @@ export default function CartPage() {
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="container mx-auto px-4 min-h-[90vh] flex items-center justify-center">
|
||||
<p>{t("loading")}</p>
|
||||
<p>{t("common.loading")}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -101,137 +128,80 @@ export default function CartPage() {
|
||||
return (
|
||||
<div className="container mx-auto px-4 min-h-[90vh] flex items-center justify-center">
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl text-gray-400 font-semibold">
|
||||
{t("emptyCart")}
|
||||
{t("cart_empty")}
|
||||
</h2>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const translations = {
|
||||
cart: t("cart"),
|
||||
ordersIn: t("order_available_in_shops"),
|
||||
pricePerUnit: t("unit_price"),
|
||||
additionalPrice: t("extra_price"),
|
||||
discount: t("discount"),
|
||||
totalPrice: t("total_price"),
|
||||
paymentType: t("payment_type"),
|
||||
cash: t("cash"),
|
||||
card: t("card"),
|
||||
deliveryType: t("delivery_type"),
|
||||
delivery: t("delivery"),
|
||||
pickup: t("pickup"),
|
||||
selectRegion: t("choose_region"),
|
||||
selectAddress: t("choose_address"),
|
||||
note: t("note"),
|
||||
placeOrder: t("order"),
|
||||
emptyCart: t("cart_empty"),
|
||||
map: t("address"),
|
||||
};
|
||||
|
||||
const itemsBySeller = cartItems.reduce((acc, item) => {
|
||||
const sellerId = item.product.channel?.[0]?.id || 0;
|
||||
const sellerName = item.product.channel?.[0]?.name || "Unknown Seller";
|
||||
|
||||
if (!acc[sellerId]) {
|
||||
acc[sellerId] = {
|
||||
seller: { id: sellerId, name: sellerName },
|
||||
items: [],
|
||||
};
|
||||
}
|
||||
acc[sellerId].items.push(item);
|
||||
return acc;
|
||||
}, {} as Record<number, { seller: any; items: typeof cartItems }>);
|
||||
|
||||
const totalAmount = cartItems.reduce((sum, item) => {
|
||||
const price = parseFloat(item.product.price_amount || "0");
|
||||
return sum + price * item.product_quantity;
|
||||
}, 0);
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8 min-h-screen">
|
||||
<h1 className="text-3xl font-bold mb-6">{translations.cart}</h1>
|
||||
<h1 className="text-3xl font-bold mb-6">{t("cart")}</h1>
|
||||
|
||||
<div className="flex flex-col md:flex-row gap-6">
|
||||
<div className="flex-1">
|
||||
<Card className="p-6 rounded-xl">
|
||||
{Object.entries(itemsBySeller).map(
|
||||
([sellerId, { seller, items }]) => (
|
||||
<div key={sellerId} className="mb-6">
|
||||
<p className="text-base font-semibold mb-3">{seller.name}</p>
|
||||
<div className="space-y-4">
|
||||
{items.map((item) => {
|
||||
const price = parseFloat(item.product.price_amount || "0");
|
||||
const quantity = item.product_quantity;
|
||||
const total = price * quantity;
|
||||
{Object.entries(itemsBySeller).map(([sellerId, { seller, items }]) => (
|
||||
<div key={sellerId} className="mb-6">
|
||||
<p className="text-base font-semibold mb-3">{seller.name}</p>
|
||||
<div className="space-y-4">
|
||||
{items.map((item) => {
|
||||
const price = parseFloat(item.product.price_amount || "0");
|
||||
const quantity = item.product_quantity;
|
||||
const total = price * quantity;
|
||||
|
||||
return (
|
||||
<CartItemCard
|
||||
key={item.id}
|
||||
item={{
|
||||
...item,
|
||||
quantity: quantity,
|
||||
price: price,
|
||||
total: total,
|
||||
seller: seller,
|
||||
price_formatted: `${item.product.price_amount} TMT`,
|
||||
sub_total_formatted: `${item.product.price_amount} TMT`,
|
||||
total_formatted: `${total.toFixed(2)} TMT`,
|
||||
discount_formatted: "0 TMT",
|
||||
product: {
|
||||
...item.product,
|
||||
image:
|
||||
item.product.media?.[0]?.images_800x800 ||
|
||||
item.product.media?.[0]?.thumbnail,
|
||||
images:
|
||||
item.product.media?.map(
|
||||
(m) => m.images_800x800 || m.thumbnail
|
||||
) || [],
|
||||
},
|
||||
}}
|
||||
translations={translations}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{Object.entries(itemsBySeller).length > 1 && (
|
||||
<Separator className="mt-4" />
|
||||
)}
|
||||
return (
|
||||
<CartItemCard
|
||||
key={item.id}
|
||||
item={{
|
||||
...item,
|
||||
quantity: quantity,
|
||||
price: price,
|
||||
total: total,
|
||||
seller: seller,
|
||||
price_formatted: `${item.product.price_amount} TMT`,
|
||||
sub_total_formatted: `${item.product.price_amount} TMT`,
|
||||
total_formatted: `${total.toFixed(2)} TMT`,
|
||||
discount_formatted: "0 TMT",
|
||||
product: {
|
||||
...item.product,
|
||||
image:
|
||||
item.product.media?.[0]?.images_800x800 ||
|
||||
item.product.media?.[0]?.thumbnail,
|
||||
images:
|
||||
item.product.media?.map(
|
||||
(m) => m.images_800x800 || m.thumbnail
|
||||
) || [],
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
{Object.entries(itemsBySeller).length > 1 && (
|
||||
<Separator className="mt-4" />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<OrderSummary
|
||||
order={{
|
||||
id: 1,
|
||||
seller: { id: 1, name: "Store" },
|
||||
items: cartItems.map((item) => ({
|
||||
...item,
|
||||
quantity: item.product_quantity,
|
||||
price: parseFloat(item.product.price_amount || "0"),
|
||||
total:
|
||||
parseFloat(item.product.price_amount || "0") *
|
||||
item.product_quantity,
|
||||
seller: {
|
||||
id: item.product.channel?.[0]?.id || 0,
|
||||
name: item.product.channel?.[0]?.name || "Unknown",
|
||||
},
|
||||
})),
|
||||
billing: {
|
||||
body: [
|
||||
{
|
||||
title: t("goods"),
|
||||
title: t("products"),
|
||||
value: `${totalAmount.toFixed(2)} TMT`,
|
||||
},
|
||||
],
|
||||
footer: {
|
||||
title: t("total"),
|
||||
title: t("total_price"),
|
||||
value: `${totalAmount.toFixed(2)} TMT`,
|
||||
},
|
||||
},
|
||||
}}
|
||||
translations={translations}
|
||||
paymentType={paymentType}
|
||||
deliveryType={deliveryType}
|
||||
selectedRegion={selectedRegion}
|
||||
|
||||
Reference in New Issue
Block a user