refactor: streamline GrowTentKonfigurator by removing unused variables and console logs

- Eliminated unnecessary tracking of response status and related logic for product list updates.
- Removed console logging statements to clean up the code and improve performance.
- Added a check to ensure all category data sections are loaded before rendering related components, enhancing user experience.
This commit is contained in:
sebseb7
2025-09-07 06:09:14 +02:00
parent 1ac253d5f3
commit 12ed71b406

View File

@@ -158,11 +158,7 @@ class GrowTentKonfigurator extends Component {
window.socketManager.off(`productList:${categoryId}`); window.socketManager.off(`productList:${categoryId}`);
// Track if we've received the full response to ignore stub response if needed
let receivedFullResponse = false;
window.socketManager.on(`productList:${categoryId}`,(response) => { window.socketManager.on(`productList:${categoryId}`,(response) => {
receivedFullResponse = true;
setCachedCategoryData(categoryId, response); setCachedCategoryData(categoryId, response);
// Force re-render when data arrives // Force re-render when data arrives
@@ -175,15 +171,7 @@ class GrowTentKonfigurator extends Component {
window.socketManager.emit( window.socketManager.emit(
"getCategoryProducts", "getCategoryProducts",
{ categoryId: categoryId, language: currentLanguage, requestTranslation: currentLanguage === 'de' ? false : true }, { categoryId: categoryId, language: currentLanguage, requestTranslation: currentLanguage === 'de' ? false : true },
(response) => { () => {}
// Only process stub response if we haven't received the full response yet
if (!receivedFullResponse) {
setCachedCategoryData(categoryId, response);
if (categoryId === 'Zelte') {
this.forceUpdate();
}
}
}
); );
} }
@@ -264,8 +252,6 @@ class GrowTentKonfigurator extends Component {
}); });
return matchingProducts.map(product => { return matchingProducts.map(product => {
// Convert to the format expected by the configurator
console.log('Raw product from backend:', product);
return product; return product;
}); // No sorting needed }); // No sorting needed
} }
@@ -274,10 +260,6 @@ class GrowTentKonfigurator extends Component {
filterLampsByTentSize(tentShape, products, attributes) { filterLampsByTentSize(tentShape, products, attributes) {
if (!products || !attributes || !tentShape) return []; if (!products || !attributes || !tentShape) return [];
console.log('Filtering lamps for tent shape:', tentShape);
console.log('Available lamp products:', products.length);
console.log('Available lamp attributes:', attributes.length);
// Group attributes by product ID and attribute name // Group attributes by product ID and attribute name
const attributesByProduct = {}; const attributesByProduct = {};
attributes.forEach(attr => { attributes.forEach(attr => {
@@ -301,13 +283,9 @@ class GrowTentKonfigurator extends Component {
// Check availability - only show products that are available for delivery // Check availability - only show products that are available for delivery
const isAvailable = (product.available > 0) || (product.availableSupplier === 1); const isAvailable = (product.available > 0) || (product.availableSupplier === 1);
console.log(`Product ${product.id}: tentSize=${tentSizeAttr}, match=${sizeMatch}, available=${isAvailable}`);
return sizeMatch && isAvailable; return sizeMatch && isAvailable;
}); });
console.log('Filtered lamps:', matchingProducts.length);
return matchingProducts; return matchingProducts;
} }
@@ -315,7 +293,6 @@ class GrowTentKonfigurator extends Component {
getLampsForTentShape(shapeId) { getLampsForTentShape(shapeId) {
const cachedData = getCachedCategoryData('Lampen'); const cachedData = getCachedCategoryData('Lampen');
if (!cachedData || !cachedData.products || !cachedData.attributes) { if (!cachedData || !cachedData.products || !cachedData.attributes) {
console.log('No cached lamp data available');
return []; return [];
} }
@@ -326,7 +303,6 @@ class GrowTentKonfigurator extends Component {
getVentilationForTentShape(shapeId) { getVentilationForTentShape(shapeId) {
const cachedData = getCachedCategoryData('Abluft-sets'); const cachedData = getCachedCategoryData('Abluft-sets');
if (!cachedData || !cachedData.products || !cachedData.attributes) { if (!cachedData || !cachedData.products || !cachedData.attributes) {
console.log('No cached ventilation data available');
return []; return [];
} }
@@ -337,10 +313,6 @@ class GrowTentKonfigurator extends Component {
filterVentilationByTentSize(tentShape, products, attributes) { filterVentilationByTentSize(tentShape, products, attributes) {
if (!products || !attributes || !tentShape) return []; if (!products || !attributes || !tentShape) return [];
console.log('Filtering ventilation for tent shape:', tentShape);
console.log('Available ventilation products:', products.length);
console.log('Available ventilation attributes:', attributes.length);
// Group attributes by product ID and attribute name // Group attributes by product ID and attribute name
const attributesByProduct = {}; const attributesByProduct = {};
attributes.forEach(attr => { attributes.forEach(attr => {
@@ -362,9 +334,6 @@ class GrowTentKonfigurator extends Component {
// Only filter by tent size match, not by availability // Only filter by tent size match, not by availability
const sizeMatch = tentSizeAttr === tentShape; const sizeMatch = tentSizeAttr === tentShape;
console.log(`Ventilation Product ${product.id}: tentSize=${tentSizeAttr}, match=${sizeMatch}`);
return sizeMatch; return sizeMatch;
}).map(product => { }).map(product => {
// Add availability flag to each product for UI rendering // Add availability flag to each product for UI rendering
@@ -375,7 +344,6 @@ class GrowTentKonfigurator extends Component {
}; };
}); });
console.log('Filtered ventilation (including non-deliverable):', matchingProducts.length);
return matchingProducts; return matchingProducts;
} }
@@ -650,10 +618,6 @@ class GrowTentKonfigurator extends Component {
); );
} }
console.log('Product display:', {
productsCount: filteredTents.length,
firstProduct: filteredTents[0] || null
});
if (filteredTents.length === 0) { if (filteredTents.length === 0) {
return ( return (
@@ -1245,6 +1209,13 @@ class GrowTentKonfigurator extends Component {
render() { render() {
// Check if all 4 category data sections have loaded
const tentsData = getCachedCategoryData('Zelte');
const lampsData = getCachedCategoryData('Lampen');
const ventilationData = getCachedCategoryData('Abluft-sets');
const extrasData = getCachedCategoryData('Set-zubehoer');
const allDataLoaded = tentsData && lampsData && ventilationData && extrasData;
return ( return (
<Container maxWidth="lg" sx={{ py: 4 }}> <Container maxWidth="lg" sx={{ py: 4 }}>
@@ -1311,6 +1282,10 @@ class GrowTentKonfigurator extends Component {
{this.renderTentShapeSection()} {this.renderTentShapeSection()}
<Divider sx={{ my: 4 }} /> <Divider sx={{ my: 4 }} />
{allDataLoaded && (
<>
{this.renderTentSizeSection()} {this.renderTentSizeSection()}
{this.state.selectedTentShape && <Divider sx={{ my: 4 }} />} {this.state.selectedTentShape && <Divider sx={{ my: 4 }} />}
@@ -1324,7 +1299,8 @@ class GrowTentKonfigurator extends Component {
{/* Inline summary section - expands when scrolling to bottom */} {/* Inline summary section - expands when scrolling to bottom */}
{this.renderInlineSummary()} {this.renderInlineSummary()}
</>
)}
</Paper> </Paper>
</Container> </Container>