From 8bb683d2c695f0df292f6a7965efcbf3abd72a3d Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Wed, 13 Sep 2023 11:04:52 +0700 Subject: Add lazy load on stock product --- src/lib/category/components/Category.jsx | 2 +- src/lib/product/components/Product/ColumnsSLA.jsx | 81 ++++++++++++++++++++++ .../product/components/Product/ProductDesktop.jsx | 73 ++----------------- .../product/components/Product/ProductMobile.jsx | 55 ++++----------- 4 files changed, 102 insertions(+), 109 deletions(-) create mode 100644 src/lib/product/components/Product/ColumnsSLA.jsx (limited to 'src/lib') diff --git a/src/lib/category/components/Category.jsx b/src/lib/category/components/Category.jsx index 884a871f..af696d42 100644 --- a/src/lib/category/components/Category.jsx +++ b/src/lib/category/components/Category.jsx @@ -10,7 +10,7 @@ const Category = () => { useEffect(() => { const loadCategories = async () => { let dataCategories = await odooApi('GET', '/api/v1/category/tree') - dataCategories = dataCategories.map((category) => { + dataCategories = dataCategories?.map((category) => { category.childs = category.childs.map((child1Category) => { return { ...child1Category, 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 ( + <> + + {dataSLA.isFetching ? ( +
+ +
+ ) : dataSLA?.data?.qty > 0 ? ( + dataSLA?.data?.qty + ) : ( + + Tanya Admin + + )} + + + {dataSLA.isFetching ? ( + + ) : dataSLA?.data?.slaDate != '-' ? ( + + ) : ( + '-' + )} + + + ) +} + +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} {variant.attributes.join(', ') || '-'} - - {isLoadingSLA ? ( -
- -
- ) : variant?.sla?.qty > 0 ? ( - variant?.sla?.qty - ) : ( - - Tanya Admin - - )} - - - {isLoadingSLA ? ( - - ) : variant?.sla?.slaDate != '-' ? ( - - ) : ( - '-' - )} - + + + {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 @@ -82,35 +82,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 }) => { > - {isLoadingSLA ? ( - - ) : selectedVariant ? ( + {selectedVariant ? ( activeVariant?.sla?.slaDate != '-' ? (