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

refactor: enhance category data fetching logic in SharedCarousel and CategoryList components by simplifying cache checks and improving logging for better maintainability

Browse Source
This commit is contained in:
sebseb7
2025-07-23 10:13:41 +02:00
parent a2b7a2509f
commit e472e6bb77
3 changed files with 69 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -162,17 +162,11 @@ class CategoryList extends Component {
}
fetchCategories = () => {
if (this.state.fetchedCategories) {
console.log('Categories already fetched, skipping');
return;
}
// Get current language from state
const currentLanguage = this.state.currentLanguage || 'de';
// Initialize global cache object if it doesn't exist
// @note Handle both SSR (global.window) and browser (window) environments
const windowObj = (typeof global !== "undefined" && global.window) ||
(typeof window !== "undefined" && window);
@@ -180,56 +174,21 @@ class CategoryList extends Component {
windowObj.productCache = {};
}
// Check if we have a valid cache in the global object
try {
const cacheKey = `categoryTree_209_${currentLanguage}`;
const cachedData = windowObj && windowObj.productCache ? windowObj.productCache[cacheKey] : null;
if (cachedData) {
const { categoryTree, fetching } = cachedData;
//const cacheAge = Date.now() - timestamp;
//const tenMinutes = 10 * 60 * 1000; // 10 minutes in milliseconds
// If data is currently being fetched, wait for it
if (fetching) {
//console.log('CategoryList: Data is being fetched, waiting...');
const checkInterval = setInterval(() => {
const currentCache = windowObj && windowObj.productCache ? windowObj.productCache[cacheKey] : null;
if (currentCache && !currentCache.fetching) {
clearInterval(checkInterval);
if (currentCache.categoryTree) {
this.processCategoryTree(currentCache.categoryTree);
}
}
}, 100);
return;
}
// If cache is less than 10 minutes old, use it
if (/*cacheAge < tenMinutes &&*/ categoryTree) {
//console.log('Using cached category tree, age:', Math.round(cacheAge/1000), 'seconds');
// Defer processing to next tick to avoid blocking
//setTimeout(() => {
this.processCategoryTree(categoryTree);
//}, 0);
//return;
}
}
} catch (err) {
console.error("Error reading from cache:", err);
}
// Mark as being fetched to prevent concurrent calls
const cacheKey = `categoryTree_209_${currentLanguage}`;
if (windowObj && windowObj.productCache) {
windowObj.productCache[cacheKey] = {
fetching: true,
timestamp: Date.now(),
};
const cachedData = windowObj?.productCache?.[cacheKey];
// Use cache if available
if (cachedData?.categoryTree) {
this.processCategoryTree(cachedData.categoryTree);
return;
}
// Mark as being fetched
if (windowObj?.productCache) {
windowObj.productCache[cacheKey] = { fetching: true, timestamp: Date.now() };
}
this.setState({ fetchedCategories: true });
//console.log('CategoryList: Fetching categories from socket');
console.log("CategoryList: Fetching categories by ignoring",window.productCache);
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