From c9477e53b6ccf9ff52075b7823a557be861c1449 Mon Sep 17 00:00:00 2001 From: sebseb7 Date: Fri, 18 Jul 2025 05:08:57 +0200 Subject: [PATCH] Enhance localization in CategoryList component: Updated category fetching logic to support dynamic language changes and improved cache handling for category data based on the current language. Adjusted delivery class display in CartItem for better user experience. --- src/components/CartItem.js | 2 +- src/components/header/CategoryList.js | 93 +++++++++++++++++++++------ 2 files changed, 75 insertions(+), 20 deletions(-) diff --git a/src/components/CartItem.js b/src/components/CartItem.js index fd6deec..574d025 100644 --- a/src/components/CartItem.js +++ b/src/components/CartItem.js @@ -117,7 +117,7 @@ class CartItem extends Component { )} {item.versandklasse && item.versandklasse != 'standard' && item.versandklasse != 'kostenlos' && ( - {item.versandklasse} + {item.versandklasse == 'nur Abholung' ? this.props.t('delivery.descriptions.pickupOnly') : item.versandklasse} )} {item.vat && ( diff --git a/src/components/header/CategoryList.js b/src/components/header/CategoryList.js index db47c0d..549bd5e 100644 --- a/src/components/header/CategoryList.js +++ b/src/components/header/CategoryList.js @@ -50,6 +50,9 @@ class CategoryList extends Component { constructor(props) { super(props); + // Get current language from props (provided by withI18n HOC) + const currentLanguage = props.languageContext?.currentLanguage || 'de'; + // Check for cached data during SSR/initial render let initialState = { categoryTree: null, @@ -59,6 +62,7 @@ class CategoryList extends Component { activePath: [], // Array of active category objects for each level fetchedCategories: false, mobileMenuOpen: false, // State for mobile collapsible menu + currentLanguage: currentLanguage, }; // Try to get cached data for SSR @@ -68,7 +72,7 @@ class CategoryList extends Component { (typeof window !== "undefined" && window.productCache); if (productCache) { - const cacheKey = "categoryTree_209"; + const cacheKey = `categoryTree_209_${currentLanguage}`; const cachedData = productCache[cacheKey]; if (cachedData && cachedData.categoryTree) { const { categoryTree, timestamp } = cachedData; @@ -128,8 +132,27 @@ class CategoryList extends Component { } componentDidUpdate(prevProps) { - // Handle socket connection changes + // Handle language changes + const currentLanguage = this.props.languageContext?.currentLanguage || 'de'; + const prevLanguage = prevProps.languageContext?.currentLanguage || 'de'; + + if (currentLanguage !== prevLanguage) { + // Language changed, need to refetch categories + this.setState({ + currentLanguage: currentLanguage, + fetchedCategories: false, + categoryTree: null, + level1Categories: [], + level2Categories: [], + level3Categories: [], + activePath: [], + }, () => { + this.fetchCategories(); + }); + return; + } + // Handle socket connection changes const wasConnected = prevProps.socket && prevProps.socket.connected; const isNowConnected = this.props.socket && this.props.socket.connected; @@ -169,6 +192,9 @@ class CategoryList extends Component { 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) || @@ -180,7 +206,7 @@ class CategoryList extends Component { // Check if we have a valid cache in the global object try { - const cacheKey = "categoryTree_209"; + const cacheKey = `categoryTree_209_${currentLanguage}`; const cachedData = windowObj && windowObj.productCache ? windowObj.productCache[cacheKey] : null; if (cachedData) { const { categoryTree, fetching } = cachedData; @@ -217,7 +243,7 @@ class CategoryList extends Component { } // Mark as being fetched to prevent concurrent calls - const cacheKey = "categoryTree_209"; + const cacheKey = `categoryTree_209_${currentLanguage}`; if (windowObj && windowObj.productCache) { windowObj.productCache[cacheKey] = { fetching: true, @@ -227,30 +253,59 @@ class CategoryList extends Component { this.setState({ fetchedCategories: true }); //console.log('CategoryList: Fetching categories from socket'); - socket.emit("categoryList", { categoryId: 209 }, (response) => { - if (response && response.categoryTree) { + socket.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; - // Store in global cache with timestamp - try { - const cacheKey = "categoryTree_209"; - if (windowObj && windowObj.productCache) { - windowObj.productCache[cacheKey] = { - categoryTree: response.categoryTree, - timestamp: Date.now(), - fetching: false, - }; + if (categoryTreeToUse) { + // Store in global cache with timestamp + try { + const cacheKey = `categoryTree_209_${currentLanguage}`; + if (windowObj && windowObj.productCache) { + windowObj.productCache[cacheKey] = { + categoryTree: categoryTreeToUse, + timestamp: Date.now(), + fetching: false, + }; + } + } catch (err) { + console.error("Error writing to cache:", err); } - } catch (err) { - console.error("Error writing to cache:", err); + this.processCategoryTree(categoryTreeToUse); + } else { + console.error('No category tree found in response'); + // Clear cache on error + try { + const cacheKey = `categoryTree_209_${currentLanguage}`; + if (windowObj && windowObj.productCache) { + windowObj.productCache[cacheKey] = { + categoryTree: null, + timestamp: Date.now(), + fetching: false, + }; + } + } catch (err) { + console.error("Error writing to cache:", err); + } + + this.setState({ + categoryTree: null, + level1Categories: [], + level2Categories: [], + level3Categories: [], + activePath: [], + }); } - this.processCategoryTree(response.categoryTree); } else { + console.error('Failed to fetch categories:', response); try { - const cacheKey = "categoryTree_209"; + const cacheKey = `categoryTree_209_${currentLanguage}`; if (windowObj && windowObj.productCache) { windowObj.productCache[cacheKey] = { categoryTree: null, timestamp: Date.now(), + fetching: false, }; } } catch (err) {