<iman> update category management fetch data

2 files changed, 56 insertions, 89 deletions

diff --git a/src/lib/home/components/CategoryDynamic.jsx b/src/lib/home/components/CategoryDynamic.jsx
index 596b18f2..e62575f7 100644
--- a/src/lib/home/components/CategoryDynamic.jsx
+++ b/src/lib/home/components/CategoryDynamic.jsx
@@ -13,12 +13,12 @@ import 'swiper/css/navigation';
 import 'swiper/css/pagination';
 import { Pagination } from 'swiper';
 
-const saveToLocalStorage = (key, data, version, expiryInHours) => {
+const saveToLocalStorage = (key, data, version) => {
   const now = new Date();
   const item = {
     value: data,
     version: version,
-    expiry: now.getTime() + expiryInHours * 60 * 60 * 1000,
+    lastFetchedTime: now.getTime(),
   };
   localStorage.setItem(key, JSON.stringify(item));
 };
@@ -31,9 +31,9 @@ const getFromLocalStorage = (key) => {
   return item;
 };
 
-const isExpired = (expiry) => {
+const getElapsedTime = (lastFetchedTime) => {
   const now = new Date();
-  return now.getTime() > expiry;
+  return now.getTime() - lastFetchedTime;
 };
 
 const CategoryDynamic = () => {
@@ -41,47 +41,39 @@ const CategoryDynamic = () => {
   const [isLoading, setIsLoading] = useState(false);
 
   const loadBrand = useCallback(async () => {
-    const cachedData = getFromLocalStorage('homepage_categoryDynamic'); // nama key namaPage_namaKomopnen
+    const cachedData = getFromLocalStorage('homepage_categoryDynamic');
 
-    // apakah data sudah kadaluarsa
-    const dataExpired = cachedData ? isExpired(cachedData.expiry) : true;
+    if (cachedData) {
+      // Hitung selisih waktu antara saat ini dengan waktu terakhir data di-fetch
+      const elapsedTime = getElapsedTime(cachedData.lastFetchedTime);
 
-    // Jika belum kadaluarsa, pakai data dari localStorage
-    if (cachedData && !dataExpired) {
+      if (elapsedTime < 24 * 60 * 60 * 1000) {
+        setCategoryManagement(cachedData.value);
+        return;
+      }
+    }
+
+    const latestVersion = await fetchCategoryManagementVersion();
+    if (cachedData && cachedData.version === latestVersion) {
+      // perbarui waktu
+      saveToLocalStorage(
+        'homepage_categoryDynamic',
+        cachedData.value,
+        latestVersion
+      );
       setCategoryManagement(cachedData.value);
     } else {
-      // Jika kadaluarsa, cek versi terbaru dari API
-      const latestVersion = await fetchCategoryManagementVersion();
+      setIsLoading(true);
+      const items = await fetchCategoryManagementSolr();
+      setIsLoading(false);
 
-      if (cachedData && cachedData.version === latestVersion) {
-        // Jika versinya sama, reset expiry
-        saveToLocalStorage(
-          'homepage_categoryDynamic',
-          cachedData.value,
-          latestVersion,
-          24
-        );
-        setCategoryManagement(cachedData.value);
-      } else {
-        // Jika versinya beda, lakukan fetch data baru
-        setIsLoading(true);
-        const items = await fetchCategoryManagementSolr();
-        setIsLoading(false);
-
-        // Simpan data baru
-        saveToLocalStorage(
-          'homepage_categoryDynamic',
-          items,
-          latestVersion,
-          24
-        );
-        setCategoryManagement(items);
-      }
+      saveToLocalStorage('homepage_categoryDynamic', items, latestVersion);
+      setCategoryManagement(items);
     }
   }, []);
 
   useEffect(() => {
-    loadBrand(); // Load data saat komponen pertama kali dimuat
+    loadBrand();
   }, [loadBrand]);
 
   const swiperBanner = {
@@ -99,7 +91,6 @@ const CategoryDynamic = () => {
     <div>
       {categoryManagement &&
         categoryManagement?.map((category) => {
-          // const countLevel1 = categoryData[category.categoryIdI] || 0;
           return (
             <Skeleton key={category.id} isLoaded={!isLoading}>
               <div key={category.id}>
@@ -107,9 +98,6 @@ const CategoryDynamic = () => {
                   <h1 className='font-semibold text-[14px] sm:text-h-lg mr-2'>
                     {category.name}
                   </h1>
-                  {/* <Skeleton isLoaded={countLevel1 != 0}>
-                    <p className={`text-gray_r-10 text-sm`}>{countLevel1} Produk tersedia</p>
-                  </Skeleton> */}
                   <Link
                     href={createSlug(
                       '/shop/category/',
@@ -125,8 +113,6 @@ const CategoryDynamic = () => {
                 {/* Swiper for SubCategories */}
                 <Swiper {...swiperBanner}>
                   {category.categories.map((subCategory) => {
-                    // const countLevel2 = subCategoryData[subCategory.idLevel2] || 0;
-
                     return (
                       <SwiperSlide key={subCategory.id}>
                         <div className='border rounded justify-start items-start '>
@@ -147,11 +133,6 @@ const CategoryDynamic = () => {
                                 <h2 className='font-semibold text-lg mr-2'>
                                   {subCategory?.name}
                                 </h2>
-                                {/* <Skeleton isLoaded={countLevel2 != 0}>
-                                  <p className={`text-gray_r-10 text-sm`}>
-                                    {countLevel2} Produk tersedia
-                                  </p>
-                                </Skeleton> */}
                                 <Link
                                   href={createSlug(
                                     '/shop/category/',
diff --git a/src/lib/home/components/CategoryDynamicMobile.jsx b/src/lib/home/components/CategoryDynamicMobile.jsx
index 075e9444..55654b0e 100644
--- a/src/lib/home/components/CategoryDynamicMobile.jsx
+++ b/src/lib/home/components/CategoryDynamicMobile.jsx
@@ -9,12 +9,12 @@ import {
   fetchCategoryManagementVersion,
 } from '../api/categoryManagementApi';
 
-const saveToLocalStorage = (key, data, version, expiryInHours) => {
+const saveToLocalStorage = (key, data, version) => {
   const now = new Date();
   const item = {
     value: data,
     version: version,
-    expiry: now.getTime() + expiryInHours * 60 * 60 * 1000,
+    lastFetchedTime: now.getTime(),
   };
   localStorage.setItem(key, JSON.stringify(item));
 };
@@ -24,19 +24,12 @@ const getFromLocalStorage = (key) => {
   if (!itemStr) return null;
 
   const item = JSON.parse(itemStr);
-  const now = new Date();
-
-  if (now.getTime() > item.expiry) {
-    localStorage.removeItem(key);
-    return null;
-  }
-
   return item;
 };
 
-const isExpired = (expiry) => {
+const getElapsedTime = (lastFetchedTime) => {
   const now = new Date();
-  return now.getTime() > expiry;
+  return now.getTime() - lastFetchedTime;
 };
 
 const CategoryDynamicMobile = () => {
@@ -45,42 +38,35 @@ const CategoryDynamicMobile = () => {
   const [isLoading, setIsLoading] = useState(false);
 
   const loadCategoryManagement = useCallback(async () => {
-    const cachedData = getFromLocalStorage('homepage_categoryDynamic'); // nama key namaPage_namaKomopnen
-    const cachedVersion = cachedData?.version;
-    // apakah data sudah kadaluarsa
-    const dataExpired = cachedData ? isExpired(cachedData.expiry) : true;
+    const cachedData = getFromLocalStorage('homepage_categoryDynamic');
 
-    if (cachedData && !dataExpired) {
-      setCategoryManagement(cachedData.value);
-    } else {
-      // Jika kadaluarsa, cek versi terbaru dari API
-      const latestVersion = await fetchCategoryManagementVersion();
+    if (cachedData) {
+      // Hitung selisih waktu antara saat ini dengan waktu terakhir data di-fetch
+      const elapsedTime = getElapsedTime(cachedData.lastFetchedTime);
 
-      if (cachedData && cachedData.version === latestVersion) {
-        // Jika versinya sama, reset expiry
-        saveToLocalStorage(
-          'homepage_categoryDynamic',
-          cachedData.value,
-          latestVersion,
-          24
-        );
+      if (elapsedTime < 24 * 60 * 60 * 1000) {
         setCategoryManagement(cachedData.value);
-      } else {
-        // Jika versinya beda, lakukan fetch data baru
-        setIsLoading(true);
-        const items = await fetchCategoryManagementSolr();
-        setIsLoading(false);
-
-        // Simpan data baru
-        saveToLocalStorage(
-          'homepage_categoryDynamic',
-          items,
-          latestVersion,
-          24
-        );
-        setCategoryManagement(items);
+        return;
       }
     }
+
+    const latestVersion = await fetchCategoryManagementVersion();
+    if (cachedData && cachedData.version === latestVersion) {
+      // perbarui waktu
+      saveToLocalStorage(
+        'homepage_categoryDynamic',
+        cachedData.value,
+        latestVersion
+      );
+      setCategoryManagement(cachedData.value);
+    } else {
+      setIsLoading(true);
+      const items = await fetchCategoryManagementSolr();
+      setIsLoading(false);
+
+      saveToLocalStorage('homepage_categoryDynamic', items, latestVersion);
+      setCategoryManagement(items);
+    }
   }, []);
 
   useEffect(() => {