first commit
This commit is contained in:
Jelaletdin12
90
features/products/components/ProductImageGallery.tsx
Normal file
90
features/products/components/ProductImageGallery.tsx
Normal file
@@ -0,0 +1,90 @@
|
||||
import { useState, useEffect, useRef, useCallback } from "react";
|
||||
import Image from "next/image";
|
||||
|
||||
interface ProductImageGalleryProps {
|
||||
images: string[];
|
||||
productName: string;
|
||||
noImageText: string;
|
||||
}
|
||||
|
||||
export function ProductImageGallery({
|
||||
images,
|
||||
productName,
|
||||
noImageText,
|
||||
}: ProductImageGalleryProps) {
|
||||
const [selectedImage, setSelectedImage] = useState(0);
|
||||
const autoplayTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);
|
||||
|
||||
useEffect(() => {
|
||||
if (images.length <= 1) return;
|
||||
|
||||
const startAutoplay = () => {
|
||||
autoplayTimerRef.current = setInterval(() => {
|
||||
setSelectedImage((prev) => (prev + 1) % images.length);
|
||||
}, 3000);
|
||||
};
|
||||
|
||||
startAutoplay();
|
||||
return () => {
|
||||
if (autoplayTimerRef.current) clearInterval(autoplayTimerRef.current);
|
||||
};
|
||||
}, [images.length]);
|
||||
|
||||
const handleImageSelect = useCallback(
|
||||
(index: number) => {
|
||||
setSelectedImage(index);
|
||||
if (autoplayTimerRef.current) clearInterval(autoplayTimerRef.current);
|
||||
if (images.length > 1) {
|
||||
autoplayTimerRef.current = setInterval(() => {
|
||||
setSelectedImage((prev) => (prev + 1) % images.length);
|
||||
}, 3000);
|
||||
}
|
||||
},
|
||||
[images.length]
|
||||
);
|
||||
|
||||
return (
|
||||
<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 ? (
|
||||
<Image
|
||||
src={images[selectedImage]}
|
||||
alt={productName}
|
||||
fill
|
||||
className="object-contain"
|
||||
priority
|
||||
/>
|
||||
) : (
|
||||
<div className="flex items-center justify-center h-full text-gray-400">
|
||||
{noImageText}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{images.length > 1 && (
|
||||
<div className="mt-4 flex gap-2 overflow-x-auto pb-2">
|
||||
{images.map((image, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => handleImageSelect(index)}
|
||||
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"
|
||||
}`}
|
||||
>
|
||||
<Image
|
||||
src={image}
|
||||
alt={`${productName} ${index + 1}`}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
126
features/products/components/ProductInfoCard.tsx
Normal file
126
features/products/components/ProductInfoCard.tsx
Normal file
@@ -0,0 +1,126 @@
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { Star } from "lucide-react";
|
||||
|
||||
interface ProductProperty {
|
||||
name: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
interface ProductInfoCardProps {
|
||||
name: string;
|
||||
brandName?: string;
|
||||
stock?: number;
|
||||
barcode?: string;
|
||||
colour?: string;
|
||||
properties?: ProductProperty[];
|
||||
description?: string;
|
||||
averageRating: number;
|
||||
reviewsCount: number;
|
||||
t: (key: string, params?: any) => string;
|
||||
}
|
||||
|
||||
export function ProductInfoCard({
|
||||
name,
|
||||
brandName,
|
||||
stock,
|
||||
barcode,
|
||||
colour,
|
||||
properties,
|
||||
description,
|
||||
averageRating,
|
||||
reviewsCount,
|
||||
t,
|
||||
}: ProductInfoCardProps) {
|
||||
return (
|
||||
<div className="flex-1 space-y-6 bg-white">
|
||||
<Card className="p-4 rounded-xl border-gray-200">
|
||||
<h3 className="text-xl font-semibold mb-4">{name}</h3>
|
||||
<div className="space-y-3">
|
||||
{brandName && (
|
||||
<>
|
||||
<div className="flex justify-between items-center py-2">
|
||||
<span className="text-gray-500">{t("brands")}</span>
|
||||
<span className="font-medium">{brandName}</span>
|
||||
</div>
|
||||
<Separator />
|
||||
</>
|
||||
)}
|
||||
|
||||
{stock !== undefined && (
|
||||
<>
|
||||
<div className="flex justify-between items-center py-2">
|
||||
<span className="text-gray-500">{t("stock")}</span>
|
||||
<span
|
||||
className={`font-medium ${
|
||||
stock === 0
|
||||
? "text-red-500"
|
||||
: stock <= 5
|
||||
? "text-orange-600"
|
||||
: "text-green-600"
|
||||
}`}
|
||||
>
|
||||
{stock === 0
|
||||
? t("out_of_stock")
|
||||
: stock <= 5
|
||||
? `${t("only_left", { count: stock })}`
|
||||
: stock}
|
||||
</span>
|
||||
</div>
|
||||
<Separator />
|
||||
</>
|
||||
)}
|
||||
|
||||
{barcode && (
|
||||
<>
|
||||
<div className="flex justify-between items-center py-2">
|
||||
<span className="text-gray-500">{t("barcode")}</span>
|
||||
<span className="font-mono text-sm">{barcode}</span>
|
||||
</div>
|
||||
<Separator />
|
||||
</>
|
||||
)}
|
||||
|
||||
{colour && (
|
||||
<>
|
||||
<div className="flex justify-between items-center py-2">
|
||||
<span className="text-gray-500">{t("color")}</span>
|
||||
<span className="font-medium">{colour}</span>
|
||||
</div>
|
||||
<Separator />
|
||||
</>
|
||||
)}
|
||||
|
||||
{properties && properties.length > 0 && (
|
||||
<>
|
||||
{properties.map(
|
||||
(prop, idx) =>
|
||||
prop.value && (
|
||||
<div key={idx}>
|
||||
<div className="flex justify-between items-center py-2">
|
||||
<span className="text-gray-500">{prop.name}</span>
|
||||
<span className="font-medium">{prop.value}</span>
|
||||
</div>
|
||||
{idx < properties.length - 1 && <Separator />}
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{description && (
|
||||
<Card className="p-4 rounded-xl border-gray-200 gap-2">
|
||||
<h3 className="text-xl font-semibold mb-3">
|
||||
{t("product_description")}
|
||||
</h3>
|
||||
<div
|
||||
className="text-gray-700 leading-relaxed prose prose-sm max-w-none"
|
||||
dangerouslySetInnerHTML={{ __html: description }}
|
||||
/>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
553
features/products/components/ProductPageContent.tsx
Normal file
553
features/products/components/ProductPageContent.tsx
Normal file
@@ -0,0 +1,553 @@
|
||||
"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 {
|
||||
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";
|
||||
import {
|
||||
useIsFavorite,
|
||||
useToggleFavorite,
|
||||
} from "@/features/favorites/hooks/useFavorites";
|
||||
interface ProductDetailProps {
|
||||
slug: string;
|
||||
}
|
||||
|
||||
const PENDING_PRODUCT_UPDATES_KEY = "pendingProductUpdates";
|
||||
|
||||
interface PendingUpdate {
|
||||
quantity: number;
|
||||
timestamp: number;
|
||||
retryCount: number;
|
||||
}
|
||||
|
||||
// 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 [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 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 { isFavorite, isLoading: isFavLoading } = useIsFavorite(
|
||||
product?.id || 0
|
||||
);
|
||||
const cartOptions = useMemo(
|
||||
() => ({
|
||||
refetchOnMount: true,
|
||||
refetchOnWindowFocus: true,
|
||||
staleTime: 0,
|
||||
}),
|
||||
[]
|
||||
);
|
||||
const { mutate: toggleFavoriteMutation } = useToggleFavorite();
|
||||
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 cartItem = useMemo(() => {
|
||||
const item = cartData?.data?.find(
|
||||
(item: any) => item.product?.id === product?.id
|
||||
);
|
||||
|
||||
return item;
|
||||
}, [cartData, product, 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]
|
||||
);
|
||||
|
||||
const reviews = useMemo(() => product?.reviews_resources || [], [product]);
|
||||
const averageRating = useMemo(
|
||||
() =>
|
||||
product?.reviews?.rating ? Number.parseFloat(product.reviews.rating) : 0,
|
||||
[product]
|
||||
);
|
||||
|
||||
const transformedRelatedProducts = useMemo(() => {
|
||||
if (!relatedProducts) return [];
|
||||
return relatedProducts.map((p) => ({
|
||||
id: p.id,
|
||||
slug: p.slug,
|
||||
name: p.name,
|
||||
price_amount: p.price_amount,
|
||||
old_price_amount: p.old_price_amount ?? undefined,
|
||||
struct_price_text: `${p.price_amount} TMT`,
|
||||
discount: null,
|
||||
discount_text: null,
|
||||
stock: p.stock,
|
||||
media: p.media,
|
||||
labels: [],
|
||||
price_color: undefined,
|
||||
}));
|
||||
}, [relatedProducts]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!product?.id || isInitialized) return;
|
||||
|
||||
if (cartItem?.product_quantity) {
|
||||
const serverQuantity = cartItem.product_quantity;
|
||||
setLocalQuantity(serverQuantity);
|
||||
lastSyncedQuantityRef.current = serverQuantity;
|
||||
}
|
||||
|
||||
setIsInitialized(true);
|
||||
}, [product?.id, cartItem, isInitialized]);
|
||||
|
||||
useEffect(() => {
|
||||
setLocalQuantity(cartItem?.product_quantity || 1);
|
||||
}, [cartItem]);
|
||||
|
||||
const savePendingUpdate = useCallback(
|
||||
(quantity: number) => {
|
||||
if (!product?.id) return;
|
||||
try {
|
||||
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)
|
||||
);
|
||||
} catch (error) {
|
||||
console.error("Failed to save pending update:", error);
|
||||
}
|
||||
},
|
||||
[product?.id]
|
||||
);
|
||||
|
||||
const clearPendingUpdate = useCallback(() => {
|
||||
if (!product?.id) return;
|
||||
try {
|
||||
const stored = sessionStorage.getItem(PENDING_PRODUCT_UPDATES_KEY);
|
||||
if (stored) {
|
||||
const pending: Record<number, PendingUpdate> = JSON.parse(stored);
|
||||
delete pending[product.id];
|
||||
if (Object.keys(pending).length === 0) {
|
||||
sessionStorage.removeItem(PENDING_PRODUCT_UPDATES_KEY);
|
||||
} else {
|
||||
sessionStorage.setItem(
|
||||
PENDING_PRODUCT_UPDATES_KEY,
|
||||
JSON.stringify(pending)
|
||||
);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to clear pending update:", error);
|
||||
}
|
||||
}, [product?.id]);
|
||||
|
||||
const retrySync = useCallback(
|
||||
(quantity: number) => {
|
||||
const maxRetries = 4;
|
||||
const retryCount = retryCountRef.current;
|
||||
|
||||
if (retryCount >= maxRetries) {
|
||||
setSyncError(true);
|
||||
setIsSyncing(false);
|
||||
shouldSyncFromCartRef.current = true;
|
||||
toast.error(t("error"), {
|
||||
description: t("update_quantity_failed"),
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const delay = Math.min(1000 * Math.pow(2, retryCount), 16000);
|
||||
retryCountRef.current++;
|
||||
|
||||
retryTimerRef.current = setTimeout(() => {
|
||||
syncToServerRef.current?.(quantity);
|
||||
}, delay);
|
||||
},
|
||||
[t]
|
||||
);
|
||||
|
||||
retrySyncRef.current = retrySync;
|
||||
|
||||
const syncToServer = useCallback(
|
||||
async (quantity: number) => {
|
||||
if (!product?.id) return;
|
||||
|
||||
if (isRequestInFlightRef.current) {
|
||||
pendingQuantityRef.current = quantity;
|
||||
return;
|
||||
}
|
||||
|
||||
isRequestInFlightRef.current = true;
|
||||
setIsSyncing(true);
|
||||
setSyncError(false);
|
||||
|
||||
try {
|
||||
if (quantity === 0) {
|
||||
await removeFromCartMutation.mutateAsync(product.id);
|
||||
toast.success(t("removed_from_cart"));
|
||||
} else if (isInCart) {
|
||||
await updateCartMutation.mutateAsync({
|
||||
productId: product.id,
|
||||
quantity: quantity,
|
||||
});
|
||||
} else {
|
||||
await addToCartMutation.mutateAsync({
|
||||
productId: product.id,
|
||||
quantity: quantity,
|
||||
});
|
||||
}
|
||||
|
||||
retryCountRef.current = 0;
|
||||
clearPendingUpdate();
|
||||
|
||||
if (pendingQuantityRef.current !== null) {
|
||||
const nextQuantity = pendingQuantityRef.current;
|
||||
pendingQuantityRef.current = null;
|
||||
setTimeout(() => syncToServerRef.current?.(nextQuantity), 100);
|
||||
}
|
||||
} catch (error) {
|
||||
setLocalQuantity(cartItem?.product_quantity || 1);
|
||||
toast.error(t("failed_to_update_quantity"), {
|
||||
description: "Please try again",
|
||||
});
|
||||
|
||||
retrySyncRef.current?.(quantity);
|
||||
} finally {
|
||||
isRequestInFlightRef.current = false;
|
||||
setIsSyncing(false);
|
||||
}
|
||||
},
|
||||
[
|
||||
product?.id,
|
||||
isInCart,
|
||||
updateCartMutation,
|
||||
addToCartMutation,
|
||||
removeFromCartMutation,
|
||||
cartItem,
|
||||
clearPendingUpdate,
|
||||
t,
|
||||
]
|
||||
);
|
||||
|
||||
syncToServerRef.current = syncToServer;
|
||||
|
||||
useEffect(() => {
|
||||
if (!isInCart || !product?.id) return;
|
||||
|
||||
if (localQuantity === (cartItem?.product_quantity || 1)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (debounceTimerRef.current) {
|
||||
clearTimeout(debounceTimerRef.current);
|
||||
}
|
||||
|
||||
debounceTimerRef.current = setTimeout(() => {
|
||||
syncToServerRef.current?.(localQuantity);
|
||||
}, 800);
|
||||
|
||||
return () => {
|
||||
if (debounceTimerRef.current) {
|
||||
clearTimeout(debounceTimerRef.current);
|
||||
}
|
||||
};
|
||||
}, [localQuantity, isInCart, product?.id, cartItem?.product_quantity]);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
|
||||
if (retryTimerRef.current) clearTimeout(retryTimerRef.current);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleAddToCart = useCallback(async () => {
|
||||
if (!product?.id) return;
|
||||
|
||||
if (localQuantity > availableStock) {
|
||||
setShowStockModal(true);
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSyncing(true);
|
||||
shouldSyncFromCartRef.current = false;
|
||||
|
||||
try {
|
||||
await addToCartMutation.mutateAsync({
|
||||
productId: product.id,
|
||||
quantity: localQuantity,
|
||||
});
|
||||
|
||||
lastSyncedQuantityRef.current = localQuantity;
|
||||
|
||||
setTimeout(() => {
|
||||
shouldSyncFromCartRef.current = true;
|
||||
}, 150);
|
||||
|
||||
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;
|
||||
toast.error(t("error"), {
|
||||
description: t("add_to_cart_failed"),
|
||||
});
|
||||
}
|
||||
}, [product, localQuantity, availableStock, addToCartMutation, t]);
|
||||
|
||||
const handleQuantityIncrease = useCallback(() => {
|
||||
if (localQuantity >= availableStock) {
|
||||
setShowStockModal(true);
|
||||
return;
|
||||
}
|
||||
setLocalQuantity((prev) => {
|
||||
const newVal = prev + 1;
|
||||
return newVal;
|
||||
});
|
||||
}, [localQuantity, availableStock]);
|
||||
|
||||
const handleQuantityDecrease = useCallback(() => {
|
||||
if (localQuantity <= 0) return;
|
||||
setLocalQuantity((prev) => {
|
||||
const newVal = prev - 1;
|
||||
return newVal;
|
||||
});
|
||||
}, [localQuantity]);
|
||||
|
||||
const handleToggleFavorite = useCallback(
|
||||
(e?: React.MouseEvent<HTMLButtonElement>) => {
|
||||
e?.preventDefault();
|
||||
e?.stopPropagation();
|
||||
|
||||
if (!product?.id) {
|
||||
toast.error(t("error"), {
|
||||
description: "Product ID not found",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
toggleFavoriteMutation(
|
||||
{
|
||||
productId: product.id,
|
||||
isFavorite,
|
||||
},
|
||||
{
|
||||
onSuccess: (data) => {
|
||||
toast.success(
|
||||
data?.wasAdded
|
||||
? t("added_to_favorites")
|
||||
: t("removed_from_favorites")
|
||||
);
|
||||
},
|
||||
onError: () => {
|
||||
toast.error(t("error"), {
|
||||
description: "Try again later",
|
||||
});
|
||||
},
|
||||
}
|
||||
);
|
||||
},
|
||||
[product?.id, isFavorite, toggleFavoriteMutation, t]
|
||||
);
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
try {
|
||||
await submitReviewMutation.mutateAsync({
|
||||
productId: product.id,
|
||||
rating: rating,
|
||||
title: text,
|
||||
source: "site",
|
||||
});
|
||||
|
||||
await refetchProduct();
|
||||
|
||||
toast.success("Review submitted successfully!");
|
||||
setShowReviewModal(false);
|
||||
} catch (error) {
|
||||
toast.error(t("error"), {
|
||||
description: "Failed to submit review",
|
||||
});
|
||||
}
|
||||
},
|
||||
[product?.id, submitReviewMutation, refetchProduct, t]
|
||||
);
|
||||
|
||||
const loadingSkeleton = useMemo(
|
||||
() => (
|
||||
<div className=" mx-auto px-4 py-8">
|
||||
<div className="flex flex-col lg:flex-row gap-8">
|
||||
<div className="flex-1 max-w-2xl">
|
||||
<Skeleton className="aspect-square w-full rounded-2xl" />
|
||||
<div className="mt-4 flex gap-2">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<Skeleton key={i} className="w-16 h-16 rounded" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 space-y-6">
|
||||
<Skeleton className="h-10 w-64" />
|
||||
<Skeleton className="h-20 w-full" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
[]
|
||||
);
|
||||
|
||||
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>
|
||||
</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")}
|
||||
/>
|
||||
|
||||
<ProductInfoCard
|
||||
name={product.name}
|
||||
brandName={product.brand?.name ?? undefined}
|
||||
stock={product.stock}
|
||||
barcode={product.barcode}
|
||||
colour={product.colour ?? undefined}
|
||||
properties={product.properties}
|
||||
description={product.description}
|
||||
averageRating={averageRating}
|
||||
reviewsCount={product.reviews?.count || 0}
|
||||
t={t}
|
||||
/>
|
||||
|
||||
<ProductPurchaseCard
|
||||
price={product.price_amount}
|
||||
oldPrice={product.old_price_amount ?? undefined}
|
||||
isInCart={isInCart}
|
||||
localQuantity={localQuantity}
|
||||
availableStock={availableStock}
|
||||
isSyncing={isSyncing}
|
||||
syncError={syncError}
|
||||
isFavorite={isFavorite}
|
||||
productStock={product.stock}
|
||||
channelName={product.channel?.[0]?.name}
|
||||
onAddToCart={handleAddToCart}
|
||||
onQuantityIncrease={handleQuantityIncrease}
|
||||
onQuantityDecrease={handleQuantityDecrease}
|
||||
onToggleFavorite={handleToggleFavorite}
|
||||
t={t}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ProductReviewsSection
|
||||
reviews={reviews}
|
||||
averageRating={averageRating}
|
||||
isLoading={false}
|
||||
onWriteReview={() => setShowReviewModal(true)}
|
||||
/>
|
||||
|
||||
<RelatedProductsSection products={transformedRelatedProducts} />
|
||||
</div>
|
||||
|
||||
<StockLimitModal
|
||||
open={showStockModal}
|
||||
onOpenChange={setShowStockModal}
|
||||
productName={product.name}
|
||||
availableStock={availableStock}
|
||||
t={t}
|
||||
/>
|
||||
|
||||
<ReviewModal
|
||||
open={showReviewModal}
|
||||
onOpenChange={setShowReviewModal}
|
||||
onSubmit={handleSubmitReview}
|
||||
isSubmitting={submitReviewMutation.isPending}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
190
features/products/components/ProductPurchaseCard.tsx
Normal file
190
features/products/components/ProductPurchaseCard.tsx
Normal file
@@ -0,0 +1,190 @@
|
||||
import Link from "next/link";
|
||||
import { Minus, Plus, Heart, ShoppingCart, Store } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
|
||||
|
||||
interface ProductPurchaseCardProps {
|
||||
price: string;
|
||||
oldPrice?: string;
|
||||
isInCart: boolean;
|
||||
localQuantity: number;
|
||||
availableStock: number;
|
||||
isSyncing: boolean;
|
||||
syncError: boolean;
|
||||
isFavorite: boolean;
|
||||
productStock: number;
|
||||
channelName?: string;
|
||||
onAddToCart: () => void;
|
||||
onQuantityIncrease: () => void;
|
||||
onQuantityDecrease: () => void;
|
||||
onToggleFavorite: () => void;
|
||||
t: (key: string) => string;
|
||||
}
|
||||
|
||||
export function ProductPurchaseCard({
|
||||
price,
|
||||
oldPrice,
|
||||
isInCart,
|
||||
localQuantity,
|
||||
availableStock,
|
||||
isSyncing,
|
||||
syncError,
|
||||
isFavorite,
|
||||
productStock,
|
||||
channelName,
|
||||
onAddToCart,
|
||||
onQuantityIncrease,
|
||||
onQuantityDecrease,
|
||||
onToggleFavorite,
|
||||
t,
|
||||
}: ProductPurchaseCardProps) {
|
||||
return (
|
||||
<div className="lg:w-[380px] space-y-4">
|
||||
<Card className="p-6 rounded-xl">
|
||||
<div className="flex justify-between items-start mb-6">
|
||||
<span className="text-lg text-gray-500">{t("price")}:</span>
|
||||
<div className="flex flex-col items-end">
|
||||
<span className="text-3xl font-bold text-primary">{price} TMT</span>
|
||||
{oldPrice && parseFloat(oldPrice) > 0 && (
|
||||
<span className="text-lg text-gray-400 line-through">
|
||||
{oldPrice} TMT
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{isInCart ? (
|
||||
<>
|
||||
<Link href="/cart">
|
||||
<Button
|
||||
size="lg"
|
||||
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")}
|
||||
</Button>
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={onQuantityDecrease}
|
||||
disabled={isSyncing}
|
||||
className={`rounded-lg cursor-pointer h-12 w-12 ${
|
||||
isSyncing ? "opacity-70" : ""
|
||||
}`}
|
||||
>
|
||||
<Minus className="h-5 w-5" />
|
||||
</Button>
|
||||
<div className="flex-1 text-center font-semibold text-xl border rounded-xl h-12 flex items-center justify-center relative">
|
||||
{localQuantity}
|
||||
{syncError && (
|
||||
<span
|
||||
className="absolute -top-1 -right-1 h-2 w-2 bg-red-500 rounded-full"
|
||||
title="Sync error"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={onQuantityIncrease}
|
||||
disabled={isSyncing}
|
||||
className={`rounded-lg cursor-pointer h-12 w-12 ${
|
||||
isSyncing ? "opacity-70" : ""
|
||||
}`}
|
||||
>
|
||||
<Plus className="h-5 w-5" />
|
||||
</Button>
|
||||
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={onToggleFavorite}
|
||||
className={`rounded-lg h-12 w-12 transition-all border cursor-pointer ${
|
||||
isFavorite
|
||||
? "bg-[#F0F8FF] border-blue-300 hover:bg-blue-100"
|
||||
: "hover:bg-gray-50"
|
||||
}`}
|
||||
>
|
||||
<Heart
|
||||
className={`h-6! w-6! transition-all ${
|
||||
isFavorite
|
||||
? "fill-[#005bff] text-[#005bff]"
|
||||
: "text-[#005bff]"
|
||||
}`}
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
size="lg"
|
||||
onClick={onAddToCart}
|
||||
disabled={isSyncing || productStock === 0}
|
||||
className="flex-1 rounded-lg text-lg font-bold bg-[#005bff] hover:bg-[#0041c4] cursor-pointer"
|
||||
>
|
||||
{isSyncing ? (
|
||||
<>{t("adding")}</>
|
||||
) : (
|
||||
<>
|
||||
<ShoppingCart className="mr-2 h-5 w-5" />
|
||||
{productStock === 0 ? t("out_of_stock") : t("add_to_cart")}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={onToggleFavorite}
|
||||
className={`rounded-lg h-12 w-12 transition-all border cursor-pointer ${
|
||||
isFavorite
|
||||
? "bg-[#F0F8FF] border-blue-300 hover:bg-blue-100"
|
||||
: "hover:bg-gray-50"
|
||||
}`}
|
||||
>
|
||||
<Heart
|
||||
className={`h-6! w-6! transition-all ${
|
||||
isFavorite
|
||||
? "fill-[#005bff] text-[#005bff]"
|
||||
: "text-[#005bff]"
|
||||
}`}
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{channelName && (
|
||||
<Card className="p-6 rounded-xl">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<Avatar className="w-14 h-14 bg-primary/10">
|
||||
<AvatarFallback className="bg-transparent">
|
||||
<Store className="h-6 w-6 text-primary" />
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">{t("store")}</p>
|
||||
<h4 className="text-lg font-bold">{channelName}</h4>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="lg"
|
||||
className="w-full cursor-pointer rounded-lg"
|
||||
>
|
||||
{t("write_to_store")}
|
||||
</Button>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
94
features/products/components/ProductReviewsSection.tsx
Normal file
94
features/products/components/ProductReviewsSection.tsx
Normal file
@@ -0,0 +1,94 @@
|
||||
import { Star, Send } from "lucide-react";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
interface Review {
|
||||
id: number;
|
||||
rating: number;
|
||||
title: string;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
interface ProductReviewsSectionProps {
|
||||
reviews: Review[];
|
||||
averageRating: number;
|
||||
isLoading: boolean;
|
||||
onWriteReview: () => void;
|
||||
}
|
||||
|
||||
export function ProductReviewsSection({
|
||||
reviews,
|
||||
averageRating,
|
||||
isLoading,
|
||||
onWriteReview,
|
||||
}: ProductReviewsSectionProps) {
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
const t= useTranslations();
|
||||
|
||||
return (
|
||||
<Card className="p-6 rounded-xl">
|
||||
<div className="flex justify-between items-center ">
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold">{t("customer_reviews")}</h3>
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
{renderStars(Math.round(averageRating))}
|
||||
{/* <span className="text-sm text-gray-600">
|
||||
{averageRating.toFixed(1)} out of 5
|
||||
</span> */}
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<Separator className="my-4" />
|
||||
|
||||
{isLoading ? (
|
||||
<div className="space-y-4">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<Skeleton key={i} className="h-24 w-full" />
|
||||
))}
|
||||
</div>
|
||||
) : reviews.length > 0 ? (
|
||||
<div className="space-y-4">
|
||||
{reviews.map((review) => (
|
||||
<div key={review.id} className="border-b pb-4 last:border-0">
|
||||
<div className="flex items-start justify-between mb-2">
|
||||
<div>
|
||||
{renderStars(review.rating)}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-gray-700">{review.title}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-8 text-gray-500">
|
||||
{t("no_reviews")}
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
74
features/products/components/RelatedProductsSection.tsx
Normal file
74
features/products/components/RelatedProductsSection.tsx
Normal file
@@ -0,0 +1,74 @@
|
||||
import ProductCard from "@/features/home/components/ProductCard";
|
||||
import {useTranslations} from "next-intl";
|
||||
interface RelatedProduct {
|
||||
id: number;
|
||||
slug: string;
|
||||
name: string;
|
||||
price_amount: string;
|
||||
old_price_amount?: string;
|
||||
struct_price_text: string;
|
||||
discount?: number | null;
|
||||
discount_text?: string | null;
|
||||
stock?: number;
|
||||
media: Array<{
|
||||
images_800x800?: string;
|
||||
images_720x720?: string;
|
||||
images_400x400?: string;
|
||||
thumbnail: string;
|
||||
}>;
|
||||
labels?: Array<{
|
||||
text: string;
|
||||
bg_color: string;
|
||||
}>;
|
||||
price_color?: string;
|
||||
}
|
||||
|
||||
interface RelatedProductsSectionProps {
|
||||
products: RelatedProduct[];
|
||||
}
|
||||
|
||||
export function RelatedProductsSection({
|
||||
products,
|
||||
}: RelatedProductsSectionProps) {
|
||||
const t = useTranslations();
|
||||
if (!products || products.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-lg p-6">
|
||||
<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) => {
|
||||
const images =
|
||||
product.media?.map(
|
||||
(m) =>
|
||||
m.images_800x800 ||
|
||||
m.images_720x720 ||
|
||||
m.images_400x400 ||
|
||||
m.thumbnail
|
||||
) || [];
|
||||
|
||||
return (
|
||||
<ProductCard
|
||||
key={product.id}
|
||||
id={product.id}
|
||||
name={product.name}
|
||||
price={parseFloat(product.price_amount) || null}
|
||||
struct_price_text={
|
||||
product.struct_price_text || `${product.price_amount} TMT`
|
||||
}
|
||||
discount={product.discount}
|
||||
discount_text={product.discount_text}
|
||||
images={images}
|
||||
labels={product.labels || []}
|
||||
price_color={product.price_color}
|
||||
height={360}
|
||||
width={280}
|
||||
button={true}
|
||||
stock={product.stock}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
124
features/products/components/ReviewModal.tsx
Normal file
124
features/products/components/ReviewModal.tsx
Normal file
@@ -0,0 +1,124 @@
|
||||
import { useState } from "react";
|
||||
import { Star, Send } from "lucide-react";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
interface ReviewModalProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
onSubmit: (rating: number, text: string) => Promise<void>;
|
||||
isSubmitting: boolean;
|
||||
}
|
||||
|
||||
export function ReviewModal({
|
||||
open,
|
||||
onOpenChange,
|
||||
onSubmit,
|
||||
isSubmitting,
|
||||
}: ReviewModalProps) {
|
||||
const [rating, setRating] = useState(0);
|
||||
const [text, setText] = useState("");
|
||||
const [hoveredStar, setHoveredStar] = useState(0);
|
||||
|
||||
const t = useTranslations();
|
||||
|
||||
const handleClose = () => {
|
||||
onOpenChange(false);
|
||||
setRating(0);
|
||||
setText("");
|
||||
setHoveredStar(0);
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
await onSubmit(rating, text);
|
||||
handleClose();
|
||||
};
|
||||
|
||||
const renderStars = () => {
|
||||
return (
|
||||
<div className="flex gap-2">
|
||||
{[1, 2, 3, 4, 5].map((star) => (
|
||||
<Star
|
||||
key={star}
|
||||
className={`h-5 w-5 cursor-pointer transition-all ${
|
||||
star <= (hoveredStar || rating)
|
||||
? "fill-yellow-400 text-yellow-400"
|
||||
: "text-gray-300"
|
||||
}`}
|
||||
onClick={() => setRating(star)}
|
||||
onMouseEnter={() => setHoveredStar(star)}
|
||||
onMouseLeave={() => setHoveredStar(0)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-xl">{t("write_review")}</DialogTitle>
|
||||
<DialogDescription>
|
||||
{t("share_experience")}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 pt-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">{t("rating")}</label>
|
||||
{renderStars()}
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">
|
||||
{t("your_review")}
|
||||
</label>
|
||||
<Textarea
|
||||
value={text}
|
||||
onChange={(e) => setText(e.target.value)}
|
||||
placeholder={t("write_review")}
|
||||
className="min-h-[120px] resize-none"
|
||||
maxLength={500}
|
||||
/>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
{text.length}/500 {t("characters")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-3 mt-6">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleClose}
|
||||
className="flex-1 rounded-lg cursor-pointer"
|
||||
>
|
||||
{t("cancel")}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
disabled={rating === 0 || !text.trim() || isSubmitting}
|
||||
className="flex-1 rounded-lg cursor-pointer bg-[#005bff] hover:bg-[#0041c4]"
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
|
||||
{t("submitting")}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Send className="mr-2 h-4 w-4" />
|
||||
{t("submit_review")}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
56
features/products/components/StockLimitModal.tsx
Normal file
56
features/products/components/StockLimitModal.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
import { AlertTriangle } from "lucide-react";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
interface StockLimitModalProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
productName: string;
|
||||
availableStock: number;
|
||||
t: (key: string, params?: any) => string;
|
||||
}
|
||||
|
||||
export function StockLimitModal({
|
||||
open,
|
||||
onOpenChange,
|
||||
productName,
|
||||
availableStock,
|
||||
t,
|
||||
}: StockLimitModalProps) {
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<div className="flex items-center justify-center mb-4">
|
||||
<div className="rounded-full bg-orange-100 p-3">
|
||||
<AlertTriangle className="h-6 w-6 text-orange-600" />
|
||||
</div>
|
||||
</div>
|
||||
<DialogTitle className="text-center text-xl">
|
||||
{t("stock_limit_title")}
|
||||
</DialogTitle>
|
||||
<DialogDescription className="text-center text-base pt-2">
|
||||
{t("stock_limit_message", {
|
||||
product: productName,
|
||||
stock: availableStock,
|
||||
})}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="flex justify-center mt-4">
|
||||
<Button
|
||||
onClick={() => onOpenChange(false)}
|
||||
className="w-full rounded-lg cursor-pointer"
|
||||
>
|
||||
{t("understood")}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
236
features/products/hooks/useProducts.ts
Normal file
236
features/products/hooks/useProducts.ts
Normal file
@@ -0,0 +1,236 @@
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { apiClient } from "@/lib/api";
|
||||
import type { Review, Product, PaginatedResponse } from "@/lib/types/api";
|
||||
|
||||
// Types
|
||||
interface PaginationOptions {
|
||||
enabled?: boolean;
|
||||
page?: number;
|
||||
limit?: number;
|
||||
}
|
||||
|
||||
interface ReviewSubmission {
|
||||
productId: number | string;
|
||||
rating: number;
|
||||
title: string;
|
||||
source?: string;
|
||||
}
|
||||
|
||||
interface ReviewUpdate {
|
||||
reviewId: number | string;
|
||||
rating?: number;
|
||||
title?: string;
|
||||
source?: string;
|
||||
}
|
||||
|
||||
// Constants
|
||||
const DEFAULT_STALE_TIME = 1000 * 60 * 5; // 5 minutes
|
||||
const EXTENDED_STALE_TIME = 1000 * 60 * 15; // 15 minutes
|
||||
|
||||
// Query Keys Factory
|
||||
const reviewKeys = {
|
||||
all: ["reviews"],
|
||||
lists: () => [...reviewKeys.all, "list"],
|
||||
list: (page?: number, limit?: number) => [...reviewKeys.lists(), page, limit],
|
||||
details: () => [...reviewKeys.all, "detail"],
|
||||
detail: (id: number | string) => [...reviewKeys.details(), id],
|
||||
related: (id: number | string) => [...reviewKeys.detail(id), "related"],
|
||||
byProduct: (productId: number | string, page?: number, limit?: number) => [
|
||||
...reviewKeys.all,
|
||||
"product",
|
||||
productId,
|
||||
page,
|
||||
limit,
|
||||
],
|
||||
};
|
||||
|
||||
const productKeys = {
|
||||
all: ["products"],
|
||||
details: () => [...productKeys.all, "detail"],
|
||||
detail: (id: number | string) => [...productKeys.details(), id],
|
||||
bySlug: (slug: string) => [...productKeys.all, "slug", slug],
|
||||
related: (id: number | string) => [...productKeys.detail(id), "related"],
|
||||
};
|
||||
|
||||
// Generic fetch function
|
||||
async function fetchData<T>(
|
||||
url: string,
|
||||
params?: Record<string, any>
|
||||
): Promise<T> {
|
||||
const response = await apiClient.get<T>(url, { params });
|
||||
return response.data;
|
||||
}
|
||||
|
||||
// Review Queries
|
||||
export function useReview(
|
||||
reviewId: number | string,
|
||||
options?: { enabled?: boolean }
|
||||
) {
|
||||
return useQuery({
|
||||
queryKey: reviewKeys.detail(reviewId),
|
||||
queryFn: () => fetchData<Review>(`/reviews/${reviewId}`),
|
||||
enabled: options?.enabled !== false && !!reviewId,
|
||||
staleTime: DEFAULT_STALE_TIME * 2,
|
||||
});
|
||||
}
|
||||
|
||||
export function useReviews(options?: PaginationOptions) {
|
||||
return useQuery({
|
||||
queryKey: reviewKeys.list(options?.page, options?.limit),
|
||||
queryFn: async () => {
|
||||
const response = await fetchData<PaginatedResponse<Review>>("/reviews", {
|
||||
page: options?.page || 1,
|
||||
limit: options?.limit,
|
||||
});
|
||||
return {
|
||||
data: response.data || [],
|
||||
pagination: response.pagination || {},
|
||||
};
|
||||
},
|
||||
enabled: options?.enabled !== false,
|
||||
staleTime: DEFAULT_STALE_TIME,
|
||||
});
|
||||
}
|
||||
|
||||
export function useRelatedReviews(
|
||||
reviewId: number | string,
|
||||
options?: { enabled?: boolean }
|
||||
) {
|
||||
return useQuery({
|
||||
queryKey: reviewKeys.related(reviewId),
|
||||
queryFn: async () => {
|
||||
const response = await fetchData<PaginatedResponse<Review>>(
|
||||
`/reviews/${reviewId}/related`
|
||||
);
|
||||
return response.data || response;
|
||||
},
|
||||
enabled: options?.enabled !== false && !!reviewId,
|
||||
staleTime: EXTENDED_STALE_TIME,
|
||||
});
|
||||
}
|
||||
|
||||
export function useProductReviews(
|
||||
productId: number | string,
|
||||
options?: PaginationOptions
|
||||
) {
|
||||
return useQuery({
|
||||
queryKey: reviewKeys.byProduct(productId, options?.page, options?.limit),
|
||||
queryFn: async () => {
|
||||
const response = await fetchData<PaginatedResponse<Review>>(
|
||||
`/products/${productId}/reviews`,
|
||||
{
|
||||
page: options?.page || 1,
|
||||
limit: options?.limit || 10,
|
||||
}
|
||||
);
|
||||
return {
|
||||
data: response.data || [],
|
||||
pagination: response.pagination || {},
|
||||
};
|
||||
},
|
||||
enabled: options?.enabled !== false && !!productId,
|
||||
staleTime: DEFAULT_STALE_TIME,
|
||||
});
|
||||
}
|
||||
|
||||
// Product Queries
|
||||
export function useProduct(
|
||||
productId: number | string,
|
||||
options?: { enabled?: boolean }
|
||||
) {
|
||||
return useQuery({
|
||||
queryKey: productKeys.detail(productId),
|
||||
queryFn: () => fetchData<Product>(`/products/${productId}`),
|
||||
enabled: options?.enabled !== false && !!productId,
|
||||
staleTime: DEFAULT_STALE_TIME * 2,
|
||||
});
|
||||
}
|
||||
|
||||
export function useProductsBySlug(
|
||||
slug: string,
|
||||
options?: { enabled?: boolean }
|
||||
) {
|
||||
return useQuery({
|
||||
queryKey: productKeys.bySlug(slug),
|
||||
queryFn: async () => {
|
||||
const response = await fetchData<{ data: Product }>(`/products/${slug}`);
|
||||
return response.data || response;
|
||||
},
|
||||
enabled: options?.enabled !== false && !!slug,
|
||||
staleTime: DEFAULT_STALE_TIME * 2,
|
||||
});
|
||||
}
|
||||
|
||||
export function useRelatedProducts(
|
||||
productId: number | string,
|
||||
options?: { enabled?: boolean }
|
||||
) {
|
||||
return useQuery({
|
||||
queryKey: productKeys.related(productId),
|
||||
queryFn: async () => {
|
||||
const response = await fetchData<PaginatedResponse<Product>>(
|
||||
`/products/${productId}/related`
|
||||
);
|
||||
return response.data || [];
|
||||
},
|
||||
enabled: options?.enabled !== false && !!productId,
|
||||
staleTime: EXTENDED_STALE_TIME,
|
||||
});
|
||||
}
|
||||
|
||||
// Review Mutations
|
||||
function useReviewMutation<TVariables, TData = any>(
|
||||
mutationFn: (variables: TVariables) => Promise<TData>,
|
||||
invalidateKeys: (variables: TVariables, data?: TData) => any[]
|
||||
) {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn,
|
||||
onSuccess: (data, variables) => {
|
||||
const keys = invalidateKeys(variables, data);
|
||||
keys.forEach((key) => {
|
||||
queryClient.invalidateQueries({ queryKey: key });
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useSubmitReview() {
|
||||
return useReviewMutation<ReviewSubmission>(
|
||||
async ({ productId, rating, title, source = "site" }) => {
|
||||
const response = await apiClient.post<{
|
||||
message: string;
|
||||
data: Review[];
|
||||
}>(`/products/${productId}/reviews`, { rating, title, source });
|
||||
return response.data;
|
||||
},
|
||||
(variables) => [
|
||||
reviewKeys.byProduct(variables.productId),
|
||||
productKeys.bySlug(""),
|
||||
reviewKeys.all,
|
||||
]
|
||||
);
|
||||
}
|
||||
|
||||
export function useUpdateReview() {
|
||||
return useReviewMutation<ReviewUpdate>(
|
||||
async ({ reviewId, rating, title, source }) => {
|
||||
const response = await apiClient.put<Review>(
|
||||
`/reviews/${reviewId}`,
|
||||
{ rating, title, source },
|
||||
{ headers: { "Content-Type": "application/json" } }
|
||||
);
|
||||
return response.data;
|
||||
},
|
||||
(variables) => [reviewKeys.detail(variables.reviewId), reviewKeys.all]
|
||||
);
|
||||
}
|
||||
|
||||
export function useDeleteReview() {
|
||||
return useReviewMutation<number | string>(
|
||||
(reviewId) =>
|
||||
apiClient.delete(`/reviews/${reviewId}`).then((res) => res.data),
|
||||
(reviewId) => [reviewKeys.detail(reviewId), reviewKeys.all]
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user