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 // Check for cached data
const getProductCache = () => { const getProductCache = () => {
if (typeof window !== "undefined" && window.productCache) { // Ensure cache exists
if (typeof window !== "undefined") {
window.productCache = window.productCache || {};
return window.productCache; return window.productCache;
} }
if ( if (typeof global !== "undefined" && global.window) {
typeof global !== "undefined" && global.window.productCache = global.window.productCache || {};
global.window &&
global.window.productCache
) {
return global.window.productCache; return global.window.productCache;
} }
return null; return {};
}; };
// Initialize categories // Initialize categories - USE THE CACHE directly
const initializeCategories = (language = 'en') => { const initializeCategories = (language = 'en') => {
const productCache = getProductCache(); const cache = getProductCache();
// Try language-specific cache first, then fallback to default // Try language-specific cache first, then fallback to default
const cached = productCache?.[`categoryTree_209_${language}`]?.categoryTree || const categoryTree = cache[`categoryTree_209_${language}`]?.categoryTree ||
(language === 'de' && productCache?.["categoryTree_209"]?.categoryTree); (language === 'de' && cache["categoryTree_209"]?.categoryTree);
return cached ? processCategoryTree(cached) : []; return processCategoryTree(categoryTree || {});
}; };
const SharedCarousel = () => { const SharedCarousel = () => {
@@ -82,11 +80,12 @@ const SharedCarousel = () => {
useEffect(() => { useEffect(() => {
// Only fetch if we don't have categories // Only fetch if we don't have categories
if (rootCategories.length === 0 && typeof window !== "undefined") { if (rootCategories.length === 0 && typeof window !== "undefined") {
const productCache = getProductCache(); const cache = getProductCache();
const hasCache = productCache?.[`categoryTree_209_${currentLanguage}`]?.categoryTree || const categoryTree = cache[`categoryTree_209_${currentLanguage}`]?.categoryTree ||
(currentLanguage === 'de' && productCache?.["categoryTree_209"]?.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) => { window.socketManager.emit("categoryList", { categoryId: 209, language: currentLanguage, requestTranslation: true }, (response) => {
if (response && response.success) { if (response && response.success) {
// Use translated data if available, otherwise fall back to original // 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) || const windowObj = (typeof global !== "undefined" && global.window) ||
(typeof window !== "undefined" && window); (typeof window !== "undefined" && window);
if (windowObj && !windowObj.productCache) { // Ensure cache exists
windowObj.productCache = {}; windowObj.productCache = windowObj.productCache || {};
}
const cacheKey = `categoryTree_209_${currentLanguage}`;
const cachedData = windowObj?.productCache?.[cacheKey];
// Use cache if available // Get cache key
if (cachedData?.categoryTree) { const cacheKey = `categoryTree_209_${currentLanguage}`;
this.processCategoryTree(cachedData.categoryTree);
// USE THE CACHE directly - if it has data, use it
const categoryTree = windowObj.productCache[cacheKey]?.categoryTree;
if (categoryTree) {
this.processCategoryTree(categoryTree);
return; return;
} }
// Mark as being fetched // No cache, so fetch
if (windowObj?.productCache) { windowObj.productCache[cacheKey] = { fetching: true, timestamp: Date.now() };
windowObj.productCache[cacheKey] = { fetching: true, timestamp: Date.now() };
}
this.setState({ fetchedCategories: true }); this.setState({ fetchedCategories: true });
window.socketManager.emit("categoryList", { categoryId: 209, language: currentLanguage, requestTranslation: true }, (response) => { window.socketManager.emit("categoryList", { categoryId: 209, language: currentLanguage, requestTranslation: true }, (response) => {
if (response && response.success) { if (response && response.success) {