From e324ef760f1e8c6e523c79082e35f69ce16cee1d Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Tue, 8 Oct 2024 10:01:15 +0700
Subject: <iman> update category management to store data to local storage

---
 src/lib/home/components/CategoryDynamic.jsx | 93 +++++++++++++++++++----------
 1 file changed, 60 insertions(+), 33 deletions(-)

(limited to 'src/lib/home/components/CategoryDynamic.jsx')

diff --git a/src/lib/home/components/CategoryDynamic.jsx b/src/lib/home/components/CategoryDynamic.jsx
index 49a9a93f..412c6153 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,47 +13,71 @@ import 'swiper/css/navigation';
 import 'swiper/css/pagination';
 import { Pagination } from 'swiper';
 
-const CategoryDynamic = () => {
-  const [categoryManagement, setCategoryManagement] = useState([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const loadBrand = useCallback(async () => {
-    setIsLoading(true);
-    const items = await fetchCategoryManagementSolr();
+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));
+};
 
-    setIsLoading(false);
-    setCategoryManagement(items);
-  }, []);
+const getFromLocalStorage = (key) => {
+  const itemStr = localStorage.getItem(key);
+  if (!itemStr) return null;
 
-  useEffect(() => {
-    loadBrand();
-  }, [loadBrand]);
+  const item = JSON.parse(itemStr);
+  return item;
+};
 
-  // const [categoryData, setCategoryData] = useState({});
-  // const [subCategoryData, setSubCategoryData] = useState({});
+const isExpired = (expiry) => {
+  const now = new Date();
+  return now.getTime() > expiry;
+};
 
-  // useEffect(() => {
-  //   const fetchCategoryData = async () => {
-  //     if (categoryManagement && categoryManagement.data) {
-  //       const updatedCategoryData = {};
-  //       const updatedSubCategoryData = {};
+const CategoryDynamic = () => {
+  const [categoryManagement, setCategoryManagement] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
 
-  //       for (const category of categoryManagement.data) {
-  //         const countLevel1 = await odooApi('GET', `/api/v1/category/numFound?parent_id=${category.categoryIdI}`);
+  const loadBrand = useCallback(async () => {
+    const cachedData = getFromLocalStorage('categoryManagementData');
 
-  //         updatedCategoryData[category.categoryIdI] = countLevel1?.numFound;
+    // apakah data sudah kadaluarsa
+    const dataExpired = cachedData ? isExpired(cachedData.expiry) : true;
 
-  //         for (const subCategory of countLevel1?.children) {
-  //           updatedSubCategoryData[subCategory.id] = subCategory?.numFound;
-  //         }
-  //       }
+    // Jika belum kadaluarsa, pakai data dari localStorage
+    if (cachedData && !dataExpired) {
+      setCategoryManagement(cachedData.value);
+    } else {
+      // Jika kadaluarsa, cek versi terbaru dari API
+      const latestVersion = await fetchCategoryManagementVersion();
 
-  //       setCategoryData(updatedCategoryData);
-  //       setSubCategoryData(updatedSubCategoryData);
-  //     }
-  //   };
+      if (cachedData && cachedData.version === latestVersion) {
+        // Jika versinya sama, reset expiry
+        saveToLocalStorage(
+          'categoryManagementData',
+          cachedData.value,
+          latestVersion,
+          24
+        );
+        setCategoryManagement(cachedData.value);
+      } else {
+        // Jika versinya beda, lakukan fetch data baru
+        setIsLoading(true);
+        const items = await fetchCategoryManagementSolr();
+        setIsLoading(false);
 
-  //   fetchCategoryData();
-  // }, [categoryManagement.isLoading]);
+        // Simpan data baru
+        saveToLocalStorage('categoryManagementData', items, latestVersion, 24);
+        setCategoryManagement(items);
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    loadBrand(); // Load data saat komponen pertama kali dimuat
+  }, [loadBrand]);
 
   const swiperBanner = {
     modules: [Pagination],
-- 
cgit v1.2.3

