Merged in iman/update-categoryManagement (pull request #349)

Iman/update categoryManagement

Approved-by: trisusilo

3 files changed, 132 insertions, 72 deletions

diff --git a/src/lib/home/api/categoryManagementApi.js b/src/lib/home/api/categoryManagementApi.js
index 2ff4fdfc..4101f87a 100644
--- a/src/lib/home/api/categoryManagementApi.js
+++ b/src/lib/home/api/categoryManagementApi.js
@@ -42,3 +42,11 @@ const map = async (promotions) => {
     return productMapped;
   });
 };
+
+export const fetchCategoryManagementVersion = async () => {
+  const response = await fetch(
+    '/solr/admin/cores?action=STATUS&core=category_management'
+  );
+  const data = await response.json();
+  return data.status.category_management.index.version;
+};
diff --git a/src/lib/home/components/CategoryDynamic.jsx b/src/lib/home/components/CategoryDynamic.jsx
index 49a9a93f..e62575f7 100644
--- a/src/lib/home/components/CategoryDynamic.jsx
+++ b/src/lib/home/components/CategoryDynamic.jsx
@@ -1,5 +1,8 @@
 import React, { useEffect, useState, useCallback } from 'react';
-import { fetchCategoryManagementSolr } from '../api/categoryManagementApi';
+import {
+  fetchCategoryManagementSolr,
+  fetchCategoryManagementVersion,
+} from '../api/categoryManagementApi';
 import NextImage from 'next/image';
 import Link from 'next/link';
 import { createSlug } from '@/core/utils/slug';
@@ -10,48 +13,69 @@ import 'swiper/css/navigation';
 import 'swiper/css/pagination';
 import { Pagination } from 'swiper';
 
+const saveToLocalStorage = (key, data, version) => {
+  const now = new Date();
+  const item = {
+    value: data,
+    version: version,
+    lastFetchedTime: now.getTime(),
+  };
+  localStorage.setItem(key, JSON.stringify(item));
+};
+
+const getFromLocalStorage = (key) => {
+  const itemStr = localStorage.getItem(key);
+  if (!itemStr) return null;
+
+  const item = JSON.parse(itemStr);
+  return item;
+};
+
+const getElapsedTime = (lastFetchedTime) => {
+  const now = new Date();
+  return now.getTime() - lastFetchedTime;
+};
+
 const CategoryDynamic = () => {
   const [categoryManagement, setCategoryManagement] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
+
   const loadBrand = useCallback(async () => {
-    setIsLoading(true);
-    const items = await fetchCategoryManagementSolr();
+    const cachedData = getFromLocalStorage('homepage_categoryDynamic');
+
+    if (cachedData) {
+      // Hitung selisih waktu antara saat ini dengan waktu terakhir data di-fetch
+      const elapsedTime = getElapsedTime(cachedData.lastFetchedTime);
 
-    setIsLoading(false);
-    setCategoryManagement(items);
+      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 {
+      setIsLoading(true);
+      const items = await fetchCategoryManagementSolr();
+      setIsLoading(false);
+
+      saveToLocalStorage('homepage_categoryDynamic', items, latestVersion);
+      setCategoryManagement(items);
+    }
   }, []);
 
   useEffect(() => {
     loadBrand();
   }, [loadBrand]);
 
-  // const [categoryData, setCategoryData] = useState({});
-  // const [subCategoryData, setSubCategoryData] = useState({});
-
-  // useEffect(() => {
-  //   const fetchCategoryData = async () => {
-  //     if (categoryManagement && categoryManagement.data) {
-  //       const updatedCategoryData = {};
-  //       const updatedSubCategoryData = {};
-
-  //       for (const category of categoryManagement.data) {
-  //         const countLevel1 = await odooApi('GET', `/api/v1/category/numFound?parent_id=${category.categoryIdI}`);
-
-  //         updatedCategoryData[category.categoryIdI] = countLevel1?.numFound;
-
-  //         for (const subCategory of countLevel1?.children) {
-  //           updatedSubCategoryData[subCategory.id] = subCategory?.numFound;
-  //         }
-  //       }
-
-  //       setCategoryData(updatedCategoryData);
-  //       setSubCategoryData(updatedSubCategoryData);
-  //     }
-  //   };
-
-  //   fetchCategoryData();
-  // }, [categoryManagement.isLoading]);
-
   const swiperBanner = {
     modules: [Pagination],
     classNames: 'mySwiper',
@@ -67,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}>
@@ -75,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/',
@@ -93,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 '>
@@ -115,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 4a8f13cf..55654b0e 100644
--- a/src/lib/home/components/CategoryDynamicMobile.jsx
+++ b/src/lib/home/components/CategoryDynamicMobile.jsx
@@ -4,52 +4,91 @@ 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) => {
+  const now = new Date();
+  const item = {
+    value: data,
+    version: version,
+    lastFetchedTime: now.getTime(),
+  };
+  localStorage.setItem(key, JSON.stringify(item));
+};
+
+const getFromLocalStorage = (key) => {
+  const itemStr = localStorage.getItem(key);
+  if (!itemStr) return null;
+
+  const item = JSON.parse(itemStr);
+  return item;
+};
+
+const getElapsedTime = (lastFetchedTime) => {
+  const now = new Date();
+  return now.getTime() - lastFetchedTime;
+};
 
 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');
+
+    if (cachedData) {
+      // Hitung selisih waktu antara saat ini dengan waktu terakhir data di-fetch
+      const elapsedTime = getElapsedTime(cachedData.lastFetchedTime);
+
+      if (elapsedTime < 24 * 60 * 60 * 1000) {
+        setCategoryManagement(cachedData.value);
+        return;
+      }
+    }
 
-    setIsLoading(false);
-    setCategoryManagement(items);
+    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(() => {
-    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,
     }));
   };