1 files changed, 63 insertions, 24 deletions
diff --git a/src/lib/home/components/PromotionProgram.jsx b/src/lib/home/components/PromotionProgram.jsx
index ae06bd4d..562fa138 100644
--- a/src/lib/home/components/PromotionProgram.jsx
+++ b/src/lib/home/components/PromotionProgram.jsx
@@ -4,15 +4,56 @@ import { bannerApi } from '@/api/bannerApi';
 import useDevice from '@/core/hooks/useDevice';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import BannerPromoSkeleton from '../components/Skeleton/BannerPromoSkeleton';
+import { useEffect, useState } from 'react';
 const { useQuery } = require('react-query');
 const BannerSection = () => {
-  const promotionProgram = useQuery(
-    'promotionProgram',
-    bannerApi({ type: 'banner-promotion' })
-  );
   const { isMobile, isDesktop } = useDevice();
+  const [data, setData] = useState(null);
+  const [shouldFetch, setShouldFetch] = useState(false);
+  useEffect(() => {
+    const fetchData = async () => {
+      const res = await fetch(`/api/hero-banner?type=banner-promotion`);
+      const { data } = await res.json();
+      if (data) {
+        setData(data);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  // useEffect(() => {
+  //   const localData = localStorage.getItem('Homepage_promotionProgram');
+  //   if (localData) {
+  //     setData(JSON.parse(localData));
+  //   } else {
+  //     setShouldFetch(true);
+  //   }
+  // }, []);
+
+  // const getPromotionProgram = useQuery(
+  //   'promotionProgram',
+  //   bannerApi({ type: 'banner-promotion' }),
+  //   {
+  //     enabled: shouldFetch,
+  //     onSuccess: (data) => {
+  //       if (data) {
+  //         localStorage.setItem(
+  //           'Homepage_promotionProgram',
+  //           JSON.stringify(data)
+  //         );
+  //         setData(data);
+  //       }
+  //     },
+  //   }
+  // );
+
+  const promotionProgram = data;
 
-  if (promotionProgram.isLoading) {
+  // if (getPromotionProgram?.isLoading && !data) {
+  //   return <BannerPromoSkeleton />;
+  // }
+  if (!data) {
     return <BannerPromoSkeleton />;
   }
 
@@ -39,28 +80,26 @@ const BannerSection = () => {
           </Link>
         )}
       </div>
-      {isDesktop &&
-        promotionProgram.data &&
-        promotionProgram.data?.length > 0 && (
-          <div className='grid grid-cols-3 sm:grid-cols-3 gap-4   rounded-md'>
-            {promotionProgram.data?.map((banner) => (
-              <Link key={banner.id} href={banner.url}>
-                <Image
-                  width={439}
-                  height={150}
-                  quality={85}
-                  src={banner.image}
-                  alt={banner.name}
-                  className='h-auto  w-full rounded hover:scale-105 transition duration-500 ease-in-out'
-                />
-              </Link>
-            ))}
-          </div>
-        )}
+      {isDesktop && promotionProgram && promotionProgram?.length > 0 && (
+        <div className='grid grid-cols-3 sm:grid-cols-3 gap-4   rounded-md'>
+          {promotionProgram?.map((banner) => (
+            <Link key={banner.id} href={banner.url}>
+              <Image
+                width={439}
+                height={150}
+                quality={85}
+                src={banner.image}
+                alt={banner.name}
+                className='h-auto  w-full rounded hover:scale-105 transition duration-500 ease-in-out'
+              />
+            </Link>
+          ))}
+        </div>
+      )}
 
       {isMobile && (
         <Swiper slidesPerView={1.1} spaceBetween={8} freeMode>
-          {promotionProgram.data?.map((banner) => (
+          {promotionProgram?.map((banner) => (
             <SwiperSlide key={banner.id}>
               <Link key={banner.id} href={banner.url}>
                 <Image