nurmuhammet/postshop-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cleaned code from logs and some comments

Browse Source
This commit is contained in:
Jelaletdin12
2025-12-19 18:14:29 +05:00
parent 0fb4e2765c
commit cdc9fa686f
45 changed files with 368 additions and 501 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
features/cart/components/CartItemCard.tsx
View File

@@ -349,7 +349,7 @@ export default function CartItemCard({ item, onUpdate }: CartItemCardProps) {
size="sm"
onClick={handleDelete}
disabled={isRemoving}
className="w-fit p-0 h-auto hover:bg-transparent hover:text-red-500"
className="w-fit cursor-pointer p-0 h-auto hover:bg-transparent hover:text-red-500"
>
<Trash2 className="h-5 w-5" />
</Button>
@@ -387,7 +387,7 @@ export default function CartItemCard({ item, onUpdate }: CartItemCardProps) {
variant="outline"
size="icon"
onClick={handleQuantityDecrease}
className={` cursor-pointerrounded-xl bg-blue-50 ${
className={` cursor-pointer rounded-xl bg-blue-50 ${
isSyncing ? "opacity-70" : ""
}`}
>
@@ -449,7 +449,7 @@ export default function CartItemCard({ item, onUpdate }: CartItemCardProps) {
<div className="flex justify-center mt-4">
<Button
onClick={() => setShowStockModal(false)}
className="w-full rounded-xl"
className="w-full rounded-lg cursor-pointer"
>
{t("understood")}
</Button>

4
features/cart/components/EmptyCart.tsx
View File

@@ -8,7 +8,7 @@ export default function EmptyCart() {
const router=useRouter();
return (
<div className="flex min-h-[60vh] items-center justify-center px-4">
<div className="w-full max-w-md rounded-2xl bg-gradient-to-br from-blue-50 to-white p-8 text-center shadow-lg">
<div className="w-full max-w-md rounded-2xl bg-linear-to-br from-blue-50 to-white p-8 text-center shadow-lg">
<div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-blue-100">
<ShoppingCart className="h-10 w-10 text-blue-600" />
</div>
@@ -21,7 +21,7 @@ export default function EmptyCart() {
{t("cart_empty_message")}
</p>
<Button onClick={()=>router.push("/")} className="w-full rounded-xl bg-blue-600 px-6 py-3 text-sm font-medium text-white transition hover:bg-blue-700 active:scale-95">
<Button onClick={()=>router.push("/")} className="w-full cursor-pointer rounded-xl bg-blue-600 px-6 py-3 text-sm font-medium text-white transition hover:bg-blue-700 active:scale-95">
{t("start_shopping")}
</Button>
</div>

2
features/cart/components/OrderSummary.tsx
View File

@@ -265,7 +265,7 @@ export default function OrderSummary({
<Button
onClick={onCompleteOrder}
disabled={!isFormValid || isLoading}
className="w-full rounded-xl bg-[#005bff] hover:bg-[#004dcc] h-12 text-lg font-bold disabled:opacity-50"
className="w-full rounded-lg cursor-pointer bg-[#005bff] hover:bg-[#004dcc] h-12 text-lg font-bold disabled:opacity-50"
size="lg"
>
{isLoading ? `${t("order")}...` : t("order")}

64
features/cart/hooks/useCart.ts
View File

@@ -14,30 +14,20 @@ interface CartResponse {
errorDetails?: string;
}
// DEBUG: Enable detailed logging
const DEBUG = true;
const log = (...args: any[]) => {
if (DEBUG) console.log('[useCart]', ...args);
};
// CRITICAL: Single source of truth for pending updates
const pendingUpdates = new Map<number, number>(); // productId -> quantity
const pendingUpdates = new Map<number, number>();
let updateLock = false;
class CartEventEmitter {
private listeners: Set<() => void> = new Set();
subscribe(callback: () => void) {
log('🔔 New subscriber added. Total:', this.listeners.size + 1);
this.listeners.add(callback);
return () => {
log('🔕 Subscriber removed. Total:', this.listeners.size - 1);
this.listeners.delete(callback);
};
}
emit() {
log('📢 Emitting cart event to', this.listeners.size, 'listeners');
this.listeners.forEach((cb) => cb());
}
}
@@ -76,24 +66,13 @@ function transformCartResponse(response: any): CartResponse {
export function useCart(options?: Partial<UseQueryOptions<CartResponse>>) {
const queryClient = useQueryClient();
log('🎣 useCart hook called with options:', options);
const query = useQuery({
queryKey: ["cart"],
queryFn: async () => {
log('🌐 Fetching cart from API...');
const response = await apiClient.get("/carts");
const transformed = transformCartResponse(response.data);
log('✅ Cart fetched:', {
itemCount: transformed.data.length,
items: transformed.data.map(item => ({
productId: item.product?.id,
quantity: item.product_quantity
}))
});
return transformed;
},
// CRITICAL FIX: Merge options AFTER defaults
refetchOnMount: false,
refetchOnWindowFocus: false,
refetchOnReconnect: true,
@@ -101,27 +80,17 @@ export function useCart(options?: Partial<UseQueryOptions<CartResponse>>) {
gcTime: 1000 * 60 * 5,
retry: 2,
retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 10000),
// User options OVERRIDE defaults
...options,
});
log('🔧 Query config after merge:', {
refetchOnMount: query.refetch !== undefined,
staleTime: query.isStale,
dataUpdatedAt: query.dataUpdatedAt
});
useEffect(() => {
log('🔗 Setting up cart events listener in useCart');
const unsubscribe = cartEvents.subscribe(() => {
log('📥 Cart event received in useCart, invalidating query');
queryClient.invalidateQueries({
queryKey: ["cart"],
refetchType: "none",
});
});
return () => {
log('🔌 Cleaning up cart events listener in useCart');
unsubscribe();
};
}, [queryClient]);
@@ -140,7 +109,6 @@ export function useAddToCart() {
productId: number;
quantity?: number;
}) => {
log('➕ AddToCart mutation:', { productId, quantity });
const params = new URLSearchParams({
product_id: String(productId),
product_quantity: String(quantity),
@@ -167,17 +135,14 @@ export function useAddToCart() {
return { message: "success", data: "Added to cart" };
},
onMutate: async ({ productId, quantity }) => {
log('🔒 AddToCart onMutate - Waiting for lock...');
while (updateLock) {
await new Promise(resolve => setTimeout(resolve, 50));
await new Promise((resolve) => setTimeout(resolve, 50));
}
updateLock = true;
log('🔓 Lock acquired');
await queryClient.cancelQueries({ queryKey: ["cart"] });
const previousCart = queryClient.getQueryData<CartResponse>(["cart"]);
log('📸 Previous cart state:', previousCart?.data.length, 'items');
queryClient.setQueryData<CartResponse>(["cart"], (old) => {
if (!old) return old;
@@ -224,10 +189,8 @@ export function useAddToCart() {
);
if (finalItem) {
pendingUpdates.set(productId, finalItem.product_quantity);
log('💾 Pending update saved:', productId, '→', finalItem.product_quantity);
}
log('🔄 Cart updated optimistically:', updated.data.length, 'items');
return updated;
});
@@ -237,7 +200,6 @@ export function useAddToCart() {
return { previousCart };
},
onError: (error, variables, context) => {
log('❌ AddToCart error:', error);
if (context?.previousCart) {
queryClient.setQueryData(["cart"], context.previousCart);
pendingUpdates.delete(variables.productId);
@@ -245,7 +207,6 @@ export function useAddToCart() {
}
},
onSuccess: (data, variables) => {
log('✅ AddToCart success');
pendingUpdates.delete(variables.productId);
queryClient.invalidateQueries({
queryKey: ["cart"],
@@ -260,7 +221,6 @@ export function useRemoveFromCart() {
return useMutation({
mutationFn: async (productId: number) => {
log('🗑️ RemoveFromCart mutation:', productId);
const params = new URLSearchParams({ product_id: String(productId) });
const response = await apiClient.patch("/carts", params.toString(), {
@@ -286,7 +246,7 @@ export function useRemoveFromCart() {
},
onMutate: async (productId) => {
while (updateLock) {
await new Promise(resolve => setTimeout(resolve, 50));
await new Promise((resolve) => setTimeout(resolve, 50));
}
updateLock = true;
@@ -317,7 +277,6 @@ export function useRemoveFromCart() {
);
pendingUpdates.delete(productId);
log('🗑️ Item removed optimistically:', productId);
return updated;
});
@@ -327,14 +286,12 @@ export function useRemoveFromCart() {
return { previousCart };
},
onError: (error, variables, context) => {
log('❌ RemoveFromCart error:', error);
if (context?.previousCart) {
queryClient.setQueryData(["cart"], context.previousCart);
cartEvents.emit();
}
},
onSuccess: () => {
log('✅ RemoveFromCart success');
queryClient.invalidateQueries({
queryKey: ["cart"],
refetchType: "active",
@@ -348,7 +305,6 @@ export function useCleanCart() {
return useMutation({
mutationFn: async () => {
log('🧹 CleanCart mutation');
const response = await apiClient.delete("/carts", {
headers: {
"Content-Type": "application/x-www-form-urlencoded",
@@ -372,7 +328,7 @@ export function useCleanCart() {
},
onMutate: async () => {
while (updateLock) {
await new Promise(resolve => setTimeout(resolve, 50));
await new Promise((resolve) => setTimeout(resolve, 50));
}
updateLock = true;
@@ -414,7 +370,6 @@ export function useUpdateCartItemQuantity() {
productId: number;
quantity: number;
}) => {
log('🔄 UpdateQuantity mutation:', { productId, quantity });
const params = new URLSearchParams({
product_id: String(productId),
product_quantity: String(quantity),
@@ -442,17 +397,14 @@ export function useUpdateCartItemQuantity() {
return { message: "success", data: "Updated cart" };
},
onMutate: async ({ productId, quantity }) => {
log('🔒 UpdateQuantity onMutate - Waiting for lock...');
while (updateLock) {
await new Promise(resolve => setTimeout(resolve, 50));
await new Promise((resolve) => setTimeout(resolve, 50));
}
updateLock = true;
log('🔓 Lock acquired');
await queryClient.cancelQueries({ queryKey: ["cart"] });
const previousCart = queryClient.getQueryData<CartResponse>(["cart"]);
log('📸 Previous cart state:', previousCart?.data.length, 'items');
queryClient.setQueryData<CartResponse>(["cart"], (old) => {
if (!old) return old;
@@ -478,9 +430,7 @@ export function useUpdateCartItemQuantity() {
);
pendingUpdates.set(productId, quantity);
log('💾 Pending update saved:', productId, '→', quantity);
log('🔄 Cart updated optimistically:', updated.data.length, 'items');
return updated;
});
@@ -490,7 +440,6 @@ export function useUpdateCartItemQuantity() {
return { previousCart };
},
onError: (error, variables, context) => {
log('❌ UpdateQuantity error:', error);
if (context?.previousCart) {
queryClient.setQueryData(["cart"], context.previousCart);
pendingUpdates.delete(variables.productId);
@@ -499,7 +448,6 @@ export function useUpdateCartItemQuantity() {
throw error;
},
onSuccess: (data, variables) => {
log('✅ UpdateQuantity success');
pendingUpdates.delete(variables.productId);
queryClient.invalidateQueries({
queryKey: ["cart"],
@@ -553,4 +501,4 @@ export function useCartCount() {
0
) || 0
);
}
}

2
features/category/components/CategoryFilters.tsx
View File

@@ -108,7 +108,7 @@ export default function CategoryFilters({
}}
/>
<Button variant="outline" className="w-full rounded-xl" onClick={onReset}>
<Button variant="outline" className="w-full rounded-lg cursor-pointer" onClick={onReset}>
{translations.reset}
</Button>
</div>

4
features/category/components/CategoryFiltersSheet.tsx
View File

@@ -28,7 +28,7 @@ export default function CategoryFiltersSheet({
<Sheet open={isOpen} onOpenChange={onOpenChange}>
<SheetTrigger asChild>
<Button
className="bg-[#005bff] hover:bg-[#0041c4] sm:hidden fixed bottom-20 right-4 rounded-xl font-bold gap-2 z-10 shadow-lg"
className="bg-[#005bff] hover:bg-[#0041c4] sm:hidden fixed bottom-20 right-4 rounded-lg cursor-pointer font-bold gap-2 z-10 shadow-lg"
size="lg"
>
{filterLabel}
@@ -40,7 +40,7 @@ export default function CategoryFiltersSheet({
<SheetTitle>{filterLabel}</SheetTitle>
<button
onClick={() => onOpenChange(false)}
className="absolute top-4 right-4 rounded-md ring-offset-background transition-opacity hover:opacity-100"
className="absolute top-4 right-4 rounded-md cursor-pointer ring-offset-background transition-opacity hover:opacity-100"
>
<X className="h-4 w-4" />
<span className="sr-only">{closeLabel}</span>

12
features/category/components/CategoryPageClient.tsx
View File

@@ -106,22 +106,19 @@ export default function CategoryPageClient({
}
}, [selectedCategory?.id]);
// Update products list - BU KISIM ÖNEMLİ!
// Update products list
useEffect(() => {
if (productsData?.data) {
setAllProducts((prev) => {
// İlk sayfa ise direkt replace et
if (currentPage === 1) {
return productsData.data;
}
// Sonraki sayfalar için deduplicate et
const existingIds = new Set(prev.map((p) => p.id));
const newProducts = productsData.data.filter(
(p: Product) => !existingIds.has(p.id)
);
// Eğer yeni ürün yoksa, return prev (gereksiz re-render önlenir)
if (newProducts.length === 0) {
return prev;
}
@@ -129,16 +126,13 @@ export default function CategoryPageClient({
return [...prev, ...newProducts];
});
}
}, [productsData?.data, currentPage]); // productsData yerine productsData.data
}, [productsData?.data, currentPage]);
// hasMore hesaplama - BU KISIM DA ÖNEMLİ!
const hasMore = useMemo(() => {
if (!productsData?.pagination) return false;
// pagination.next_page_url varsa devam et
if (productsData.pagination.next_page_url) return true;
// Alternatif olarak: current_page < last_page kontrolü
if (
productsData.pagination.current_page &&
productsData.pagination.last_page
@@ -148,7 +142,6 @@ export default function CategoryPageClient({
);
}
// Alternatif 2: hasMorePages flag'i varsa
if (productsData.pagination.hasMorePages !== undefined) {
return productsData.pagination.hasMorePages;
}
@@ -158,7 +151,6 @@ export default function CategoryPageClient({
const loadMoreData = useCallback(() => {
if (!hasMore || isFetching) return;
console.log("Loading page:", currentPage + 1); // Debug için
setCurrentPage((prev) => prev + 1);
}, [hasMore, isFetching, currentPage]);

4
features/category/components/CategoryProductsGrid.tsx
View File

@@ -6,7 +6,7 @@ interface CategoryProductsGridProps {
products: Product[];
hasMore: boolean;
onLoadMore: () => void;
isFetching?: boolean; // Yeni prop - loading durumu için
isFetching?: boolean;
translations: {
loading: string;
no_results: string;
@@ -46,7 +46,6 @@ export default function CategoryProductsGrid({
endMessage={
products.length > 0 && !hasMore ? (
<div className="text-center py-4 text-gray-500 text-sm">
{/* Opsiyonel: "Tüm ürünler yüklendi" mesajı */}
</div>
) : null
}
@@ -68,7 +67,6 @@ export default function CategoryProductsGrid({
))}
</div>
{/* İlk yükleme için skeleton göster */}
{isFetching && products.length === 0 && (
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3 mt-3">
{Array.from({ length: 6 }).map((_, i) => (

2
features/collections/components/CollectionFilters.tsx
View File

@@ -107,7 +107,7 @@ export default function CollectionFilters({
}}
/>
<Button variant="outline" className="w-full rounded-xl" onClick={onReset}>
<Button variant="outline" className="w-full rounded-lg cursor-pointer" onClick={onReset}>
{translations.reset}
</Button>
</div>

4
features/collections/components/CollectionFiltersSheet.tsx
View File

@@ -28,7 +28,7 @@ export default function CollectionFiltersSheet({
<Sheet open={isOpen} onOpenChange={onOpenChange}>
<SheetTrigger asChild>
<Button
className="bg-[#005bff] hover:bg-[#0041c4] sm:hidden fixed bottom-20 right-4 rounded-xl font-bold gap-2 z-10 shadow-lg"
className="bg-[#005bff] hover:bg-[#0041c4] sm:hidden fixed bottom-20 right-4 rounded-lg cursor-pointer font-bold gap-2 z-10 shadow-lg"
size="lg"
>
{filterLabel}
@@ -40,7 +40,7 @@ export default function CollectionFiltersSheet({
<SheetTitle>{filterLabel}</SheetTitle>
<button
onClick={() => onOpenChange(false)}
className="absolute top-4 right-4 rounded-md ring-offset-background transition-opacity hover:opacity-100"
className="absolute top-4 right-4 rounded-md cursor-pointer ring-offset-background transition-opacity hover:opacity-100"
>
<X className="h-4 w-4" />
<span className="sr-only">{closeLabel}</span>

4
features/favorites/components/EmptyFavorites.tsx
View File

@@ -8,7 +8,7 @@ export default function EmptyFavorites() {
const router=useRouter();
return (
<div className="flex min-h-[60vh] items-center justify-center px-4">
<div className="w-full max-w-md rounded-2xl bg-gradient-to-br from-blue-50 to-white p-8 text-center shadow-lg">
<div className="w-full max-w-md rounded-2xl bg-linear-to-br from-blue-50 to-white p-8 text-center shadow-lg">
<div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-blue-100">
<Heart className="h-10 w-10 text-blue-600" />
</div>
@@ -21,7 +21,7 @@ export default function EmptyFavorites() {
{t("favorites_empty_message")}
</p>
<Button onClick={()=>router.push("/")} className="w-full rounded-xl bg-blue-600 px-6 py-3 text-sm font-medium text-white transition hover:bg-blue-700 active:scale-95">
<Button onClick={()=>router.push("/")} className="w-full rounded-lg cursor-pointer bg-blue-600 px-6 py-3 text-sm font-medium text-white transition hover:bg-blue-700 active:scale-95">
{t("start_shopping")}
</Button>
</div>

1
features/home/components/HomePage.tsx
View File

@@ -29,7 +29,6 @@ export default function HomePage() {
isError: collectionsError,
} = useCollections();
// Prefetch favorites
useFavorites();
const loadMore = () => {

20
features/home/components/ProductCard.tsx
View File

@@ -169,7 +169,7 @@ export default function ProductCard({
{
onSuccess: (data) =>
toast.success(
data.wasAdded ? "Added to favorites" : "Removed from favorites"
data.wasAdded ? t("added_to_favorites") : t("removed_from_favorites")
),
onError: () => toast.error("Error. Try again"),
}
@@ -196,12 +196,12 @@ export default function ProductCard({
quantity: localQuantity,
});
await refetchCart();
toast.success("Added to cart", {
description: `${name} has been added to your cart`,
toast.success(t("added_to_cart"), {
description: `${name} ${t("added_to_cart_description")}`,
});
} catch (error) {
console.error("Add to cart error:", error);
toast.error("Failed to add to cart");
toast.error(t("add_to_cart_failed"));
} finally {
setIsSyncing(false);
}
@@ -303,7 +303,7 @@ export default function ProductCard({
<button
onClick={handleFavorite}
disabled={isFavoriteToggling || isFavoriteLoading}
className="absolute top-3 right-3 z-10 rounded-full bg-white/80 p-2 hover:bg-white transition-all disabled:opacity-50"
className="absolute top-3 cursor-pointer right-3 z-10 rounded-full bg-white/80 p-2 hover:bg-white transition-all disabled:opacity-50"
>
{isFavoriteLoading ? (
<div className="w-5 h-5 border-2 border-gray-300 border-t-gray-600 rounded-full animate-spin" />
@@ -323,7 +323,7 @@ export default function ProductCard({
key={idx}
data-carousel-control="true"
onClick={(e) => handleNavClick(e, () => api?.scrollTo(idx))}
className={`h-1.5 rounded-full transition-all ${
className={`h-1.5 rounded-full cursor-pointer transition-all ${
idx === current ? "w-6 bg-white" : "w-1.5 bg-white/60"
}`}
/>
@@ -372,7 +372,7 @@ export default function ProductCard({
<Button
onClick={handleAddToCart}
disabled={isSyncing}
className="w-full rounded-lg gap-2 bg-[#005bff] hover:bg-[#0041c4]"
className="w-full rounded-lg cursor-pointer gap-2 bg-[#005bff] hover:bg-[#0041c4]"
size="sm"
>
{isSyncing ? (
@@ -394,7 +394,7 @@ export default function ProductCard({
size="icon"
onClick={(e) => handleQuantityChange(e, -1)}
disabled={isSyncing || localQuantity <= 1}
className="rounded-lg h-9 w-9 shrink-0"
className="rounded-lg cursor-pointer h-9 w-9 shrink-0"
>
<Minus className="h-4 w-4" />
</Button>
@@ -409,7 +409,7 @@ export default function ProductCard({
size="icon"
onClick={(e) => handleQuantityChange(e, 1)}
disabled={isSyncing}
className="rounded-lg h-9 w-9 shrink-0"
className="rounded-lg cursor-pointer h-9 w-9 shrink-0"
>
<Plus className="h-4 w-4 text-[#005bff]" />
</Button>
@@ -444,7 +444,7 @@ export default function ProductCard({
e.stopPropagation();
setShowStockModal(false);
}}
className="w-full rounded-lg"
className="w-full rounded-lg cursor-pointer"
>
{t("understood")}
</Button>

1
features/home/hooks/useCollections.ts
View File

@@ -139,7 +139,6 @@ export function useCollectionProductsInfinite(
},
getNextPageParam: (lastPage) => {
if (lastPage.pagination?.next_page_url) {
// Extract page number from URL or increment
const currentPage = lastPage.pagination.page || 1;
return currentPage + 1;
}

4
features/orders/components/EmptyOrders.tsx
View File

@@ -8,7 +8,7 @@ export default function EmptyOrders() {
const router=useRouter();
return (
<div className="flex min-h-[60vh] items-center justify-center px-4">
<div className="w-full max-w-md rounded-2xl bg-gradient-to-br from-blue-50 to-white p-8 text-center shadow-lg">
<div className="w-full max-w-md rounded-2xl bg-linear-to-br from-blue-50 to-white p-8 text-center shadow-lg">
<div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-blue-100">
<ShoppingCart className="h-10 w-10 text-blue-600" />
</div>
@@ -21,7 +21,7 @@ export default function EmptyOrders() {
{t("orders_empty_message")}
</p>
<Button onClick={()=>router.push("/")} className="w-full rounded-xl bg-blue-600 px-6 py-3 text-sm font-medium text-white transition hover:bg-blue-700 active:scale-95">
<Button onClick={()=>router.push("/")} className="w-full rounded-lg cursor-pointer bg-blue-600 px-6 py-3 text-sm font-medium text-white transition hover:bg-blue-700 active:scale-95">
{t("start_shopping")}
</Button>
</div>

6
features/orders/components/OrderPage.tsx
View File

@@ -258,6 +258,7 @@ export default function OrdersPageClient({ locale }: OrdersPageClientProps) {
variant="outline"
onClick={() => setIsCancelDialogOpen(false)}
disabled={isCancellingOrder}
className="cursor-pointer"
>
{t("keep_order")}
</Button>
@@ -265,6 +266,7 @@ export default function OrdersPageClient({ locale }: OrdersPageClientProps) {
variant="destructive"
onClick={confirmCancelOrder}
disabled={isCancellingOrder}
className="cursor-pointer"
>
{isCancellingOrder ? t("cancelling") : t("cancel_order")}
</Button>
@@ -404,7 +406,7 @@ function CompactOrderCard({
key={index}
className="flex items-center gap-4 p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors"
>
<div className="relative w-16 h-16 flex-shrink-0 rounded-md overflow-hidden bg-white border">
<div className="relative w-16 h-16 shrink-0 rounded-md overflow-hidden bg-white border">
<Image
src={
item.product.images_400x400 || item.product.thumbnail
@@ -454,7 +456,7 @@ function CompactOrderCard({
onCancel(order);
}}
disabled={isCancelling}
className="w-full"
className="w-full cursor-pointer"
>
{t("cancel_order")}
</Button>

3
features/orders/hooks/useOrders.ts
View File

@@ -1,6 +1,6 @@
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { apiClient } from "@/lib/api";
import type { Order, OrdersResponse, CreateOrderRequest } from "@/lib/types/api";
import type { Order, OrdersResponse } from "@/lib/types/api";
export function useOrders(options?: { page?: number; perPage?: number }) {
return useQuery<Order[]>({
@@ -13,7 +13,6 @@ export function useOrders(options?: { page?: number; perPage?: number }) {
},
});
// API response'dan data array'ini döndür
return response.data.data;
},
staleTime: 1000 * 60 * 5,

4
features/products/components/ProductImageGallery.tsx
View File

@@ -44,7 +44,7 @@ export function ProductImageGallery({
);
return (
<div className="flex-1 max-w-2xl">
<div className="contents max-w-2xl">
<div className="relative">
<div className="relative aspect-square w-full rounded-2xl overflow-hidden bg-white">
{images.length > 0 ? (
@@ -68,7 +68,7 @@ export function ProductImageGallery({
<button
key={index}
onClick={() => handleImageSelect(index)}
className={`relative w-16 h-16 flex-shrink-0 rounded overflow-hidden border-2 transition-all ${
className={`relative w-16 h-16 shrink-0 rounded cursor-pointer overflow-hidden border-2 transition-all ${
selectedImage === index
? "border-primary ring-2 ring-primary/20"
: "border-gray-200 hover:border-gray-300"

17
features/products/components/ProductInfoCard.tsx
View File

@@ -30,22 +30,7 @@ export function ProductInfoCard({
reviewsCount,
t,
}: ProductInfoCardProps) {
const renderStars = (rating: number) => {
return (
<div className="flex gap-1">
{[1, 2, 3, 4, 5].map((star) => (
<Star
key={star}
className={`h-5 w-5 transition-all ${
star <= rating
? "fill-yellow-400 text-yellow-400"
: "text-gray-300"
}`}
/>
))}
</div>
);
};
return (
<div className="flex-1 space-y-6 bg-white">

464
features/products/components/ProductPageContent.tsx
View File

@@ -1,281 +1,270 @@
"use client"
"use client";
import { useState, useCallback, useMemo, useRef, useEffect } from "react"
import { Skeleton } from "@/components/ui/skeleton"
import { useProductsBySlug, useRelatedProducts, useSubmitReview } from "@/features/products/hooks/useProducts"
import { useState, useCallback, useMemo, useRef, useEffect } from "react";
import { Skeleton } from "@/components/ui/skeleton";
import {
useProductsBySlug,
useRelatedProducts,
useSubmitReview,
} from "@/features/products/hooks/useProducts";
import {
useAddToCart,
useUpdateCartItemQuantity,
useRemoveFromCart,
useCart,
cartEvents,
} from "@/features/cart/hooks/useCart"
import { useTranslations } from "next-intl"
import { toast } from "sonner"
import { ProductImageGallery } from "./ProductImageGallery"
import { ProductInfoCard } from "./ProductInfoCard"
import { ProductPurchaseCard } from "./ProductPurchaseCard"
import { ProductReviewsSection } from "./ProductReviewsSection"
import { RelatedProductsSection } from "./RelatedProductsSection"
import { ReviewModal } from "./ReviewModal"
import { StockLimitModal } from "./StockLimitModal"
} from "@/features/cart/hooks/useCart";
import { useTranslations } from "next-intl";
import { toast } from "sonner";
import { ProductImageGallery } from "./ProductImageGallery";
import { ProductInfoCard } from "./ProductInfoCard";
import { ProductPurchaseCard } from "./ProductPurchaseCard";
import { ProductReviewsSection } from "./ProductReviewsSection";
import { RelatedProductsSection } from "./RelatedProductsSection";
import { ReviewModal } from "./ReviewModal";
import { StockLimitModal } from "./StockLimitModal";
interface ProductDetailProps {
slug: string
slug: string;
}
const PENDING_PRODUCT_UPDATES_KEY = "pendingProductUpdates"
const PENDING_PRODUCT_UPDATES_KEY = "pendingProductUpdates";
interface PendingUpdate {
quantity: number
timestamp: number
retryCount: number
quantity: number;
timestamp: number;
retryCount: number;
}
const DEBUG = true
const log = (...args: any[]) => {
if (DEBUG) console.log("[ProductPage]", ...args)
}
// const DEBUG = true
// const log = (...args: any[]) => {
// if (DEBUG) console.log("[ProductPage]", ...args)
// }
export default function ProductPageContent({ slug }: ProductDetailProps) {
const [localQuantity, setLocalQuantity] = useState(1)
const [isFavorite, setIsFavorite] = useState(false)
const [isSyncing, setIsSyncing] = useState(false)
const [syncError, setSyncError] = useState(false)
const [showStockModal, setShowStockModal] = useState(false)
const [showReviewModal, setShowReviewModal] = useState(false)
const [isInitialized, setIsInitialized] = useState(false) // 🔥 NEW: Track initialization
const [localQuantity, setLocalQuantity] = useState(1);
const [isFavorite, setIsFavorite] = useState(false);
const [isSyncing, setIsSyncing] = useState(false);
const [syncError, setSyncError] = useState(false);
const [showStockModal, setShowStockModal] = useState(false);
const [showReviewModal, setShowReviewModal] = useState(false);
const [isInitialized, setIsInitialized] = useState(false);
const t = useTranslations()
const t = useTranslations();
const debounceTimerRef = useRef<NodeJS.Timeout | undefined>(undefined)
const isRequestInFlightRef = useRef(false)
const pendingQuantityRef = useRef<number | null>(null)
const retryCountRef = useRef(0)
const retryTimerRef = useRef<NodeJS.Timeout | undefined>(undefined)
const syncToServerRef = useRef<((quantity: number) => void) | null>(null)
const retrySyncRef = useRef<((quantity: number) => void) | null>(null)
const shouldSyncFromCartRef = useRef(true)
const lastSyncedQuantityRef = useRef<number | null>(null)
const debounceTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);
const isRequestInFlightRef = useRef(false);
const pendingQuantityRef = useRef<number | null>(null);
const retryCountRef = useRef(0);
const retryTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);
const syncToServerRef = useRef<((quantity: number) => void) | null>(null);
const retrySyncRef = useRef<((quantity: number) => void) | null>(null);
const shouldSyncFromCartRef = useRef(true);
const lastSyncedQuantityRef = useRef<number | null>(null);
const { data: product, isLoading: productLoading, error, refetch: refetchProduct } = useProductsBySlug(slug)
const {
data: product,
isLoading: productLoading,
error,
refetch: refetchProduct,
} = useProductsBySlug(slug);
// 🔥 FIX: Memoize cart options to prevent infinite re-subscriptions
const cartOptions = useMemo(
() => ({
refetchOnMount: true,
refetchOnWindowFocus: true,
staleTime: 0,
}),
[],
)
[]
);
const { data: cartData, refetch: refetchCart, isFetching: isCartFetching } = useCart(cartOptions)
const {
data: cartData,
refetch: refetchCart,
isFetching: isCartFetching,
} = useCart(cartOptions);
const { data: relatedProducts } = useRelatedProducts(product?.id || 0, {
enabled: !!product?.id,
})
});
const addToCartMutation = useAddToCart()
const updateCartMutation = useUpdateCartItemQuantity()
const removeFromCartMutation = useRemoveFromCart()
const submitReviewMutation = useSubmitReview()
const addToCartMutation = useAddToCart();
const updateCartMutation = useUpdateCartItemQuantity();
const removeFromCartMutation = useRemoveFromCart();
const submitReviewMutation = useSubmitReview();
const cartItem = useMemo(() => {
const item = cartData?.data?.find((item: any) => item.product?.id === product?.id)
log("🎯 Cart Item Found:", {
productId: product?.id,
cartItem: item,
quantity: item?.product_quantity,
isInitialized,
})
return item
}, [cartData, product, isInitialized])
const item = cartData?.data?.find(
(item: any) => item.product?.id === product?.id
);
const isInCart = !!cartItem
const availableStock = product?.stock || 0
return item;
}, [cartData, product, isInitialized]);
log("📊 State:", {
isInCart,
localQuantity,
cartItemQuantity: cartItem?.product_quantity,
availableStock,
isSyncing,
shouldSyncFromCart: shouldSyncFromCartRef.current,
isInitialized,
})
const isInCart = !!cartItem;
const availableStock = product?.stock || 0;
const imageUrls = useMemo(
() => product?.media?.map((m) => m.images_800x800 || m.images_720x720 || m.thumbnail) || [],
[product],
)
() =>
product?.media?.map(
(m) => m.images_800x800 || m.images_720x720 || m.thumbnail
) || [],
[product]
);
const reviews = useMemo(() => product?.reviews_resources || [], [product])
const reviews = useMemo(() => product?.reviews_resources || [], [product]);
const averageRating = useMemo(
() => (product?.reviews?.rating ? Number.parseFloat(product.reviews.rating) : 0),
[product],
)
() =>
product?.reviews?.rating ? Number.parseFloat(product.reviews.rating) : 0,
[product]
);
// 🔥 FIX: Subscribe to cart events ONCE with stable dependencies
useEffect(() => {
log("🔔 Setting up cart event subscription")
const unsubscribe = cartEvents.subscribe(() => {
log("📢 Cart event received! Refetching...")
refetchCart()
})
refetchCart();
});
return () => {
log("🔕 Cleaning up cart event subscription")
unsubscribe()
}
}, [refetchCart])
unsubscribe();
};
}, [refetchCart]);
// 🔥 CRITICAL FIX: Initialize localQuantity from cart ONCE on mount
useEffect(() => {
if (!product?.id || isInitialized) return
log("🚀 Initializing component with product:", product.id)
if (!product?.id || isInitialized) return;
if (cartItem?.product_quantity) {
const serverQuantity = cartItem.product_quantity
log("✅ Initial cart quantity found:", serverQuantity)
setLocalQuantity(serverQuantity)
lastSyncedQuantityRef.current = serverQuantity
const serverQuantity = cartItem.product_quantity;
setLocalQuantity(serverQuantity);
lastSyncedQuantityRef.current = serverQuantity;
}
setIsInitialized(true)
}, [product?.id, cartItem, isInitialized])
setIsInitialized(true);
}, [product?.id, cartItem, isInitialized]);
useEffect(() => {
setLocalQuantity(cartItem?.product_quantity || 1)
}, [cartItem])
setLocalQuantity(cartItem?.product_quantity || 1);
}, [cartItem]);
const savePendingUpdate = useCallback(
(quantity: number) => {
if (!product?.id) return
if (!product?.id) return;
try {
const stored = sessionStorage.getItem(PENDING_PRODUCT_UPDATES_KEY)
const pending: Record<number, PendingUpdate> = stored ? JSON.parse(stored) : {}
const stored = sessionStorage.getItem(PENDING_PRODUCT_UPDATES_KEY);
const pending: Record<number, PendingUpdate> = stored
? JSON.parse(stored)
: {};
pending[product.id] = {
quantity,
timestamp: Date.now(),
retryCount: retryCountRef.current,
}
sessionStorage.setItem(PENDING_PRODUCT_UPDATES_KEY, JSON.stringify(pending))
};
sessionStorage.setItem(
PENDING_PRODUCT_UPDATES_KEY,
JSON.stringify(pending)
);
} catch (error) {
console.error("Failed to save pending update:", error)
console.error("Failed to save pending update:", error);
}
},
[product?.id],
)
[product?.id]
);
const clearPendingUpdate = useCallback(() => {
if (!product?.id) return
if (!product?.id) return;
try {
const stored = sessionStorage.getItem(PENDING_PRODUCT_UPDATES_KEY)
const stored = sessionStorage.getItem(PENDING_PRODUCT_UPDATES_KEY);
if (stored) {
const pending: Record<number, PendingUpdate> = JSON.parse(stored)
delete pending[product.id]
const pending: Record<number, PendingUpdate> = JSON.parse(stored);
delete pending[product.id];
if (Object.keys(pending).length === 0) {
sessionStorage.removeItem(PENDING_PRODUCT_UPDATES_KEY)
sessionStorage.removeItem(PENDING_PRODUCT_UPDATES_KEY);
} else {
sessionStorage.setItem(PENDING_PRODUCT_UPDATES_KEY, JSON.stringify(pending))
sessionStorage.setItem(
PENDING_PRODUCT_UPDATES_KEY,
JSON.stringify(pending)
);
}
}
} catch (error) {
console.error("Failed to clear pending update:", error)
console.error("Failed to clear pending update:", error);
}
}, [product?.id])
}, [product?.id]);
const retrySync = useCallback(
(quantity: number) => {
const maxRetries = 4
const retryCount = retryCountRef.current
const maxRetries = 4;
const retryCount = retryCountRef.current;
if (retryCount >= maxRetries) {
setSyncError(true)
setIsSyncing(false)
shouldSyncFromCartRef.current = true
setSyncError(true);
setIsSyncing(false);
shouldSyncFromCartRef.current = true;
toast.error(t("error"), {
description: t("update_quantity_failed"),
})
return
});
return;
}
const delay = Math.min(1000 * Math.pow(2, retryCount), 16000)
retryCountRef.current++
const delay = Math.min(1000 * Math.pow(2, retryCount), 16000);
retryCountRef.current++;
retryTimerRef.current = setTimeout(() => {
syncToServerRef.current?.(quantity)
}, delay)
syncToServerRef.current?.(quantity);
}, delay);
},
[t],
)
[t]
);
retrySyncRef.current = retrySync
retrySyncRef.current = retrySync;
const syncToServer = useCallback(
async (quantity: number) => {
if (!product?.id) return
log("🚀 syncToServer called:", {
productId: product.id,
quantity,
isRequestInFlight: isRequestInFlightRef.current,
isInCart,
})
if (!product?.id) return;
if (isRequestInFlightRef.current) {
log("⏳ Request in flight, queuing:", quantity)
pendingQuantityRef.current = quantity
return
pendingQuantityRef.current = quantity;
return;
}
isRequestInFlightRef.current = true
setIsSyncing(true)
setSyncError(false)
isRequestInFlightRef.current = true;
setIsSyncing(true);
setSyncError(false);
try {
if (quantity === 0) {
log("🗑️ Removing from cart")
await removeFromCartMutation.mutateAsync(product.id)
toast.success(t("removed_from_cart"))
await removeFromCartMutation.mutateAsync(product.id);
toast.success(t("removed_from_cart"));
} else if (isInCart) {
log("🔄 Updating cart quantity")
await updateCartMutation.mutateAsync({
productId: product.id,
quantity: quantity,
})
});
} else {
log("➕ Adding to cart")
await addToCartMutation.mutateAsync({
productId: product.id,
quantity: quantity,
})
});
}
log("✅ Sync successful")
await refetchCart()
retryCountRef.current = 0
clearPendingUpdate()
await refetchCart();
retryCountRef.current = 0;
clearPendingUpdate();
if (pendingQuantityRef.current !== null) {
const nextQuantity = pendingQuantityRef.current
pendingQuantityRef.current = null
log("📤 Processing queued update:", nextQuantity)
setTimeout(() => syncToServerRef.current?.(nextQuantity), 100)
const nextQuantity = pendingQuantityRef.current;
pendingQuantityRef.current = null;
setTimeout(() => syncToServerRef.current?.(nextQuantity), 100);
}
} catch (error) {
log("❌ Sync failed:", error)
setLocalQuantity(cartItem?.product_quantity || 1)
setLocalQuantity(cartItem?.product_quantity || 1);
toast.error("Failed to update quantity", {
description: "Please try again",
})
});
retrySyncRef.current?.(quantity)
retrySyncRef.current?.(quantity);
} finally {
isRequestInFlightRef.current = false
setIsSyncing(false)
isRequestInFlightRef.current = false;
setIsSyncing(false);
}
},
[
@@ -288,119 +277,116 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
refetchCart,
clearPendingUpdate,
t,
],
)
]
);
syncToServerRef.current = syncToServer
syncToServerRef.current = syncToServer;
useEffect(() => {
if (!isInCart || !product?.id) return
if (!isInCart || !product?.id) return;
// If local matches server, nothing to sync
if (localQuantity === (cartItem?.product_quantity || 1)) {
return
return;
}
if (debounceTimerRef.current) {
clearTimeout(debounceTimerRef.current)
clearTimeout(debounceTimerRef.current);
}
debounceTimerRef.current = setTimeout(() => {
syncToServerRef.current?.(localQuantity)
}, 800)
syncToServerRef.current?.(localQuantity);
}, 800);
return () => {
if (debounceTimerRef.current) {
clearTimeout(debounceTimerRef.current)
clearTimeout(debounceTimerRef.current);
}
}
}, [localQuantity, isInCart, product?.id, cartItem?.product_quantity])
};
}, [localQuantity, isInCart, product?.id, cartItem?.product_quantity]);
// Cleanup
useEffect(() => {
return () => {
if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current)
if (retryTimerRef.current) clearTimeout(retryTimerRef.current)
}
}, [])
if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
if (retryTimerRef.current) clearTimeout(retryTimerRef.current);
};
}, []);
const handleAddToCart = useCallback(async () => {
if (!product?.id) return
if (!product?.id) return;
if (localQuantity > availableStock) {
setShowStockModal(true)
return
setShowStockModal(true);
return;
}
setIsSyncing(true)
shouldSyncFromCartRef.current = false
setIsSyncing(true);
shouldSyncFromCartRef.current = false;
try {
await addToCartMutation.mutateAsync({
productId: product.id,
quantity: localQuantity,
})
});
lastSyncedQuantityRef.current = localQuantity
lastSyncedQuantityRef.current = localQuantity;
setTimeout(() => {
shouldSyncFromCartRef.current = true
refetchCart()
}, 150)
shouldSyncFromCartRef.current = true;
refetchCart();
}, 150);
setIsSyncing(false)
setIsSyncing(false);
toast.success(t("added_to_cart"), {
description: `${product.name} ${t("added_to_cart_description")}`,
})
});
} catch (error) {
console.error("Add to cart error:", error)
setIsSyncing(false)
shouldSyncFromCartRef.current = true
console.error("Add to cart error:", error);
setIsSyncing(false);
shouldSyncFromCartRef.current = true;
toast.error(t("error"), {
description: t("add_to_cart_failed"),
})
});
}
}, [product, localQuantity, availableStock, addToCartMutation, refetchCart, t])
}, [
product,
localQuantity,
availableStock,
addToCartMutation,
refetchCart,
t,
]);
const handleQuantityIncrease = useCallback(() => {
log("➕ Quantity increase clicked:", {
current: localQuantity,
availableStock,
})
if (localQuantity >= availableStock) {
log("⚠️ Stock limit reached")
setShowStockModal(true)
return
setShowStockModal(true);
return;
}
setLocalQuantity((prev) => {
const newVal = prev + 1
log("📈 New local quantity:", newVal)
return newVal
})
}, [localQuantity, availableStock])
const newVal = prev + 1;
return newVal;
});
}, [localQuantity, availableStock]);
const handleQuantityDecrease = useCallback(() => {
log("➖ Quantity decrease clicked:", { current: localQuantity })
if (localQuantity <= 0) return
if (localQuantity <= 0) return;
setLocalQuantity((prev) => {
const newVal = prev - 1
log("📉 New local quantity:", newVal)
return newVal
})
}, [localQuantity])
const newVal = prev - 1;
return newVal;
});
}, [localQuantity]);
const handleToggleFavorite = useCallback(() => {
setIsFavorite(!isFavorite)
}, [isFavorite])
setIsFavorite(!isFavorite);
}, [isFavorite]);
const handleSubmitReview = useCallback(
async (rating: number, text: string) => {
if (!product?.id || rating === 0 || !text.trim()) {
toast.error(t("error"), {
description: "Please provide rating and review text",
})
return
});
return;
}
try {
@@ -409,20 +395,20 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
rating: rating,
title: text,
source: "site",
})
});
await refetchProduct()
await refetchProduct();
toast.success("Review submitted successfully!")
setShowReviewModal(false)
toast.success("Review submitted successfully!");
setShowReviewModal(false);
} catch (error) {
toast.error(t("error"), {
description: "Failed to submit review",
})
});
}
},
[product?.id, submitReviewMutation, refetchProduct, t],
)
[product?.id, submitReviewMutation, refetchProduct, t]
);
const loadingSkeleton = useMemo(
() => (
@@ -443,25 +429,33 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
</div>
</div>
),
[],
)
[]
);
if (productLoading) return loadingSkeleton
if (productLoading) return loadingSkeleton;
if (error || !product) {
return (
<div className=" mx-auto px-4 py-8 text-center">
<h2 className="text-2xl font-bold text-red-600">{t("product_not_found")}</h2>
<p className="text-gray-500 mt-2">{t("product_not_found_description")}</p>
<h2 className="text-2xl font-bold text-red-600">
{t("product_not_found")}
</h2>
<p className="text-gray-500 mt-2">
{t("product_not_found_description")}
</p>
</div>
)
);
}
return (
<>
<div className="px-2 md:px-4 lg:px-6 rounded-lg mb-18 space-y-8 max-w-[1504px] mx-auto">
<div className="flex flex-col lg:flex-row gap-8 rounded-b-lg bg-white p-4">
<ProductImageGallery images={imageUrls} productName={product.name} noImageText={t("no_image")} />
<ProductImageGallery
images={imageUrls}
productName={product.name}
noImageText={t("no_image")}
/>
<ProductInfoCard
brandName={product.brand?.name}
@@ -519,5 +513,5 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
isSubmitting={submitReviewMutation.isPending}
/>
</>
)
);
}

10
features/products/components/ProductPurchaseCard.tsx
View File

@@ -62,7 +62,7 @@ export function ProductPurchaseCard({
<Link href="/cart">
<Button
size="lg"
className="w-full rounded-lg text-lg font-bold bg-green-600 hover:bg-green-700 mb-4"
className="w-full rounded-lg cursor-pointer text-lg font-bold bg-green-600 hover:bg-green-700 mb-4"
>
<ShoppingCart className="mr-2 h-5 w-5" />
{t("go_to_cart")}
@@ -75,7 +75,7 @@ export function ProductPurchaseCard({
size="icon"
onClick={onQuantityDecrease}
disabled={isSyncing}
className={`rounded-lg h-12 w-12 ${
className={`rounded-lg cursor-pointer h-12 w-12 ${
isSyncing ? "opacity-70" : ""
}`}
>
@@ -95,7 +95,7 @@ export function ProductPurchaseCard({
size="icon"
onClick={onQuantityIncrease}
disabled={isSyncing}
className={`rounded-lg h-12 w-12 ${
className={`rounded-lg cursor-pointer h-12 w-12 ${
isSyncing ? "opacity-70" : ""
}`}
>
@@ -127,7 +127,7 @@ export function ProductPurchaseCard({
size="lg"
onClick={onAddToCart}
disabled={isSyncing || productStock === 0}
className="w-full rounded-lg text-lg font-bold bg-[#005bff] hover:bg-[#0041c4] cursor-pointer"
className="w-full rounded-lg text-lg font-bold bg-[#005bff] hover:bg-[#0041c4] cursor-pointer"
>
{isSyncing ? (
<>
@@ -158,7 +158,7 @@ export function ProductPurchaseCard({
<h4 className="text-lg font-bold">{channelName}</h4>
</div>
</div>
<Button variant="outline" size="lg" className="w-full rounded-lg">
<Button variant="outline" size="lg" className="w-full cursor-pointer rounded-lg">
{t("write_to_store")}
</Button>
</Card>

2
features/products/components/ProductReviewsSection.tsx
View File

@@ -56,7 +56,7 @@ export function ProductReviewsSection({
</span> */}
</div>
</div>
<Button onClick={onWriteReview} className="rounded-lg bg-[#005bff] hover:bg-[#0041c4]">
<Button onClick={onWriteReview} className="rounded-lg cursor-pointer bg-[#005bff] hover:bg-[#0041c4]">
<Send className="mr-2 h-4 w-4" />
{t("write_review")}
</Button>

1
features/products/components/RelatedProductsSection.tsx
View File

@@ -38,7 +38,6 @@ export function RelatedProductsSection({
<h2 className="text-2xl font-bold mb-6">{t("related_products")}</h2>
<div className="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
{products.slice(0, 4).map((product) => {
// Extract image URLs from media
const images =
product.media?.map(
(m) =>

4
features/products/components/ReviewModal.tsx
View File

@@ -96,14 +96,14 @@ export function ReviewModal({
<Button
variant="outline"
onClick={handleClose}
className="flex-1 rounded-lg"
className="flex-1 rounded-lg cursor-pointer"
>
{t("cancel")}
</Button>
<Button
onClick={handleSubmit}
disabled={rating === 0 || !text.trim() || isSubmitting}
className="flex-1 rounded-lg bg-[#005bff] hover:bg-[#0041c4]"
className="flex-1 rounded-lg cursor-pointer bg-[#005bff] hover:bg-[#0041c4]"
>
{isSubmitting ? (
<>

2
features/products/components/StockLimitModal.tsx
View File

@@ -45,7 +45,7 @@ export function StockLimitModal({
<div className="flex justify-center mt-4">
<Button
onClick={() => onOpenChange(false)}
className="w-full rounded-lg"
className="w-full rounded-lg cursor-pointer"
>
{t("understood")}
</Button>

2
features/products/hooks/useProducts.ts
View File

@@ -207,7 +207,7 @@ export function useSubmitReview() {
},
(variables) => [
reviewKeys.byProduct(variables.productId),
productKeys.bySlug(""), // Invalidates all slug queries
productKeys.bySlug(""),
reviewKeys.all,
]
);

14
features/profile/components/ProfilePageContent.tsx
View File

@@ -38,7 +38,6 @@ export default function ClientProfilePage(props: ProfilePageProps) {
useEffect(() => {
if (user && !isEditing) {
console.log("[Profile] User data loaded:", user);
setFormData({
name: user.first_name || "",
last_name: user.last_name || "",
@@ -90,7 +89,6 @@ export default function ClientProfilePage(props: ProfilePageProps) {
address: formData.address.trim(),
};
console.log("[Profile] Saving data:", apiData);
try {
await updateProfile.mutateAsync(apiData);
@@ -160,7 +158,7 @@ export default function ClientProfilePage(props: ProfilePageProps) {
</p>
<Button
onClick={() => window.location.reload()}
className="w-full sm:w-auto"
className="w-full sm:w-auto cursor-pointer"
>
{t("try_again")}
</Button>
@@ -186,7 +184,7 @@ export default function ClientProfilePage(props: ProfilePageProps) {
: t("view_your_information")}
</p>
</div>
<div className="flex-shrink-0 w-12 h-12 sm:w-14 sm:h-14 bg-blue-600 rounded-full flex items-center justify-center shadow-sm">
<div className="shrink-0 w-12 h-12 sm:w-14 sm:h-14 bg-blue-600 rounded-full flex items-center justify-center shadow-sm">
<User className="h-6 w-6 sm:h-7 sm:w-7 text-white" />
</div>
</div>
@@ -209,7 +207,7 @@ export default function ClientProfilePage(props: ProfilePageProps) {
onClick={handleEdit}
variant="outline"
size="sm"
className="self-start sm:self-center border-gray-300 hover:bg-gray-50 text-gray-700 h-9"
className="self-start sm:self-center cursor-pointer border-gray-300 hover:bg-gray-50 text-gray-700 h-9"
>
<Edit2 className="h-3.5 w-3.5 sm:h-4 sm:w-4 mr-1.5 sm:mr-2" />
<span className="text-sm">{t("edit")}</span>
@@ -329,7 +327,7 @@ export default function ClientProfilePage(props: ProfilePageProps) {
<Button
onClick={handleSave}
disabled={updateProfile.isPending}
className="w-full sm:flex-1 bg-blue-600 hover:bg-blue-700 h-10 sm:h-11 text-sm sm:text-base font-medium shadow-sm"
className="w-full sm:flex-1 cursor-pointer bg-blue-600 hover:bg-blue-700 h-10 sm:h-11 text-sm sm:text-base font-medium shadow-sm"
>
<Save className="h-4 w-4 mr-2" />
{updateProfile.isPending
@@ -340,7 +338,7 @@ export default function ClientProfilePage(props: ProfilePageProps) {
onClick={handleCancel}
variant="outline"
disabled={updateProfile.isPending}
className="w-full sm:flex-1 h-10 sm:h-11 text-sm sm:text-base font-medium border-gray-300 hover:bg-gray-50"
className="w-full sm:flex-1 cursor-pointer h-10 sm:h-11 text-sm sm:text-base font-medium border-gray-300 hover:bg-gray-50"
>
<X className="h-4 w-4 mr-2" />
{t("cancel")}
@@ -358,7 +356,7 @@ export default function ClientProfilePage(props: ProfilePageProps) {
onClick={handleLogout}
variant="destructive"
size="lg"
className="w-full sm:w-auto sm:min-w-[280px] flex items-center justify-center gap-2 h-11 text-sm sm:text-base font-medium shadow-sm"
className="w-full cursor-pointer sm:w-auto sm:min-w-[280px] flex items-center justify-center gap-2 h-11 text-sm sm:text-base font-medium shadow-sm"
>
<LogOut className="h-4 w-4 sm:h-5 sm:w-5" />
{t("common.logout")}

6
features/profile/hooks/useUserProfile.ts
View File

@@ -1,6 +1,6 @@
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { apiClient } from "@/lib/api";
import { userStore } from "../userStore";
// import { userStore } from "../userStore";
import type { ProfileResponse, UpdateProfileRequest, UpdateProfileResponse } from "@/lib/types/api";
export const useUserProfile = () => {
@@ -11,7 +11,7 @@ export const useUserProfile = () => {
const userData = response.data.data;
// Store'a kaydet
userStore.setUser(userData);
// userStore.setUser(userData);
return userData;
},
@@ -29,7 +29,7 @@ export const useUpdateProfile = () => {
return response.data.data;
},
onSuccess: (data) => {
userStore.setUser(data);
// userStore.setUser(data);
queryClient.setQueryData(["user-profile"], data);
queryClient.invalidateQueries({ queryKey: ["user-profile"] });
},

30
features/profile/userStore.ts
View File

@@ -1,30 +0,0 @@
import type { UserProfile } from "@/lib/types/api";
// In-memory store (session-based, no persistence)
class UserStore {
private user: UserProfile | null = null;
setUser(user: UserProfile | null) {
this.user = user;
}
getUser(): UserProfile | null {
return this.user;
}
clearUser() {
this.user = null;
}
getOrderData(): { customer_name: string; customer_phone: string, customer_last_name: string } | null {
if (!this.user) return null;
return {
customer_name: this.user.first_name,
customer_last_name: this.user.last_name,
customer_phone: this.user.phone_number,
};
}
}
export const userStore = new UserStore();