cache localstorage

1 files changed, 29 insertions, 5 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}