diff options
Diffstat (limited to 'src/lib/home/components/CategoryDynamic.jsx')
| -rw-r--r-- | src/lib/home/components/CategoryDynamic.jsx | 75 |
1 files changed, 28 insertions, 47 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/', |
