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}`);
// Track if we've received the full response to ignore stub response if needed
let receivedFullResponse = false;
window.socketManager.on(`productList:${categoryId}`,(response) => {
receivedFullResponse = true;
setCachedCategoryData(categoryId, response);
// Force re-render when data arrives
@@ -175,15 +171,7 @@ class GrowTentKonfigurator extends Component {
window.socketManager.emit(
"getCategoryProducts",
{ 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 => {
// Convert to the format expected by the configurator
console.log('Raw product from backend:', product);
return product;
}); // No sorting needed
}
@@ -274,10 +260,6 @@ class GrowTentKonfigurator extends Component {
filterLampsByTentSize(tentShape, products, attributes) {
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
const attributesByProduct = {};
attributes.forEach(attr => {
@@ -301,13 +283,9 @@ class GrowTentKonfigurator extends Component {
// Check availability - only show products that are available for delivery
const isAvailable = (product.available > 0) || (product.availableSupplier === 1);
console.log(`Product ${product.id}: tentSize=${tentSizeAttr}, match=${sizeMatch}, available=${isAvailable}`);
return sizeMatch && isAvailable;
});
console.log('Filtered lamps:', matchingProducts.length);
return matchingProducts;
}
@@ -315,7 +293,6 @@ class GrowTentKonfigurator extends Component {
getLampsForTentShape(shapeId) {
const cachedData = getCachedCategoryData('Lampen');
if (!cachedData || !cachedData.products || !cachedData.attributes) {
console.log('No cached lamp data available');
return [];
}
@@ -326,7 +303,6 @@ class GrowTentKonfigurator extends Component {
getVentilationForTentShape(shapeId) {
const cachedData = getCachedCategoryData('Abluft-sets');
if (!cachedData || !cachedData.products || !cachedData.attributes) {
console.log('No cached ventilation data available');
return [];
}
@@ -337,10 +313,6 @@ class GrowTentKonfigurator extends Component {
filterVentilationByTentSize(tentShape, products, attributes) {
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
const attributesByProduct = {};
attributes.forEach(attr => {
@@ -362,9 +334,6 @@ class GrowTentKonfigurator extends Component {
// Only filter by tent size match, not by availability
const sizeMatch = tentSizeAttr === tentShape;
console.log(`Ventilation Product ${product.id}: tentSize=${tentSizeAttr}, match=${sizeMatch}`);
return sizeMatch;
}).map(product => {
// 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;
}
@@ -650,10 +618,6 @@ class GrowTentKonfigurator extends Component {
);
}
console.log('Product display:', {
productsCount: filteredTents.length,
firstProduct: filteredTents[0] || null
});
if (filteredTents.length === 0) {
return (
@@ -1245,7 +1209,14 @@ class GrowTentKonfigurator extends Component {
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 (
<Container maxWidth="lg" sx={{ py: 4 }}>
<Paper elevation={2} sx={{ p: 4, borderRadius: 2 }}>
@@ -1256,14 +1227,14 @@ class GrowTentKonfigurator extends Component {
<Typography variant="h6" color="text.secondary">
Stelle dein perfektes Indoor Grow Setup zusammen
</Typography>
{/* Bundle Discount Information */}
<Paper
elevation={1}
sx={{
mt: 3,
p: 2,
bgcolor: '#f8f9fa',
<Paper
elevation={1}
sx={{
mt: 3,
p: 2,
bgcolor: '#f8f9fa',
border: '1px solid #e9ecef',
maxWidth: 600,
mx: 'auto'
@@ -1311,20 +1282,25 @@ class GrowTentKonfigurator extends Component {
{this.renderTentShapeSection()}
<Divider sx={{ my: 4 }} />
{this.renderTentSizeSection()}
{this.state.selectedTentShape && <Divider sx={{ my: 4 }} />}
{this.renderLightSection()}
<Divider sx={{ my: 4 }} />
{this.renderVentilationSection()}
<Divider sx={{ my: 4 }} />
{this.renderExtrasSection()}
{/* Inline summary section - expands when scrolling to bottom */}
{this.renderInlineSummary()}
{allDataLoaded && (
<>
{this.renderTentSizeSection()}
{this.state.selectedTentShape && <Divider sx={{ my: 4 }} />}
{this.renderLightSection()}
<Divider sx={{ my: 4 }} />
{this.renderVentilationSection()}
<Divider sx={{ my: 4 }} />
{this.renderExtrasSection()}
{/* Inline summary section - expands when scrolling to bottom */}
{this.renderInlineSummary()}
</>
)}
</Paper>
</Container>