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

9
src/components/Content.js
View File

@@ -305,7 +305,8 @@ class Content extends Component {
// Get child categories from the cached category tree
let childCategories = [];
try {
const categoryTreeCache = window.categoryService.getSync(209);
const currentLanguage = this.props.languageContext?.currentLanguage || this.props.i18n?.language || 'de';
const categoryTreeCache = window.categoryService.getSync(209, currentLanguage);
if (categoryTreeCache) {
// If categoryId is a string (SEO name), find by seoName, otherwise by ID
const targetCategory = typeof categoryId === 'string'
@@ -391,7 +392,8 @@ class Content extends Component {
const seoName = this.props.params.categoryId;
// Get the category tree from cache
const categoryTreeCache = window.categoryService.getSync(209);
const currentLanguage = this.props.languageContext?.currentLanguage || this.props.i18n?.language || 'de';
const categoryTreeCache = window.categoryService.getSync(209, currentLanguage);
// Find the category by seoName
const category = this.findCategoryBySeoName(categoryTreeCache, seoName);
@@ -403,7 +405,8 @@ class Content extends Component {
if (!currentCategoryId) return null;
// Get the category tree from cache
const categoryTreeCache = window.categoryService.getSync(209);
const currentLanguage = this.props.languageContext?.currentLanguage || this.props.i18n?.language || 'de';
const categoryTreeCache = window.categoryService.getSync(209, currentLanguage);
// Find the current category in the tree
const currentCategory = this.findCategoryById(categoryTreeCache, currentCategoryId);

39
src/components/SharedCarousel.js
View File

@@ -26,36 +26,35 @@ class SharedCarousel extends React.Component {
constructor(props) {
super(props);
const { i18n } = props;
const categories = window.categoryService.getSync(209);
// Don't load categories in constructor - will be loaded in componentDidMount with correct language
this.state = {
categories: categories && categories.children && categories.children.length > 0 ? [...categories.children, ...categories.children] : [],
categories: [],
currentLanguage: (i18n && i18n.language) || 'de',
showScrollbar: false,
};
if(categories && categories.children && categories.children.length > 0) {
this.originalCategories = categories.children;
this.categories = [...categories.children, ...categories.children];
this.startAutoScroll();
}
this.carouselTrackRef = React.createRef();
}
componentDidMount() {
this._isMounted = true;
if (!this.state.categories || this.state.categories.length === 0) {
window.categoryService.get(209,this.props.languageContext?.currentLanguage || this.props.i18n.language).then((response) => {
if (this._isMounted && response.children && response.children.length > 0) {
this.originalCategories = response.children;
// Duplicate for seamless looping
this.categories = [...response.children, ...response.children];
this.setState({ categories: this.categories });
this.startAutoScroll();
}
});
}
const currentLanguage = this.props.languageContext?.currentLanguage || this.props.i18n.language;
// ALWAYS reload categories to ensure correct language
console.log("SharedCarousel componentDidMount: ALWAYS RELOADING categories for language", currentLanguage);
window.categoryService.get(209, currentLanguage).then((response) => {
console.log("SharedCarousel categoryService.get response for language '" + currentLanguage + "':", response);
if (this._isMounted && response.children && response.children.length > 0) {
console.log("SharedCarousel: Setting categories with", response.children.length, "items");
console.log("SharedCarousel: First category name:", response.children[0]?.name);
this.originalCategories = response.children;
// Duplicate for seamless looping
this.categories = [...response.children, ...response.children];
this.setState({ categories: this.categories });
this.startAutoScroll();
}
});
}
componentDidUpdate(prevProps) {

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={{