seb/reactShop
1
0
Fork 0
Code Issues Pull Requests Activity

refactor: implement socket.io method overrides and enhance logging for productCache in Content component to improve category data handling

Browse Source
This commit is contained in:
sebseb7
2025-07-23 10:00:46 +02:00
parent abf94eba86
commit 21ed40c4ce
2 changed files with 83 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/components/Content.js
View File

@@ -191,6 +191,14 @@ class Content extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
// DEBUG: Check for window.productCache at constructor time
console.log("Content constructor - window.productCache exists:", !!window.productCache);
if (window.productCache && window.productCache["categoryTree_209"]) {
console.log("Content constructor - categoryTree_209 exists:", !!window.productCache["categoryTree_209"]);
console.log("Content constructor - categoryTree_209.categoryTree exists:",
!!window.productCache["categoryTree_209"].categoryTree);
}
this.state = { this.state = {
loaded: false, loaded: false,
categoryName: null, categoryName: null,
@@ -212,6 +220,39 @@ class Content extends Component {
} }
} }
// CRITICAL: Override socket.io methods if we have the cache
if (window.productCache &&
window.productCache["categoryTree_209"] &&
window.productCache["categoryTree_209"].categoryTree) {
console.log("🚫 OVERRIDING SOCKET.IO METHODS - Cache exists");
// Create backup of original methods
if (!window._originalSocketEmit && window.socketManager) {
window._originalSocketEmit = window.socketManager.emit;
// Override emit method to prevent categoryList calls
window.socketManager.emit = (event, data, callback) => {
if (event === "getCategoryProducts") {
console.log("🚫 BLOCKED getCategoryProducts socket call");
if (callback) {
// Return empty response to satisfy callback
setTimeout(() => {
callback({
products: [],
attributes: [],
categoryName: "Cached Category"
});
}, 0);
}
return;
}
// Pass through other events
return window._originalSocketEmit.call(window.socketManager, event, data, callback);
};
}
}
if(this.props.params.categoryId) {this.setState({loaded: false, unfilteredProducts: [], filteredProducts: [], attributes: [], categoryName: null, childCategories: []}, () => { if(this.props.params.categoryId) {this.setState({loaded: false, unfilteredProducts: [], filteredProducts: [], attributes: [], categoryName: null, childCategories: []}, () => {
this.fetchCategoryData(this.props.params.categoryId); this.fetchCategoryData(this.props.params.categoryId);
})} })}
@@ -269,32 +310,53 @@ class Content extends Component {
fetchCategoryData(categoryId) { fetchCategoryData(categoryId) {
console.log("Checking for category tree in cache"); console.log("============= FETCH CATEGORY DATA =============");
console.log(`Fetching category data for ID: ${categoryId}`);
console.log("window.productCache exists:", !!window.productCache); console.log("window.productCache exists:", !!window.productCache);
// Detailed logging of window.productCache
if (window.productCache) { if (window.productCache) {
console.log("window.productCache keys:", Object.keys(window.productCache)); console.log("window.productCache keys:", Object.keys(window.productCache));
console.log("window.productCache type:", typeof window.productCache);
console.log("window.productCache is array:", Array.isArray(window.productCache));
// Log categoryTree_209 details
console.log("categoryTree_209 exists:", !!window.productCache["categoryTree_209"]); console.log("categoryTree_209 exists:", !!window.productCache["categoryTree_209"]);
if (window.productCache["categoryTree_209"]) { if (window.productCache["categoryTree_209"]) {
console.log("categoryTree_209 type:", typeof window.productCache["categoryTree_209"]);
console.log("categoryTree_209 keys:", Object.keys(window.productCache["categoryTree_209"]));
console.log("categoryTree exists:", !!window.productCache["categoryTree_209"].categoryTree); console.log("categoryTree exists:", !!window.productCache["categoryTree_209"].categoryTree);
if (window.productCache["categoryTree_209"].categoryTree) {
console.log("categoryTree type:", typeof window.productCache["categoryTree_209"].categoryTree);
console.log("categoryTree is object:", typeof window.productCache["categoryTree_209"].categoryTree === 'object');
console.log("categoryTree sample:", JSON.stringify(window.productCache["categoryTree_209"].categoryTree).substring(0, 100) + "...");
}
} }
} else {
console.log("window.productCache is not defined or null");
} }
// IMPORTANT: Check for the exact structure mentioned in the requirement // IMPORTANT: Check for the exact structure mentioned in the requirement
// window.productCache = {"categoryTree_209":{"categoryTree": ...}} // window.productCache = {"categoryTree_209":{"categoryTree": ...}}
if (typeof window.productCache === 'object' && const hasCache = typeof window.productCache === 'object' &&
window.productCache !== null && window.productCache !== null &&
typeof window.productCache["categoryTree_209"] === 'object' && typeof window.productCache["categoryTree_209"] === 'object' &&
window.productCache["categoryTree_209"] !== null && window.productCache["categoryTree_209"] !== null &&
typeof window.productCache["categoryTree_209"].categoryTree === 'object' && typeof window.productCache["categoryTree_209"].categoryTree === 'object' &&
window.productCache["categoryTree_209"].categoryTree !== null) { window.productCache["categoryTree_209"].categoryTree !== null;
console.log("Found categoryTree_209.categoryTree in cache"); console.log("Has valid cache structure:", hasCache);
if (hasCache) {
console.log("✅ Found categoryTree_209.categoryTree in cache");
// Check for specific category data in cache // Check for specific category data in cache
const cachedData = getCachedCategoryData(categoryId); const cachedData = getCachedCategoryData(categoryId);
console.log("Has cached category data:", !!cachedData);
if (cachedData) { if (cachedData) {
console.log("Using cached category data for", categoryId); console.log("✅ Using cached category data for", categoryId);
this.processDataWithCategoryTree(cachedData, categoryId); this.processDataWithCategoryTree(cachedData, categoryId);
return; return;
} else { } else {
@@ -305,22 +367,25 @@ class Content extends Component {
attributes: [], attributes: [],
categoryName: this.getCategoryNameFromTree(categoryId) categoryName: this.getCategoryNameFromTree(categoryId)
}; };
console.log("Using category tree data without products"); console.log("✅ Using category tree data without products");
console.log("Category name from tree:", emptyResponse.categoryName);
this.processDataWithCategoryTree(emptyResponse, categoryId); this.processDataWithCategoryTree(emptyResponse, categoryId);
return; return;
} }
} }
console.log("No category tree found in cache, proceeding with socket.io query"); console.log("❌ No category tree found in cache, proceeding with socket.io query");
// Only if we don't have the category tree in cache, proceed with socket.io query // Only if we don't have the category tree in cache, proceed with socket.io query
console.log(`productList:${categoryId}`); console.log(`Registering for productList:${categoryId}`);
window.socketManager.off(`productList:${categoryId}`); window.socketManager.off(`productList:${categoryId}`);
// Track if we've received the full response to ignore stub response if needed // Track if we've received the full response to ignore stub response if needed
let receivedFullResponse = false; let receivedFullResponse = false;
console.log(`⚠️ Setting up listener for productList:${categoryId}`);
window.socketManager.on(`productList:${categoryId}`,(response) => { window.socketManager.on(`productList:${categoryId}`,(response) => {
console.log(`⚠️ RECEIVED productList:${categoryId} FULL RESPONSE`);
console.log("getCategoryProducts full response", response); console.log("getCategoryProducts full response", response);
receivedFullResponse = true; receivedFullResponse = true;
setCachedCategoryData(categoryId, response); setCachedCategoryData(categoryId, response);
@@ -331,8 +396,10 @@ class Content extends Component {
} }
}); });
console.log(`⚠️ EMITTING getCategoryProducts for ${categoryId}`);
window.socketManager.emit("getCategoryProducts", { categoryId: categoryId }, window.socketManager.emit("getCategoryProducts", { categoryId: categoryId },
(response) => { (response) => {
console.log(`⚠️ RECEIVED getCategoryProducts STUB RESPONSE for ${categoryId}`);
console.log("getCategoryProducts stub response", response); console.log("getCategoryProducts stub response", response);
// Only process stub response if we haven't received the full response yet // Only process stub response if we haven't received the full response yet
if (!receivedFullResponse) { if (!receivedFullResponse) {

16
webpack.config.js
View File

@@ -143,14 +143,7 @@ class InlineCssPlugin {
// Remove existing CSS link tags from HTML // Remove existing CSS link tags from HTML
data.html = data.html.replace(/<link[^>]*href="[^"]*\.css"[^>]*>/g, ''); data.html = data.html.replace(/<link[^>]*href="[^"]*\.css"[^>]*>/g, '');
// Find JavaScript files to preload // JavaScript file preloading removed
const jsPreloads = [];
Object.keys(compilation.assets).forEach(assetName => {
if (assetName.endsWith('.js') && !assetName.includes('chunk')) {
// Only preload main bundle and vendor files, not chunks
jsPreloads.push(`<link rel="preload" href="/${assetName}" as="script" crossorigin>\n`);
}
});
// Extract font URLs from CSS for preloading - DISABLED // Extract font URLs from CSS for preloading - DISABLED
// const fontUrls = []; // const fontUrls = [];
@@ -202,16 +195,13 @@ class InlineCssPlugin {
// Add inlined CSS to head // Add inlined CSS to head
const styleTag = `<style type="text/css">${inlinedCss.trim()}</style>`; const styleTag = `<style type="text/css">${inlinedCss.trim()}</style>`;
// Place only JS preloads in the head, no font or image preloads // Add only the style tag to head (no JS preloads)
data.html = data.html.replace('</head>', `${styleTag}\n${jsPreloads.join('')}</head>`); data.html = data.html.replace('</head>', `${styleTag}\n</head>`);
console.log(`✅ Inlined CSS assets: ${cssAssets.join(', ')} (${Math.round(inlinedCss.length / 1024)}KB)`); console.log(`✅ Inlined CSS assets: ${cssAssets.join(', ')} (${Math.round(inlinedCss.length / 1024)}KB)`);
// if (fontUrls.length > 0) { // if (fontUrls.length > 0) {
// console.log(`✅ Added font preloads: ${fontUrls.length} fonts`); // console.log(`✅ Added font preloads: ${fontUrls.length} fonts`);
// } // }
if (jsPreloads.length > 0) {
console.log(`✅ Added JS preloads: ${jsPreloads.length} files`);
}
// Log whether images were preloaded // Log whether images were preloaded
console.log(`Page: ${outputPath} - Is homepage: ${isHomePage}`); console.log(`Page: ${outputPath} - Is homepage: ${isHomePage}`);