From 71ca9d6c85871b6bcb2976ed4911032aab4d32e7 Mon Sep 17 00:00:00 2001
From: trisusilo48 <tri.susilo@altama.co.id>
Date: Thu, 24 Apr 2025 13:53:32 +0700
Subject: fixing revisi renca

---
 .../product-detail/components/Information.tsx      | 25 +++++++++++++++-------
 .../product-detail/components/ProductDetail.tsx    |  1 +
 .../modules/product-detail/hook/useVariant.ts      | 18 ++++++++++++++++
 3 files changed, 36 insertions(+), 8 deletions(-)
 create mode 100644 src-migrate/modules/product-detail/hook/useVariant.ts

(limited to 'src-migrate')

diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx
index 5e1ea186..d1f1e852 100644
--- a/src-migrate/modules/product-detail/components/Information.tsx
+++ b/src-migrate/modules/product-detail/components/Information.tsx
@@ -11,7 +11,7 @@ import Link from 'next/link';
 import { useEffect, useRef, useState } from 'react';
 
 import currencyFormat from '@/core/utils/currencyFormat';
-import { InputGroup, InputRightElement } from '@chakra-ui/react';
+import { InputGroup, InputRightElement, Spinner } from '@chakra-ui/react';
 import { ChevronDownIcon } from '@heroicons/react/24/outline';
 import Image from 'next/image';
 import { formatToShortText } from '~/libs/formatNumber';
@@ -19,6 +19,7 @@ import { createSlug } from '~/libs/slug';
 import { getVariantSLA } from '~/services/productVariant';
 import { IProductDetail } from '~/types/product';
 import { useProductDetail } from '../stores/useProductDetail';
+import useVariant from '../hook/useVariant';
 
 const Skeleton = dynamic(() =>
   import('@chakra-ui/react').then((mod) => mod.Skeleton)
@@ -41,6 +42,9 @@ const Information = ({ product }: Props) => {
   const [variantOptions, setVariantOptions] = useState<any[]>(
     product?.variants
   );
+  const variantId = selectedVariant?.id;
+  const { slaVariant, isLoading } = useVariant({ variantId });
+
   // let variantOptions = product?.variants;
 
   // const querySLA = useQuery<IProductVariantSLA>({
@@ -50,14 +54,8 @@ const Information = ({ product }: Props) => {
   // });
   // const sla = querySLA?.data;
 
-  const getsla = async () => {
-    const querySLA = await getVariantSLA(selectedVariant?.id);
-    setSla(querySLA);
-  };
-
   useEffect(() => {
     if (selectedVariant) {
-      getsla();
       setInputValue(
         selectedVariant?.code +
           (selectedVariant?.attributes[0]
@@ -67,6 +65,12 @@ const Information = ({ product }: Props) => {
     }
   }, [selectedVariant]);
 
+  useEffect(() => {
+    if (slaVariant) {
+      setSla(slaVariant);
+    }
+  }, [slaVariant]);
+
   const handleOnChange = (vals: any) => {
     setDisableFilter(true);
     let code = vals.replace(/\s-\s.*$/, '').trim();
@@ -223,7 +227,12 @@ const Information = ({ product }: Props) => {
       </div>
       <div className={style['row']}>
         <div className={style['label']}>Persiapan Barang</div>
-        <div className={style['value']}>{sla?.sla_date}</div>
+        {isLoading && (
+          <div className={style['value']}>
+            <Skeleton height={5} width={100} />
+          </div>
+        )}
+        {!isLoading && <div className={style['value']}>{sla?.sla_date}</div>}
       </div>
     </div>
   );
diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx
index 4667e086..1581f33d 100644
--- a/src-migrate/modules/product-detail/components/ProductDetail.tsx
+++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx
@@ -42,6 +42,7 @@ const ProductDetail = ({ product }: Props) => {
     setIsApproval,
     isApproval,
     setSelectedVariant,
+    setSla,
   } = useProductDetail();
 
   useEffect(() => {
diff --git a/src-migrate/modules/product-detail/hook/useVariant.ts b/src-migrate/modules/product-detail/hook/useVariant.ts
new file mode 100644
index 00000000..18451f7e
--- /dev/null
+++ b/src-migrate/modules/product-detail/hook/useVariant.ts
@@ -0,0 +1,18 @@
+import { useQuery } from "react-query"
+import { number } from "zod"
+import { getVariantById, getVariantSLA } from "~/services/productVariant"
+
+interface Props  {
+    variantId : number
+}
+const useVariant = ({variantId}:Props)  => {
+    const fetchVariant = async () => await getVariantSLA(variantId )
+    const {data, isLoading, refetch} = useQuery(variantId ? `variant-${variantId}` : '', fetchVariant,
+        {
+          enabled: !!variantId, 
+        })
+
+    return {slaVariant: data, isLoading, refetch}
+}
+
+export default useVariant
\ No newline at end of file
-- 
cgit v1.2.3