Add lazy load on stock product

3 files changed, 101 insertions, 108 deletions

diff --git a/src/lib/product/components/Product/ColumnsSLA.jsx b/src/lib/product/components/Product/ColumnsSLA.jsx
new file mode 100644
index 00000000..33da703a
--- /dev/null
+++ b/src/lib/product/components/Product/ColumnsSLA.jsx
@@ -0,0 +1,81 @@
+import odooApi from '@/core/api/odooApi'
+import { createSlug } from '@/core/utils/slug'
+import whatsappUrl from '@/core/utils/whatsappUrl'
+import { Button, Spinner } from 'flowbite-react'
+import { memo, useEffect, useState } from 'react'
+import { useQuery } from 'react-query'
+
+const ColumnSLA = ({ variant, product }) => {
+  const fetchSLA = async () => await odooApi('GET', `/api/v1/product_variant/${variant.id}/stock`)
+  const dataSLA = useQuery(`VariantSLA-${variant.id}`, fetchSLA, { refetchOnWindowFocus: false })
+
+  return (
+    <>
+      <td>
+        {dataSLA.isFetching ? (
+          <div className='text-center'>
+            <Spinner aria-label='Center-aligned spinner example' />
+          </div>
+        ) : dataSLA?.data?.qty > 0 ? (
+          dataSLA?.data?.qty
+        ) : (
+          <a
+            href={whatsappUrl('product', {
+              name: variant.name,
+              manufacture: product.manufacture?.name,
+              url: createSlug('/shop/product/', product.name, product.id, true)
+            })}
+            className='text-danger-500 font-medium'
+            target='_blank'
+            rel='noreferrer noopener'
+          >
+            Tanya Admin
+          </a>
+        )}
+      </td>
+      <td className='flex justify-center'>
+        {dataSLA.isFetching ? (
+          <Button color='gray'>
+            <Spinner aria-label='Alternate spinner button example' />
+            <span className='pl-3'>Loading...</span>
+          </Button>
+        ) : dataSLA?.data?.slaDate != '-' ? (
+          <button
+            type='button'
+            title={`Masa Persiapan Barang ${dataSLA?.data?.slaDate}`}
+            className={`flex gap-x-1 items-center p-2 rounded-lg w-full ${
+              dataSLA?.data?.slaDate === 'indent' ? 'bg-indigo-900' : 'btn-light'
+            }`}
+          >
+            <div
+              className={`flex-1 text-caption-1  ${
+                dataSLA?.data?.slaDate === 'indent' ? 'text-white' : ''
+              }`}
+            >
+              {dataSLA?.data?.slaDate}
+            </div>
+            <div className='flex-end'>
+              <svg
+                aria-hidden='true'
+                fill='none'
+                stroke='currentColor'
+                stroke-width='1.5'
+                className={`w-7 h-7 ${dataSLA?.data?.slaDate === 'indent' ? 'text-white' : ''}`}
+              >
+                <path
+                  d='M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z'
+                  stroke-linecap='round'
+                  stroke-linejoin='round'
+                ></path>
+              </svg>
+            </div>
+          </button>
+        ) : (
+          '-'
+        )}
+      </td>
+    </>
+  )
+}
+
+export default memo(ColumnSLA)
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 2ea08ea7..937f2746 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -20,7 +20,8 @@ import PromotionType from '@/lib/promotinProgram/components/PromotionType'
 import useAuth from '@/core/hooks/useAuth'
 import ImageNext from 'next/image'
 import CountDown2 from '@/core/components/elements/CountDown/CountDown2'
-import CountDown from '@/core/components/elements/CountDown/CountDown'
+import { LazyLoadComponent } from 'react-lazy-load-image-component'
+import ColumnsSLA from './ColumnsSLA'
 
 const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
   const router = useRouter()
@@ -184,7 +185,7 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
 
       setIsLoadingSLA(false)
     }
-    fetchData()
+    if (product.variantTotal == 1) fetchData()
   }, [product])
 
   return (
@@ -568,71 +569,9 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
                         {variant.code}
                       </td>
                       <td>{variant.attributes.join(', ') || '-'}</td>
-                      <td>
-                        {isLoadingSLA ? (
-                          <div className='text-center'>
-                            <Spinner aria-label='Center-aligned spinner example' />
-                          </div>
-                        ) : variant?.sla?.qty > 0 ? (
-                          variant?.sla?.qty
-                        ) : (
-                          <a
-                            href={whatsappUrl('product', {
-                              name: variant.name,
-                              manufacture: product.manufacture?.name,
-                              url: createSlug('/shop/product/', product.name, product.id, true)
-                            })}
-                            className='text-danger-500 font-medium'
-                            target='_blank'
-                            rel='noreferrer noopener'
-                          >
-                            Tanya Admin
-                          </a>
-                        )}
-                      </td>
-                      <td className='flex justify-center'>
-                        {isLoadingSLA ? (
-                          <Button color='gray'>
-                            <Spinner aria-label='Alternate spinner button example' />
-                            <span className='pl-3'>Loading...</span>
-                          </Button>
-                        ) : variant?.sla?.slaDate != '-' ? (
-                          <button
-                            type='button'
-                            title={`Masa Persiapan Barang ${variant?.sla?.slaDate}`}
-                            className={`flex gap-x-1 items-center p-2 rounded-lg w-full ${
-                              variant?.sla?.slaDate === 'indent' ? 'bg-indigo-900' : 'btn-light'
-                            }`}
-                          >
-                            <div
-                              className={`flex-1 text-caption-1  ${
-                                variant?.sla?.slaDate === 'indent' ? 'text-white' : ''
-                              }`}
-                            >
-                              {variant?.sla?.slaDate}
-                            </div>
-                            <div className='flex-end'>
-                              <svg
-                                aria-hidden='true'
-                                fill='none'
-                                stroke='currentColor'
-                                stroke-width='1.5'
-                                className={`w-7 h-7 ${
-                                  variant?.sla?.slaDate === 'indent' ? 'text-white' : ''
-                                }`}
-                              >
-                                <path
-                                  d='M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z'
-                                  stroke-linecap='round'
-                                  stroke-linejoin='round'
-                                ></path>
-                              </svg>
-                            </div>
-                          </button>
-                        ) : (
-                          '-'
-                        )}
-                      </td>
+                      <LazyLoadComponent>
+                        <ColumnsSLA variant={variant} product={product} />
+                      </LazyLoadComponent>
                       <td>
                         {variant.price.discountPercentage > 0 &&
                           variant.price.priceDiscount > 0 && (
diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx
index 9c0630a6..6b0b27a5 100644
--- a/src/lib/product/components/Product/ProductMobile.jsx
+++ b/src/lib/product/components/Product/ProductMobile.jsx
@@ -83,35 +83,6 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
   })
 
   useEffect(() => {
-    const fetchData = async () => {
-      const promises = product.variants.map(async (variant) => {
-        const dataSLA = await odooApi('GET', `/api/v1/product_variant/${variant.id}/stock`)
-        return {
-          ...variant,
-          sla: dataSLA
-        }
-      })
-      const variantData = await Promise.all(promises)
-      product.variants = variantData
-
-      setIsLoadingSLA(false)
-      if (product.variants.length === 1) {
-        setActiveVariant({
-          id: product.variants[0].id,
-          code: product.variants[0].code,
-          name: product.variants[0].parent.name,
-          price: product.variants[0].price,
-          stock: product.variants[0].stock,
-          weight: product.variants[0].weight,
-          sla: product.variants[0].sla,
-          hasProgram: product.variants[0].hasProgram
-        })
-      }
-    }
-    fetchData()
-  }, [product])
-
-  useEffect(() => {
     if (!selectedVariant && variantOptions.length == 1) {
       setSelectedVariant(variantOptions[0])
     }
@@ -123,16 +94,23 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
       const variantAttributes =
         variant.attributes.length > 0 ? ' - ' + variant.attributes.join(', ') : ''
 
-      setActiveVariant({
+      const newActiveVariant = {
         id: variant.id,
         code: variant.code,
         name: variant.parent.name + variantAttributes,
         price: variant.price,
         stock: variant.stock,
         weight: variant.weight,
-        sla: variant.sla,
         hasProgram: variant.hasProgram
-      })
+      }
+
+      setActiveVariant(newActiveVariant)
+
+      const fetchSLA = async () => {
+        const dataSLA = await odooApi('GET', `/api/v1/product_variant/${variant.id}/stock`)
+        setActiveVariant({ ...newActiveVariant, sla: dataSLA })
+      }
+      fetchSLA()
     }
   }, [selectedVariant, product])
 
@@ -355,12 +333,7 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
         >
           <SpecificationContent label='Ketersediaan'>
             <span>
-              {isLoadingSLA ? (
-                <Button color='gray'>
-                  <Spinner aria-label='Alternate spinner button example' />
-                  <span className='pl-3'>Loading...</span>
-                </Button>
-              ) : selectedVariant ? (
+              {selectedVariant ? (
                 activeVariant?.sla?.slaDate != '-' ? (
                   <button
                     type='button'
@@ -412,13 +385,13 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
             <span>{activeVariant?.code || '-'}</span>
           </SpecificationContent>
           <SpecificationContent label='Stok'>
-            {activeVariant?.stock > 0 && (
+            {activeVariant?.sla?.qty > 0 && (
               <span className='flex gap-x-1.5'>
                 <div className='badge-solid-red'>Ready Stock</div>
-                <div className='badge-gray'>{activeVariant?.stock > 5 ? '> 5' : '< 5'}</div>
+                <div className='badge-gray'>{activeVariant?.sla?.qty}</div>
               </span>
             )}
-            {activeVariant?.stock == 0 && (
+            {activeVariant?.sla?.qty == 0 && (
               <a
                 href={whatsappUrl('product', {
                   name: product.name,