Merged in CR/optimize_performance_2 (pull request #350)

cache localstorage

2 files changed, 60 insertions, 13 deletions

diff --git a/src/lib/home/components/BannerSection.jsx b/src/lib/home/components/BannerSection.jsx
index f83c36fc..60d38f8f 100644
--- a/src/lib/home/components/BannerSection.jsx
+++ b/src/lib/home/components/BannerSection.jsx
@@ -1,18 +1,42 @@
 import Link from '@/core/components/elements/Link/Link';
 import Image from 'next/image';
+import { useEffect, useState } from 'react';
+import { bannerApi } from '../../../api/bannerApi';
 
 const { useQuery } = require('react-query');
 const { default: bannerSectionApi } = require('../api/bannerSectionApi');
 
 const BannerSection = () => {
-  const fetchBannerSection = async () => await bannerSectionApi();
-  const bannerSection = useQuery('bannerSection', fetchBannerSection);
+  const [data, setData] = useState(null);
+  const [shouldFetch, setShouldFetch] = useState(false);
+
+  useEffect(() => {
+    const localData = localStorage.getItem('Homepage_bannerSection');
+    if (localData) {
+      setData(JSON.parse(localData));
+    }else{
+      setShouldFetch(true);
+    }
+  }, []);
+
+  // const fetchBannerSection = async () => await bannerSectionApi();
+  const getBannerSection = useQuery('bannerSection', bannerApi({ type: 'home-banner' }), {
+    enabled: shouldFetch,
+    onSuccess: (data) => {
+      if (data) {
+        localStorage.setItem('Homepage_bannerSection', JSON.stringify(data));
+        setData(data);
+      }
+    },
+  });
+
+  const bannerSection = data;
 
   return (
-    bannerSection.data &&
-    bannerSection.data?.length > 0 && (
+    bannerSection &&
+    bannerSection?.length > 0 && (
       <div className='grid grid-cols-1 sm:grid-cols-2 gap-4'>
-        {bannerSection.data?.map((banner) => (
+        {bannerSection?.map((banner) => (
           <Link key={banner.id} href={banner.url}>
             <Image
               width={1024}
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