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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user