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

refactor: clean up logging and simplify cache checks in Content component to enhance clarity and maintainability of category data fetching

Browse Source
This commit is contained in:
sebseb7
2025-07-23 10:33:28 +02:00
parent 934f6abc92
commit 31c302493a
1 changed files with 13 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/components/Content.js
View File

@@ -15,15 +15,6 @@ import { useParams, useSearchParams } from 'react-router-dom';
import { getAllSettingsWithPrefix } from '../utils/sessionStorage.js'; import { getAllSettingsWithPrefix } from '../utils/sessionStorage.js';
import { withI18n } from '../i18n/withTranslation.js'; import { withI18n } from '../i18n/withTranslation.js';
// Check if window.productCache exists and has the categoryTree_209 key
if (typeof window !== 'undefined') {
console.log('Content.js loaded - window.productCache exists:', !!window.productCache);
if (window.productCache) {
console.log('Content.js loaded - window.productCache keys:', Object.keys(window.productCache));
console.log('Content.js loaded - categoryTree_209 exists:', !!window.productCache["categoryTree_209"]);
}
}
const isNew = (neu) => neu && (new Date().getTime() - new Date(neu).getTime() < 30 * 24 * 60 * 60 * 1000); const isNew = (neu) => neu && (new Date().getTime() - new Date(neu).getTime() < 30 * 24 * 60 * 60 * 1000);
// @note SwashingtonCP font is now loaded globally via index.css // @note SwashingtonCP font is now loaded globally via index.css
@@ -200,14 +191,6 @@ 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,
@@ -219,16 +202,6 @@ class Content extends Component {
} }
componentDidMount() { componentDidMount() {
// Debug check for window.productCache
console.log("Content componentDidMount - window.productCache exists:", !!window.productCache);
if (window.productCache) {
console.log("Content componentDidMount - window.productCache keys:", Object.keys(window.productCache));
if (window.productCache["categoryTree_209"]) {
console.log("Content componentDidMount - categoryTree_209.categoryTree exists:",
!!window.productCache["categoryTree_209"].categoryTree);
}
}
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);
})} })}
@@ -286,23 +259,17 @@ class Content extends Component {
fetchCategoryData(categoryId) { fetchCategoryData(categoryId) {
// Simple direct check for the cache // Check if we have the category tree data in window.productCache
console.log("fetchCategoryData - window.productCache exists:", !!window.productCache); const hasCategoryTree = window.productCache &&
if (window.productCache) { window.productCache["categoryTree_209"] &&
console.log("fetchCategoryData - categoryTree_209 exists:", !!window.productCache["categoryTree_209"]); window.productCache["categoryTree_209"].categoryTree;
if (window.productCache["categoryTree_209"]) {
console.log("fetchCategoryData - categoryTree_209.categoryTree exists:", // Check for specific category data in cache
!!window.productCache["categoryTree_209"].categoryTree); const cachedData = getCachedCategoryData(categoryId);
}
}
if (window.productCache && // If we have the category tree data, use it and don't query socket.io
window.productCache["categoryTree_209"] && if (hasCategoryTree) {
window.productCache["categoryTree_209"].categoryTree) { console.log("Found category tree in cache");
console.log("Found categoryTree_209.categoryTree in cache");
// Check for specific category data in cache
const cachedData = getCachedCategoryData(categoryId);
if (cachedData) { if (cachedData) {
console.log("Using cached category data for", categoryId); console.log("Using cached category data for", categoryId);
@@ -321,19 +288,15 @@ class Content extends Component {
return; return;
} }
} }
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(`Registering for productList:${categoryId}`); console.log(`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);
@@ -344,10 +307,8 @@ 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) {
@@ -456,12 +417,10 @@ class Content extends Component {
return null; return null;
} }
const categoryTree = window.productCache["categoryTree_209"].categoryTree;
// If categoryId is a string (SEO name), find by seoName, otherwise by ID // If categoryId is a string (SEO name), find by seoName, otherwise by ID
const category = typeof categoryId === 'string' const category = typeof categoryId === 'string'
? this.findCategoryBySeoName(categoryTree, categoryId) ? this.findCategoryBySeoName(window.productCache["categoryTree_209"].categoryTree, categoryId)
: this.findCategoryById(categoryTree, categoryId); : this.findCategoryById(window.productCache["categoryTree_209"].categoryTree, categoryId);
return category ? category.name : null; return category ? category.name : null;
} }