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

refactor: unify category data fetching across components to support language context and improve state management

Browse Source
This commit is contained in:
sebseb7
2025-07-31 08:26:10 +02:00
parent 9b38ed6f2a
commit 42fa46f2f9
5 changed files with 103 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/header/CategoryList.js
View File

@@ -24,22 +24,28 @@ class CategoryList extends Component {
}
componentDidMount() {
if (!this.state.categories || this.state.categories.length === 0) {
window.categoryService.get(209,this.props.languageContext?.currentLanguage || this.props.i18n.language).then((response) => {
console.log("response", response);
if (response.children && response.children.length > 0) {
this.setState({
categories: response.children,
activeCategoryId: this.setLevel1CategoryId(this.props.activeCategoryId)
});
}
});
} else {
// Categories are already loaded, set the initial activeCategoryId
this.setState({
activeCategoryId: this.setLevel1CategoryId(this.props.activeCategoryId)
});
}
console.log("CategoryList componentDidMount - Debug info:");
console.log(" languageContext:", this.props.languageContext);
console.log(" i18n.language:", this.props.i18n?.language);
console.log(" sessionStorage i18nextLng:", typeof sessionStorage !== 'undefined' ? sessionStorage.getItem('i18nextLng') : 'N/A');
console.log(" localStorage i18nextLng:", typeof localStorage !== 'undefined' ? localStorage.getItem('i18nextLng') : 'N/A');
const currentLanguage = this.props.languageContext?.currentLanguage || this.props.i18n.language;
// ALWAYS reload categories to ensure correct language
console.log("CategoryList componentDidMount: ALWAYS RELOADING categories for language", currentLanguage);
this.setState({ categories: [] }); // Clear any cached categories
window.categoryService.get(209, currentLanguage).then((response) => {
console.log("categoryService.get response for language '" + currentLanguage + "':", response);
if (response.children && response.children.length > 0) {
console.log("Setting categories with", response.children.length, "items");
console.log("First category name:", response.children[0]?.name);
this.setState({
categories: response.children,
activeCategoryId: this.setLevel1CategoryId(this.props.activeCategoryId)
});
}
});
}
componentDidUpdate(prevProps) {
@@ -71,9 +77,14 @@ class CategoryList extends Component {
setLevel1CategoryId = (seoName) => {
console.log("setLevel1CategoryId called with seoName:", seoName);
if(seoName) {
const categoryTreeCache = window.categoryService.getSync(209);
console.log("categoryTreeCache", categoryTreeCache, seoName);
const language = this.props.languageContext?.currentLanguage || this.props.i18n.language;
console.log("setLevel1CategoryId - using language:", language);
console.log("setLevel1CategoryId - languageContext:", this.props.languageContext);
console.log("setLevel1CategoryId - i18n.language:", this.props.i18n?.language);
const categoryTreeCache = window.categoryService.getSync(209, language);
console.log("setLevel1CategoryId - categoryTreeCache (language: " + language + "):", categoryTreeCache, seoName);
// Helper function to recursively search for seoName in category tree
const findLevel1CategoryId = (categories, targetSeoName, level1Id = null) => {
@@ -130,6 +141,15 @@ class CategoryList extends Component {
render() {
const { categories, mobileMenuOpen, activeCategoryId } = this.state;
console.log("RENDER DEBUG - About to render categories:");
console.log(" categories.length:", categories.length);
if (categories.length > 0) {
console.log(" First category name:", categories[0].name);
console.log(" First category id:", categories[0].id);
}
console.log(" Current language context:", this.props.languageContext?.currentLanguage);
console.log(" Current i18n language:", this.props.i18n?.language);
const renderCategoryRow = (categories, isMobile = false) => (
<Box
sx={{