seb/reactShop
1
0
Fork 0
Code Issues Pull Requests Activity

refactor: simplify cache management in SharedCarousel and CategoryList components to enhance data fetching efficiency and maintainability

Browse Source
This commit is contained in:
sebseb7
2025-07-23 10:15:49 +02:00
parent e472e6bb77
commit 146daf8eb1
2 changed files with 27 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/SharedCarousel.js
View File

@@ -23,28 +23,26 @@ const processCategoryTree = (categoryTree) => {
// Check for cached data
const getProductCache = () => {
if (typeof window !== "undefined" && window.productCache) {
// Ensure cache exists
if (typeof window !== "undefined") {
window.productCache = window.productCache || {};
return window.productCache;
}
if (
typeof global !== "undefined" &&
global.window &&
global.window.productCache
) {
if (typeof global !== "undefined" && global.window) {
global.window.productCache = global.window.productCache || {};
return global.window.productCache;
}
return null;
return {};
};
// Initialize categories
// Initialize categories - USE THE CACHE directly
const initializeCategories = (language = 'en') => {
const productCache = getProductCache();
const cache = getProductCache();
// Try language-specific cache first, then fallback to default
const cached = productCache?.[`categoryTree_209_${language}`]?.categoryTree ||
(language === 'de' && productCache?.["categoryTree_209"]?.categoryTree);
const categoryTree = cache[`categoryTree_209_${language}`]?.categoryTree ||
(language === 'de' && cache["categoryTree_209"]?.categoryTree);
return cached ? processCategoryTree(cached) : [];
return processCategoryTree(categoryTree || {});
};
const SharedCarousel = () => {
@@ -82,11 +80,12 @@ const SharedCarousel = () => {
useEffect(() => {
// Only fetch if we don't have categories
if (rootCategories.length === 0 && typeof window !== "undefined") {
const productCache = getProductCache();
const hasCache = productCache?.[`categoryTree_209_${currentLanguage}`]?.categoryTree ||
(currentLanguage === 'de' && productCache?.["categoryTree_209"]?.categoryTree);
const cache = getProductCache();
const categoryTree = cache[`categoryTree_209_${currentLanguage}`]?.categoryTree ||
(currentLanguage === 'de' && cache["categoryTree_209"]?.categoryTree);
if (!hasCache) {
// If no cache, fetch
if (!categoryTree) {
window.socketManager.emit("categoryList", { categoryId: 209, language: currentLanguage, requestTranslation: true }, (response) => {
if (response && response.success) {
// Use translated data if available, otherwise fall back to original

25
src/components/header/CategoryList.js
View File

@@ -170,24 +170,21 @@ class CategoryList extends Component {
const windowObj = (typeof global !== "undefined" && global.window) ||
(typeof window !== "undefined" && window);
if (windowObj && !windowObj.productCache) {
windowObj.productCache = {};
}
const cacheKey = `categoryTree_209_${currentLanguage}`;
const cachedData = windowObj?.productCache?.[cacheKey];
// Ensure cache exists
windowObj.productCache = windowObj.productCache || {};
// Use cache if available
if (cachedData?.categoryTree) {
this.processCategoryTree(cachedData.categoryTree);
// Get cache key
const cacheKey = `categoryTree_209_${currentLanguage}`;
// USE THE CACHE directly - if it has data, use it
const categoryTree = windowObj.productCache[cacheKey]?.categoryTree;
if (categoryTree) {
this.processCategoryTree(categoryTree);
return;
}
// Mark as being fetched
if (windowObj?.productCache) {
windowObj.productCache[cacheKey] = { fetching: true, timestamp: Date.now() };
}
// No cache, so fetch
windowObj.productCache[cacheKey] = { fetching: true, timestamp: Date.now() };
this.setState({ fetchedCategories: true });
window.socketManager.emit("categoryList", { categoryId: 209, language: currentLanguage, requestTranslation: true }, (response) => {
if (response && response.success) {