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 // Get child categories from the cached category tree
let childCategories = []; let childCategories = [];
try { 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 (categoryTreeCache) {
// 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 targetCategory = typeof categoryId === 'string' const targetCategory = typeof categoryId === 'string'
@@ -391,7 +392,8 @@ class Content extends Component {
const seoName = this.props.params.categoryId; const seoName = this.props.params.categoryId;
// Get the category tree from cache // 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 // Find the category by seoName
const category = this.findCategoryBySeoName(categoryTreeCache, seoName); const category = this.findCategoryBySeoName(categoryTreeCache, seoName);
@@ -403,7 +405,8 @@ class Content extends Component {
if (!currentCategoryId) return null; if (!currentCategoryId) return null;
// Get the category tree from cache // 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 // Find the current category in the tree
const currentCategory = this.findCategoryById(categoryTreeCache, currentCategoryId); const currentCategory = this.findCategoryById(categoryTreeCache, currentCategoryId);

39
src/components/SharedCarousel.js
View File

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

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

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

1
src/i18n/index.js
View File

@@ -145,7 +145,6 @@ i18n
.use(initReactI18next) .use(initReactI18next)
.init({ .init({
resources, resources,
lng: 'de', // Force German as default
fallbackLng: 'de', fallbackLng: 'de',
debug: process.env.NODE_ENV === 'development', debug: process.env.NODE_ENV === 'development',

45
src/i18n/withTranslation.js
View File

@@ -19,8 +19,30 @@ export class LanguageProvider extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
// Always start with German // Try to get the current language from i18n or storage, fallback to German
const currentLanguage = 'de'; let currentLanguage = 'de';
console.log("LanguageProvider constructor - Debug info:");
console.log(" props.i18n:", props.i18n);
console.log(" props.i18n.language:", props.i18n?.language);
if (props.i18n && props.i18n.language) {
currentLanguage = props.i18n.language;
console.log(" Using language from i18n:", currentLanguage);
} else if (typeof window !== 'undefined') {
// Try to get from sessionStorage first, then localStorage
try {
const sessionLang = sessionStorage.getItem('i18nextLng');
const localLang = localStorage.getItem('i18nextLng');
console.log(" sessionStorage i18nextLng:", sessionLang);
console.log(" localStorage i18nextLng:", localLang);
currentLanguage = sessionLang || localLang || 'de';
console.log(" Using language from storage:", currentLanguage);
} catch (error) {
console.warn('Could not read language from storage:', error);
}
}
console.log(" Final currentLanguage:", currentLanguage);
this.state = { this.state = {
currentLanguage, currentLanguage,
@@ -37,9 +59,22 @@ export class LanguageProvider extends Component {
componentDidMount() { componentDidMount() {
if (this.props.i18n) { if (this.props.i18n) {
this.props.i18n.on('languageChanged', this.handleLanguageChanged); this.props.i18n.on('languageChanged', this.handleLanguageChanged);
// Set initial language state and HTML attribute
this.setState({ currentLanguage: this.props.i18n.language }); console.log("LanguageProvider componentDidMount:");
document.documentElement.lang = this.props.i18n.language; console.log(" current state.currentLanguage:", this.state.currentLanguage);
console.log(" props.i18n.language:", this.props.i18n.language);
// Only update state if i18n language is different and not the default 'de'
// This prevents overriding the language we restored from storage
if (this.props.i18n.language !== this.state.currentLanguage &&
this.props.i18n.language !== 'de') {
console.log(" Updating language from i18n:", this.props.i18n.language);
this.setState({ currentLanguage: this.props.i18n.language });
document.documentElement.lang = this.props.i18n.language;
} else {
console.log(" Keeping language from constructor:", this.state.currentLanguage);
document.documentElement.lang = this.state.currentLanguage;
}
// Start demo mode // Start demo mode
if (this.state.demoMode) { if (this.state.demoMode) {