From 1c9d3d5ad0b20e57faa62fd8d1145bca7629fe68 Mon Sep 17 00:00:00 2001 From: sebseb7 Date: Mon, 13 Oct 2025 05:50:06 +0200 Subject: [PATCH] feat(ProductDetailPage): implement attribute image loading and caching - Add loadAttributeImages method to fetch and cache attribute images based on product attributes. - Update product detail loading logic to include attribute image loading when product data is cached. - Ensure efficient state management by caching results to minimize server requests. --- src/components/ProductDetailPage.js | 144 +++++++++++++++------------- 1 file changed, 76 insertions(+), 68 deletions(-) diff --git a/src/components/ProductDetailPage.js b/src/components/ProductDetailPage.js index ab964f8..db5e154 100644 --- a/src/components/ProductDetailPage.js +++ b/src/components/ProductDetailPage.js @@ -190,7 +190,11 @@ class ProductDetailPage extends Component { if (!this.state.product || this.state.upgrading) { this.loadProductData(); } else { - // Product is cached, but we still need to load komponenten if they exist + // Product is cached, but we still need to load attribute images and komponenten + if (this.state.attributes && this.state.attributes.length > 0) { + this.loadAttributeImages(this.state.attributes); + } + if (this.state.komponenten.length > 0 && !this.state.komponentenLoaded) { for(const komponent of this.state.komponenten) { this.loadKomponent(komponent.id, komponent.count); @@ -478,6 +482,75 @@ class ProductDetailPage extends Component { ); } + loadAttributeImages = (attributes) => { + // Initialize window-level attribute image cache if it doesn't exist + if (!window.attributeImageCache) { + window.attributeImageCache = {}; + } + + if (attributes && attributes.length > 0) { + const attributeImages = {}; + + for (const attribute of attributes) { + const cacheKey = attribute.kMerkmalWert; + + if (attribute.cName == "Anzahl") + this.setState({ isSteckling: true }); + + // Check if we have a cached result (either URL or negative result) + if (window.attributeImageCache[cacheKey]) { + const cached = window.attributeImageCache[cacheKey]; + if (cached.url) { + // Use cached URL + attributeImages[cacheKey] = cached.url; + } + } else { + // Not in cache, fetch from server + console.log('getAttributePicture', cacheKey); + window.socketManager.emit( + "getAttributePicture", + { id: cacheKey }, + (res) => { + console.log("getAttributePicture", res); + if (res.success && !res.noPicture) { + const blob = new Blob([res.imageBuffer], { + type: "image/jpeg", + }); + const url = URL.createObjectURL(blob); + + // Cache the successful URL + window.attributeImageCache[cacheKey] = { + url: url, + timestamp: Date.now(), + }; + + // Update state and force re-render + this.setState(prevState => ({ + attributeImages: { + ...prevState.attributeImages, + [cacheKey]: url + } + })); + } else { + // Cache negative result to avoid future requests + // This handles both failure cases and success with noPicture: true + window.attributeImageCache[cacheKey] = { + noImage: true, + timestamp: Date.now(), + }; + } + } + ); + } + } + + // Set initial state with cached images + if (Object.keys(attributeImages).length > 0) { + this.setState({ attributeImages }); + } + } + } + loadProductData = () => { console.log('loadProductData', this.props.seoName); const currentLanguage = this.props.languageContext?.currentLanguage || this.props.i18n?.language || 'de'; @@ -533,73 +606,8 @@ class ProductDetailPage extends Component { }); console.log("getProductView", res); - // Initialize window-level attribute image cache if it doesn't exist - if (!window.attributeImageCache) { - window.attributeImageCache = {}; - } - - if (res.attributes && res.attributes.length > 0) { - const attributeImages = {}; - - for (const attribute of res.attributes) { - const cacheKey = attribute.kMerkmalWert; - - if (attribute.cName == "Anzahl") - this.setState({ isSteckling: true }); - - // Check if we have a cached result (either URL or negative result) - if (window.attributeImageCache[cacheKey]) { - const cached = window.attributeImageCache[cacheKey]; - if (cached.url) { - // Use cached URL - attributeImages[cacheKey] = cached.url; - } - } else { - // Not in cache, fetch from server - console.log('getAttributePicture', cacheKey); - window.socketManager.emit( - "getAttributePicture", - { id: cacheKey }, - (res) => { - console.log("getAttributePicture", res); - if (res.success && !res.noPicture) { - const blob = new Blob([res.imageBuffer], { - type: "image/jpeg", - }); - const url = URL.createObjectURL(blob); - - // Cache the successful URL - window.attributeImageCache[cacheKey] = { - url: url, - timestamp: Date.now(), - }; - - // Update state and force re-render - this.setState(prevState => ({ - attributeImages: { - ...prevState.attributeImages, - [cacheKey]: url - } - })); - } else { - // Cache negative result to avoid future requests - // This handles both failure cases and success with noPicture: true - window.attributeImageCache[cacheKey] = { - noImage: true, - timestamp: Date.now(), - }; - } - } - ); - - } - } - - // Set initial state with cached images - if (Object.keys(attributeImages).length > 0) { - this.setState({ attributeImages }); - } - } + // Load attribute images + this.loadAttributeImages(res.attributes); } else { console.error( "Error loading product:",