Merged in magento-v2.1 (pull request #472)

Magento v2.1

1 files changed, 58 insertions, 16 deletions

diff --git a/src-migrate/modules/product-detail/components/SimilarSide.tsx b/src-migrate/modules/product-detail/components/SimilarSide.tsx
index d70a314d..51d9eff7 100644
--- a/src-migrate/modules/product-detail/components/SimilarSide.tsx
+++ b/src-migrate/modules/product-detail/components/SimilarSide.tsx
@@ -1,33 +1,75 @@
 import { Skeleton } from '@chakra-ui/react'
+import { useQuery } from 'react-query'
 
 import ProductCard from '~/modules/product-card'
-import useProductSimilar from '~/modules/product-similar/hooks/useProductSimilar'
-import { IProductDetail } from '~/types/product'
+// Import service
+import { getProductSimilar, getProductsByIds } from '~/services/product'
+// TAMBAHKAN 'IProduct' DISINI
+import { IProduct, IProductDetail } from '~/types/product'
 
 type Props = {
   product: IProductDetail
+  relatedIds?: number[]
 }
 
-const SimilarSide = ({ product }: Props) => {
-  const productSimilar = useProductSimilar({
-    name: product.name,
-    except: { productId: product.id, manufactureId: product.manufacture.id },
-  })
+const SimilarSide = ({ product, relatedIds = [] }: Props) => {
+  
+  const hasRelated = relatedIds.length > 0;
 
-  const products = productSimilar.data?.products || []
+  // 1. Fetch Related by ID
+  const relatedQuery = useQuery({
+    queryKey: ['product-related', relatedIds],
+    queryFn: () => getProductsByIds({ ids: relatedIds }),
+    enabled: hasRelated, 
+    staleTime: 1000 * 60 * 5,
+  });
+
+  // 2. Fetch Similar Biasa
+  const similarQuery = useQuery({
+    queryKey: ['product-similar-side', product.name],
+    queryFn: () => getProductSimilar({ 
+        name: product.name, 
+        except: { 
+            productId: product.id, 
+            manufactureId: product.manufacture?.id 
+        } 
+    }),
+    enabled: !hasRelated, 
+    staleTime: 1000 * 60 * 5,
+  });
+
+  // ============================================================
+  // PERBAIKAN: Definisikan tipe array secara eksplisit (IProduct[])
+  // ============================================================
+  let products: IProduct[] = []; 
+  let isLoading = false;
+
+  if (hasRelated) {
+      // Cast ke any dulu jika tipe return service belum sempurna terdeteksi, lalu ambil products
+      // Atau jika getProductsByIds me-return { products: IProduct[] }, ambil .products
+      // Sesuai kode service terakhir, getProductsByIds me-return GetProductSimilarRes yg punya .products
+      products = (relatedQuery.data as any)?.products || [];
+      isLoading = relatedQuery.isLoading;
+  } else {
+      products = similarQuery.data?.products || [];
+      isLoading = similarQuery.isLoading;
+  }
+
+  if (!isLoading && products.length === 0) return null;
 
   return (
     <Skeleton
-      isLoaded={!productSimilar.isLoading}
-      className="h-[500px] overflow-auto grid grid-cols-1 gap-y-4 divide-y divide-gray-300 border border-gray-300 rounded-lg"
+      isLoaded={!isLoading}
+      className="h-[500px] overflow-auto grid grid-cols-1 gap-y-4 divide-y divide-gray-300 border border-gray-300 rounded-lg p-2"
       rounded='lg'
     >
-      {products.map((product) => (
-        <ProductCard
-          key={product.id}
-          product={product}
-          layout='horizontal'
-        />
+      {products.map((item) => (
+        <div key={item.id} className="pt-2 first:pt-0">
+            <ProductCard
+              product={item}
+              layout='horizontal'
+            />
+        </div>
       ))}
     </Skeleton>
   )