From f09a72f90c049b5e1a8478f737062a24d9c7a3df Mon Sep 17 00:00:00 2001
From: trisusilo48 <tri.susilo@altama.co.id>
Date: Tue, 8 Oct 2024 14:56:00 +0700
Subject: cache localstorage

---
 src/lib/home/components/PromotionProgram.jsx | 39 ++++++++++++++++++++++------
 1 file changed, 31 insertions(+), 8 deletions(-)

(limited to 'src/lib/home/components/PromotionProgram.jsx')

diff --git a/src/lib/home/components/PromotionProgram.jsx b/src/lib/home/components/PromotionProgram.jsx
index ae06bd4d..7433e7f0 100644
--- a/src/lib/home/components/PromotionProgram.jsx
+++ b/src/lib/home/components/PromotionProgram.jsx
@@ -4,15 +4,38 @@ 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(
+  const { isMobile, isDesktop } = useDevice();
+  const [data, setData] = useState(null);
+  const [shouldFetch, setShouldFetch] = useState(false);
+
+  useEffect(() => {
+    const localData = localStorage.getItem('Homepage_promotionProgram');
+    if (localData) {
+      setData(JSON.parse(localData));
+    }else{
+      setShouldFetch(true);
+    }
+  },[])
+
+  const getPromotionProgram = useQuery(
     'promotionProgram',
-    bannerApi({ type: 'banner-promotion' })
+    bannerApi({ type: 'banner-promotion' }),{
+      enabled: shouldFetch,
+      onSuccess: (data) => {
+        if (data) {
+          localStorage.setItem('Homepage_promotionProgram', JSON.stringify(data));
+          setData(data);
+        }
+      }
+    }
   );
-  const { isMobile, isDesktop } = useDevice();
 
-  if (promotionProgram.isLoading) {
+  const promotionProgram = data
+
+  if (getPromotionProgram?.isLoading && !data) {
     return <BannerPromoSkeleton />;
   }
 
@@ -40,10 +63,10 @@ const BannerSection = () => {
         )}
       </div>
       {isDesktop &&
-        promotionProgram.data &&
-        promotionProgram.data?.length > 0 && (
+        promotionProgram &&
+        promotionProgram?.length > 0 && (
           <div className='grid grid-cols-3 sm:grid-cols-3 gap-4   rounded-md'>
-            {promotionProgram.data?.map((banner) => (
+            {promotionProgram?.map((banner) => (
               <Link key={banner.id} href={banner.url}>
                 <Image
                   width={439}
@@ -60,7 +83,7 @@ const BannerSection = () => {
 
       {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
-- 
cgit v1.2.3


From 4a5391def4c5d2e8991643287d40e3c3b53980be Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Tue, 5 Nov 2024 15:49:45 +0700
Subject: <iman> add redis

---
 src/lib/home/components/PromotionProgram.jsx | 96 ++++++++++++++++------------
 1 file changed, 56 insertions(+), 40 deletions(-)

(limited to 'src/lib/home/components/PromotionProgram.jsx')

diff --git a/src/lib/home/components/PromotionProgram.jsx b/src/lib/home/components/PromotionProgram.jsx
index 7433e7f0..562fa138 100644
--- a/src/lib/home/components/PromotionProgram.jsx
+++ b/src/lib/home/components/PromotionProgram.jsx
@@ -10,32 +10,50 @@ const BannerSection = () => {
   const { isMobile, isDesktop } = useDevice();
   const [data, setData] = useState(null);
   const [shouldFetch, setShouldFetch] = useState(false);
-
   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 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 promotionProgram = data
+  // const getPromotionProgram = useQuery(
+  //   'promotionProgram',
+  //   bannerApi({ type: 'banner-promotion' }),
+  //   {
+  //     enabled: shouldFetch,
+  //     onSuccess: (data) => {
+  //       if (data) {
+  //         localStorage.setItem(
+  //           'Homepage_promotionProgram',
+  //           JSON.stringify(data)
+  //         );
+  //         setData(data);
+  //       }
+  //     },
+  //   }
+  // );
 
-  if (getPromotionProgram?.isLoading && !data) {
+  const promotionProgram = data;
+
+  // if (getPromotionProgram?.isLoading && !data) {
+  //   return <BannerPromoSkeleton />;
+  // }
+  if (!data) {
     return <BannerPromoSkeleton />;
   }
 
@@ -62,24 +80,22 @@ const BannerSection = () => {
           </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>
-        )}
+      {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>
-- 
cgit v1.2.3