Merged in iman/flashsaleNonDisplay (pull request #345)

Iman/flashsaleNonDisplay

Approved-by: trisusilo

2 files changed, 60 insertions, 36 deletions

diff --git a/src-migrate/modules/promo/components/FlashSaleNonDisplay.tsx b/src-migrate/modules/promo/components/FlashSaleNonDisplay.tsx
new file mode 100644
index 00000000..5685b83a
--- /dev/null
+++ b/src-migrate/modules/promo/components/FlashSaleNonDisplay.tsx
@@ -0,0 +1,17 @@
+import dynamic from 'next/dynamic';
+import React from 'react';
+import { FlashSaleSkeleton } from '@/lib/flashSale/skeleton/FlashSaleSkeleton';
+const FlashSaleNonDisplay = dynamic(
+  () => import('@/lib/flashSale/components/FlashSaleNonDisplay'),
+  {
+    loading: () => <FlashSaleSkeleton />,
+  }
+);
+const FlashSalePromo = () => {
+  return (
+    <>
+      <FlashSaleNonDisplay />
+    </>
+  );
+};
+export default FlashSalePromo;
diff --git a/src-migrate/modules/promo/components/PromoList.tsx b/src-migrate/modules/promo/components/PromoList.tsx
index d59d1867..9f808718 100644
--- a/src-migrate/modules/promo/components/PromoList.tsx
+++ b/src-migrate/modules/promo/components/PromoList.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Skeleton } from '@chakra-ui/react'
-import clsxm from "~/libs/clsxm"
+import { Button, Skeleton } from '@chakra-ui/react';
+import clsxm from '~/libs/clsxm';
 import ProductPromoCard from '../../product-promo/components/Card';
 import { fetchPromoItemsSolr } from '../../../../src/api/promoApi';
 import { Swiper, SwiperSlide } from 'swiper/react';
@@ -8,7 +8,7 @@ import SwiperCore, { Navigation, Pagination } from 'swiper';
 import useDevice from '@/core/hooks/useDevice';
 import LogoSpinner from '../../../../src/core/components/elements/Spinner/LogoSpinner';
 import usePromoStore from './promoStore';
-import Link from "next/link"
+import Link from 'next/link';
 import { IPromotion } from '~/types/promotion';
 interface PromoListProps {
   selectedPromo: string; // Tipe selectedPromo ditetapkan sebagai string
@@ -32,11 +32,11 @@ const PromoList: React.FC<PromoListProps> = ({ selectedPromo }) => {
 
   const swiperBanner = {
     modules: [Navigation],
-    className: 'h-[400px] w-full',
+    className: 'h-full w-full',
     slidesPerView: isMobile ? 1.1 : 3.25,
     spaceBetween: 10,
-    navigation:isMobile? true : false,
-    allowTouchMove:isMobile? false : true,
+    navigation: isMobile ? true : false,
+    allowTouchMove: isMobile ? false : true,
   };
 
   useEffect(() => {
@@ -56,7 +56,7 @@ const PromoList: React.FC<PromoListProps> = ({ selectedPromo }) => {
     const fetchPromotions = async () => {
       setIsLoading(true);
       try {
-        const items = await fetchPromoItemsSolr(`type_value_s:${slug}`, 0, 10); 
+        const items = await fetchPromoItemsSolr(`type_value_s:${slug}`, 0, 10);
         setPromoItems(items);
 
         const promoDataPromises = items?.map(async (item) => {
@@ -69,9 +69,11 @@ const PromoList: React.FC<PromoListProps> = ({ selectedPromo }) => {
         });
 
         const promoDataArray = await Promise.all(promoDataPromises);
-        const mergedPromoData = promoDataArray?.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
+        const mergedPromoData = promoDataArray?.reduce(
+          (accumulator, currentValue) => accumulator.concat(currentValue),
+          []
+        );
         setPromoData(mergedPromoData);
-
       } catch (error) {
         console.error('Error fetching promo items:', error);
       } finally {
@@ -92,44 +94,49 @@ const PromoList: React.FC<PromoListProps> = ({ selectedPromo }) => {
       <div className='flex justify-between  items-center'>
         <h1 className='text-h-sm md:text-h-lg font-semibold py-4'>{title}</h1>
         <div>
-          <Link href={`/shop/promo/${slug}`} className='!text-red-500 font-semibold'>
+          <Link
+            href={`/shop/promo/${slug}`}
+            className='!text-red-500 font-semibold'
+          >
             Lihat Semua
           </Link>
         </div>
       </div>
       {isLoading ? (
-        <div className="loading-spinner flex justify-center">
+        <div className='loading-spinner flex justify-center'>
           <LogoSpinner width={48} height={48} />
         </div>
       ) : (
         <Skeleton
-        isLoaded={!isLoading}
-        className={clsxm(
-          "flex gap-x-4 overflow-x-auto px-4 md:px-0", {
-          "min-h-[340px]": promoData[0] && promoData?.length > 0
-        })}
-      >
-        {isDesktop && (
-                    <Swiper {...swiperBanner}>
-                      {promoData?.map((promotion: IPromotion) => (
-                      <SwiperSlide key={promotion.id}>
-                        <div className="min-w-36 max-w-[400px] mb-[20px] sm:w-full md:w-full lg:w-full xl:w-full">
-                          <ProductPromoCard product={promoItems} promotion={promotion} />
-                        </div>
-                      </SwiperSlide>
-                    ))}
-                  </Swiper>
-        )}
-        {isMobile && (promoData?.map((promotion: IPromotion) => (
-          <div key={promotion.id} className="min-w-[400px] max-w-[400px]">
-            <ProductPromoCard product={promoItems} promotion={promotion}  />
-          </div>
-        )))}
-        
-      </Skeleton>
+          isLoaded={!isLoading}
+          className={clsxm('flex gap-x-4 overflow-x-auto px-4 md:px-0', {
+            'min-h-[340px]': promoData[0] && promoData?.length > 0,
+          })}
+        >
+          {isDesktop && (
+            <Swiper {...swiperBanner}>
+              {promoData?.map((promotion: IPromotion) => (
+                <SwiperSlide key={promotion.id}>
+                  <div className='min-w-36 max-w-[400px] mb-[20px] sm:w-full md:w-full lg:w-full xl:w-full'>
+                    <ProductPromoCard
+                      product={promoItems}
+                      promotion={promotion}
+                    />
+                  </div>
+                </SwiperSlide>
+              ))}
+            </Swiper>
+          )}
+          {isMobile &&
+            promoData?.map((promotion: IPromotion) => (
+              <div key={promotion.id} className='min-w-[400px] max-w-[400px]'>
+                <ProductPromoCard product={promoItems} promotion={promotion} />
+              </div>
+            ))}
+        </Skeleton>
       )}
     </div>
   );
 };
 
-export default PromoList;
\ No newline at end of file
+export default PromoList;