<iman> update category management to storage on local

2 files changed, 90 insertions, 32 deletions

diff --git a/src/lib/home/components/CategoryDynamic.jsx b/src/lib/home/components/CategoryDynamic.jsx
index 412c6153..596b18f2 100644
--- a/src/lib/home/components/CategoryDynamic.jsx
+++ b/src/lib/home/components/CategoryDynamic.jsx
@@ -41,7 +41,7 @@ const CategoryDynamic = () => {
   const [isLoading, setIsLoading] = useState(false);
 
   const loadBrand = useCallback(async () => {
-    const cachedData = getFromLocalStorage('categoryManagementData');
+    const cachedData = getFromLocalStorage('homepage_categoryDynamic'); // nama key namaPage_namaKomopnen
 
     // apakah data sudah kadaluarsa
     const dataExpired = cachedData ? isExpired(cachedData.expiry) : true;
@@ -56,7 +56,7 @@ const CategoryDynamic = () => {
       if (cachedData && cachedData.version === latestVersion) {
         // Jika versinya sama, reset expiry
         saveToLocalStorage(
-          'categoryManagementData',
+          'homepage_categoryDynamic',
           cachedData.value,
           latestVersion,
           24
@@ -69,7 +69,12 @@ const CategoryDynamic = () => {
         setIsLoading(false);
 
         // Simpan data baru
-        saveToLocalStorage('categoryManagementData', items, latestVersion, 24);
+        saveToLocalStorage(
+          'homepage_categoryDynamic',
+          items,
+          latestVersion,
+          24
+        );
         setCategoryManagement(items);
       }
     }
diff --git a/src/lib/home/components/CategoryDynamicMobile.jsx b/src/lib/home/components/CategoryDynamicMobile.jsx
index 4a8f13cf..075e9444 100644
--- a/src/lib/home/components/CategoryDynamicMobile.jsx
+++ b/src/lib/home/components/CategoryDynamicMobile.jsx
@@ -4,52 +4,105 @@ import Link from 'next/link';
 import { createSlug } from '@/core/utils/slug';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import 'swiper/css';
-import { fetchCategoryManagementSolr } from '../api/categoryManagementApi';
+import {
+  fetchCategoryManagementSolr,
+  fetchCategoryManagementVersion,
+} from '../api/categoryManagementApi';
+
+const saveToLocalStorage = (key, data, version, expiryInHours) => {
+  const now = new Date();
+  const item = {
+    value: data,
+    version: version,
+    expiry: now.getTime() + expiryInHours * 60 * 60 * 1000,
+  };
+  localStorage.setItem(key, JSON.stringify(item));
+};
+
+const getFromLocalStorage = (key) => {
+  const itemStr = localStorage.getItem(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 now = new Date();
+  return now.getTime() > expiry;
+};
 
 const CategoryDynamicMobile = () => {
   const [selectedCategory, setSelectedCategory] = useState({});
   const [categoryManagement, setCategoryManagement] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
 
-  const loadBrand = useCallback(async () => {
-    setIsLoading(true);
-    const items = await fetchCategoryManagementSolr();
+  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;
+
+    if (cachedData && !dataExpired) {
+      setCategoryManagement(cachedData.value);
+    } else {
+      // Jika kadaluarsa, cek versi terbaru dari API
+      const latestVersion = await fetchCategoryManagementVersion();
+
+      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);
 
-    setIsLoading(false);
-    setCategoryManagement(items);
+        // Simpan data baru
+        saveToLocalStorage(
+          'homepage_categoryDynamic',
+          items,
+          latestVersion,
+          24
+        );
+        setCategoryManagement(items);
+      }
+    }
   }, []);
 
   useEffect(() => {
-    loadBrand();
-  }, [loadBrand]);
+    loadCategoryManagement();
+  }, [loadCategoryManagement]);
 
   useEffect(() => {
-    const loadPromo = async () => {
-      try {
-        if (categoryManagement?.length > 0) {
-          const initialSelections = categoryManagement.reduce(
-            (acc, category) => {
-              if (category.categories.length > 0) {
-                acc[category.id] = category.categories[0].id_level_2;
-              }
-              return acc;
-            },
-            {}
-          );
-          setSelectedCategory(initialSelections);
+    if (categoryManagement?.length > 0) {
+      const initialSelections = categoryManagement.reduce((acc, category) => {
+        if (category.categories.length > 0) {
+          acc[category.id] = category.categories[0].id_level_2;
         }
-      } catch (loadError) {
-        // console.error("Error loading promo items:", loadError);
-      }
-    };
-
-    loadPromo();
+        return acc;
+      }, {});
+      setSelectedCategory(initialSelections);
+    }
   }, [categoryManagement]);
 
-  const handleCategoryLevel2Click = (categoryIdI, idLevel2) => {
+  const handleCategoryLevel2Click = (categoryId, idLevel2) => {
     setSelectedCategory((prev) => ({
       ...prev,
-      [categoryIdI]: idLevel2,
+      [categoryId]: idLevel2,
     }));
   };