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) {
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 = {
loaded: false,
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: []}, () => {
this.fetchCategoryData(this.props.params.categoryId);
})}
@@ -269,32 +310,53 @@ class Content extends Component {
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);
// Detailed logging of window.productCache
if (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"]);
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);
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
// window.productCache = {"categoryTree_209":{"categoryTree": ...}}
if (typeof window.productCache === 'object' &&
window.productCache !== null &&
typeof window.productCache["categoryTree_209"] === 'object' &&
window.productCache["categoryTree_209"] !== null &&
typeof window.productCache["categoryTree_209"].categoryTree === 'object' &&
window.productCache["categoryTree_209"].categoryTree !== null) {
console.log("Found categoryTree_209.categoryTree in cache");
const hasCache = typeof window.productCache === 'object' &&
window.productCache !== null &&
typeof window.productCache["categoryTree_209"] === 'object' &&
window.productCache["categoryTree_209"] !== null &&
typeof window.productCache["categoryTree_209"].categoryTree === 'object' &&
window.productCache["categoryTree_209"].categoryTree !== null;
console.log("Has valid cache structure:", hasCache);
if (hasCache) {
console.log("✅ Found categoryTree_209.categoryTree in cache");
// Check for specific category data in cache
const cachedData = getCachedCategoryData(categoryId);
console.log("Has cached category data:", !!cachedData);
if (cachedData) {
console.log("Using cached category data for", categoryId);
console.log("✅ Using cached category data for", categoryId);
this.processDataWithCategoryTree(cachedData, categoryId);
return;
} else {
@@ -305,22 +367,25 @@ class Content extends Component {
attributes: [],
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);
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
console.log(`productList:${categoryId}`);
console.log(`Registering for productList:${categoryId}`);
window.socketManager.off(`productList:${categoryId}`);
// Track if we've received the full response to ignore stub response if needed
let receivedFullResponse = false;
console.log(`⚠️ Setting up listener for productList:${categoryId}`);
window.socketManager.on(`productList:${categoryId}`,(response) => {
console.log(`⚠️ RECEIVED productList:${categoryId} FULL RESPONSE`);
console.log("getCategoryProducts full response", response);
receivedFullResponse = true;
setCachedCategoryData(categoryId, response);
@@ -331,8 +396,10 @@ class Content extends Component {
}
});
console.log(`⚠️ EMITTING getCategoryProducts for ${categoryId}`);
window.socketManager.emit("getCategoryProducts", { categoryId: categoryId },
(response) => {
console.log(`⚠️ RECEIVED getCategoryProducts STUB RESPONSE for ${categoryId}`);
console.log("getCategoryProducts stub response", response);
// Only process stub response if we haven't received the full response yet
if (!receivedFullResponse) {

16
webpack.config.js
View File

@@ -143,14 +143,7 @@ class InlineCssPlugin {
// Remove existing CSS link tags from HTML
data.html = data.html.replace(/<link[^>]*href="[^"]*\.css"[^>]*>/g, '');
// Find JavaScript files to preload
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`);
}
});
// JavaScript file preloading removed
// Extract font URLs from CSS for preloading - DISABLED
// const fontUrls = [];
@@ -202,16 +195,13 @@ class InlineCssPlugin {
// Add inlined CSS to head
const styleTag = `<style type="text/css">${inlinedCss.trim()}</style>`;
// Place only JS preloads in the head, no font or image preloads
data.html = data.html.replace('</head>', `${styleTag}\n${jsPreloads.join('')}</head>`);
// Add only the style tag to head (no JS preloads)
data.html = data.html.replace('</head>', `${styleTag}\n</head>`);
console.log(`✅ Inlined CSS assets: ${cssAssets.join(', ')} (${Math.round(inlinedCss.length / 1024)}KB)`);
// if (fontUrls.length > 0) {
// 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
console.log(`Page: ${outputPath} - Is homepage: ${isHomePage}`);