1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
import { Skeleton } from '@chakra-ui/react'
import { useQuery } from 'react-query'
import ProductSlider from '~/modules/product-slider'
import { getProductSimilar, getProductsByIds } from '~/services/product'
import { IProductDetail } from '~/types/product'
type Props = {
product: IProductDetail;
upsellIds?: number[];
}
const SimilarBottom = ({ product, upsellIds = [] }: Props) => {
const hasUpsell = upsellIds.length > 0;
// Query 1: Upsell
const upsellQuery = useQuery({
queryKey: ['product-upsell', upsellIds],
queryFn: () => getProductsByIds({ ids: upsellIds }),
enabled: hasUpsell,
staleTime: 1000 * 60 * 5,
});
// Query 2: Similar Biasa
const similarQuery = useQuery({
queryKey: ['product-similar', product.name],
queryFn: () => getProductSimilar({
name: product.name,
except: { productId: product.id }
}),
enabled: !hasUpsell,
staleTime: 1000 * 60 * 5,
});
let products = [];
let isLoading = false;
// ==========================================
// PERBAIKAN DI SINI
// ==========================================
if (hasUpsell) {
// Salah: products = upsellQuery.data || [];
// Benar: Ambil properti .products di dalamnya
products = (upsellQuery.data as any)?.products || [];
isLoading = upsellQuery.isLoading;
} else {
products = similarQuery.data?.products || [];
isLoading = similarQuery.isLoading;
}
if (!isLoading && products.length === 0) return null;
return (
<Skeleton
isLoaded={!isLoading}
rounded='lg'
className='h-[350px]'
>
<ProductSlider products={products} productLayout='vertical' />
</Skeleton>
);
}
export default SimilarBottom;
|
