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

refactor: improve cache utilization and data fetching logic in SharedCarousel and CategoryList components for enhanced performance and maintainability

Browse Source
This commit is contained in:
sebseb7
2025-07-23 10:20:35 +02:00
parent 146daf8eb1
commit 226ca3e834
2 changed files with 39 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/components/SharedCarousel.js
View File

@@ -78,50 +78,48 @@ const SharedCarousel = () => {
}, [i18n]); }, [i18n]);
useEffect(() => { useEffect(() => {
// Only fetch if we don't have categories // Check cache first
const cache = getProductCache();
const categoryTree = cache[`categoryTree_209_${currentLanguage}`]?.categoryTree ||
(currentLanguage === 'de' && cache["categoryTree_209"]?.categoryTree);
// Use cache if available
if (categoryTree) {
setRootCategories(processCategoryTree(categoryTree));
return;
}
// Only fetch if needed
if (rootCategories.length === 0 && typeof window !== "undefined") { if (rootCategories.length === 0 && typeof window !== "undefined") {
const cache = getProductCache(); window.socketManager.emit("categoryList", { categoryId: 209, language: currentLanguage, requestTranslation: true }, (response) => {
const categoryTree = cache[`categoryTree_209_${currentLanguage}`]?.categoryTree || if (response && response.success) {
(currentLanguage === 'de' && cache["categoryTree_209"]?.categoryTree); // Use translated data if available, otherwise fall back to original
const categoryTreeToUse = response.translation || response.categoryTree;
// If no cache, fetch
if (!categoryTree) { if (categoryTreeToUse) {
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
const categoryTreeToUse = response.translation || response.categoryTree;
if (categoryTreeToUse) {
// Store in cache with language-specific key
try {
if (!window.productCache) window.productCache = {};
window.productCache[`categoryTree_209_${currentLanguage}`] = {
categoryTree: categoryTreeToUse,
timestamp: Date.now(),
};
} catch (err) {
console.error(err);
}
const newCategories = categoryTreeToUse.children || [];
setRootCategories(newCategories);
}
} else if (response && response.categoryTree) {
// Fallback for old response format
// Store in cache with language-specific key // Store in cache with language-specific key
try { if (!window.productCache) window.productCache = {};
if (!window.productCache) window.productCache = {}; window.productCache[`categoryTree_209_${currentLanguage}`] = {
window.productCache[`categoryTree_209_${currentLanguage}`] = { categoryTree: categoryTreeToUse,
categoryTree: response.categoryTree, timestamp: Date.now(),
timestamp: Date.now(), };
};
} catch (err) { const newCategories = categoryTreeToUse.children || [];
console.error(err);
}
const newCategories = response.categoryTree.children || [];
setRootCategories(newCategories); setRootCategories(newCategories);
} }
}); } else if (response && response.categoryTree) {
} // Fallback for old response format
// Store in cache with language-specific key
if (!window.productCache) window.productCache = {};
window.productCache[`categoryTree_209_${currentLanguage}`] = {
categoryTree: response.categoryTree,
timestamp: Date.now(),
};
const newCategories = response.categoryTree.children || [];
setRootCategories(newCategories);
}
});
} }
}, [rootCategories.length, currentLanguage]); }, [rootCategories.length, currentLanguage]);

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

@@ -180,6 +180,7 @@ class CategoryList extends Component {
const categoryTree = windowObj.productCache[cacheKey]?.categoryTree; const categoryTree = windowObj.productCache[cacheKey]?.categoryTree;
if (categoryTree) { if (categoryTree) {
this.processCategoryTree(categoryTree); this.processCategoryTree(categoryTree);
this.setState({ fetchedCategories: true });
return; return;
} }