From e324ef760f1e8c6e523c79082e35f69ce16cee1d Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 8 Oct 2024 10:01:15 +0700 Subject: update category management to store data to local storage --- src/lib/home/api/categoryManagementApi.js | 8 +++ src/lib/home/components/CategoryDynamic.jsx | 93 +++++++++++++++++++---------- 2 files changed, 68 insertions(+), 33 deletions(-) (limited to 'src') 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..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 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/CategoryDynamic.jsx | 11 ++- src/lib/home/components/CategoryDynamicMobile.jsx | 111 ++++++++++++++++------ 2 files changed, 90 insertions(+), 32 deletions(-) (limited to 'src') 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, })); }; -- 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/CategoryDynamic.jsx | 75 +++++++++-------------- src/lib/home/components/CategoryDynamicMobile.jsx | 70 +++++++++------------ 2 files changed, 56 insertions(+), 89 deletions(-) (limited to 'src') 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 = () => {
{categoryManagement && categoryManagement?.map((category) => { - // const countLevel1 = categoryData[category.categoryIdI] || 0; return (
@@ -107,9 +98,6 @@ const CategoryDynamic = () => {

{category.name}

- {/* -

{countLevel1} Produk tersedia

- */} { {/* Swiper for SubCategories */} {category.categories.map((subCategory) => { - // const countLevel2 = subCategoryData[subCategory.idLevel2] || 0; - return (
@@ -147,11 +133,6 @@ const CategoryDynamic = () => {

{subCategory?.name}

- {/* -

- {countLevel2} Produk tersedia -

- */} { +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