From e8e7275a25939bfaeacaf2a9cbf508b514647057 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 8 Oct 2024 10:31:13 +0700 Subject: update category management to storage on local --- src/lib/home/components/CategoryDynamicMobile.jsx | 111 ++++++++++++++++------ 1 file changed, 82 insertions(+), 29 deletions(-) (limited to 'src/lib/home/components/CategoryDynamicMobile.jsx') 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, })); }; -- cgit v1.2.3 From 3a4e4d2d9c74bf84bd287235f4f3799b4a332097 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 8 Oct 2024 14:26:13 +0700 Subject: update category management fetch data --- src/lib/home/components/CategoryDynamicMobile.jsx | 70 +++++++++-------------- 1 file changed, 28 insertions(+), 42 deletions(-) (limited to 'src/lib/home/components/CategoryDynamicMobile.jsx') 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(() => { -- cgit v1.2.3