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.

src/pages/GrowTentKonfigurator.js

@@ -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 
+            <Paper
-              elevation={1} 
+              elevation={1}
-              sx={{ 
+              sx={{
-                mt: 3, 
+                mt: 3,
-                p: 2, 
+                p: 2,
-                bgcolor: '#f8f9fa', 
+                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()}
+          {allDataLoaded && (
-          {this.state.selectedTentShape && <Divider sx={{ my: 4 }} />}
+            <>
-          
+
-          {this.renderLightSection()}
+
-          <Divider sx={{ my: 4 }} />
+              {this.renderTentSizeSection()}
-          
+              {this.state.selectedTentShape && <Divider sx={{ my: 4 }} />}
-          {this.renderVentilationSection()}
+
-          <Divider sx={{ my: 4 }} />
+              {this.renderLightSection()}
-          
+              <Divider sx={{ my: 4 }} />
-          {this.renderExtrasSection()}
+
-          
+              {this.renderVentilationSection()}
-          {/* Inline summary section - expands when scrolling to bottom */}
+              <Divider sx={{ my: 4 }} />
-          {this.renderInlineSummary()}
+
-          
+              {this.renderExtrasSection()}
+
+              {/* Inline summary section - expands when scrolling to bottom */}
+              {this.renderInlineSummary()}
+            </>
+          )}
 
         </Paper>
       </Container>