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

refactor: enhance SharedCarousel to support language context updates and improve category fetching logic

Browse Source
This commit is contained in:
sebseb7
2025-07-31 04:50:55 +02:00
parent b29b946aaf
commit 9b38ed6f2a
2 changed files with 30 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/SharedCarousel.js
View File

@@ -1,4 +1,4 @@
import React from "react"; import React from 'react';
import Box from "@mui/material/Box"; import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography"; import Typography from "@mui/material/Typography";
import IconButton from "@mui/material/IconButton"; import IconButton from "@mui/material/IconButton";
@@ -6,6 +6,7 @@ import ChevronLeft from "@mui/icons-material/ChevronLeft";
import ChevronRight from "@mui/icons-material/ChevronRight"; import ChevronRight from "@mui/icons-material/ChevronRight";
import CategoryBox from "./CategoryBox.js"; import CategoryBox from "./CategoryBox.js";
import { withTranslation } from 'react-i18next'; import { withTranslation } from 'react-i18next';
import { withLanguage } from '../i18n/withTranslation.js';
const ITEM_WIDTH = 130 + 16; // 130px width + 16px gap const ITEM_WIDTH = 130 + 16; // 130px width + 16px gap
const AUTO_SCROLL_SPEED = 0.5; // px per frame (~60fps, so ~30px/sec) const AUTO_SCROLL_SPEED = 0.5; // px per frame (~60fps, so ~30px/sec)
@@ -45,7 +46,7 @@ class SharedCarousel extends React.Component {
componentDidMount() { componentDidMount() {
this._isMounted = true; this._isMounted = true;
if (!this.state.categories || this.state.categories.length === 0) { if (!this.state.categories || this.state.categories.length === 0) {
window.categoryService.get(209).then((response) => { window.categoryService.get(209,this.props.languageContext?.currentLanguage || this.props.i18n.language).then((response) => {
if (this._isMounted && response.children && response.children.length > 0) { if (this._isMounted && response.children && response.children.length > 0) {
this.originalCategories = response.children; this.originalCategories = response.children;
// Duplicate for seamless looping // Duplicate for seamless looping
@@ -57,6 +58,23 @@ class SharedCarousel extends React.Component {
} }
} }
componentDidUpdate(prevProps) {
console.log("componentDidUpdate", prevProps.languageContext?.currentLanguage, this.props.languageContext?.currentLanguage);
if(prevProps.languageContext?.currentLanguage !== this.props.languageContext?.currentLanguage) {
this.setState({ categories: [] },() => {
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.originalCategories = response.children;
this.categories = [...response.children, ...response.children];
this.setState({ categories: this.categories });
this.startAutoScroll();
}
});
});
}
}
componentWillUnmount() { componentWillUnmount() {
this._isMounted = false; this._isMounted = false;
this.stopAutoScroll(); this.stopAutoScroll();
@@ -386,4 +404,4 @@ class SharedCarousel extends React.Component {
} }
} }
export default withTranslation()(SharedCarousel); export default withTranslation()(withLanguage(SharedCarousel));

11
src/services/CategoryService.js
View File

@@ -29,9 +29,16 @@ class CategoryService {
} }
return new Promise((resolve) => { return new Promise((resolve) => {
window.socketManager.emit("categoryList", {categoryId: categoryId, language: language}, (response) => { window.socketManager.emit("categoryList", {categoryId: categoryId, language: language, requestTranslation: language === "de" ? false : true}, (response) => {
console.log("CategoryService", cacheKey); console.log("CategoryService", cacheKey);
if (response.categoryTree) { if (response.translatedCategoryTree) {
if (!window.categoryCache) {
window.categoryCache = {};
}
window.categoryCache[cacheKey] = response.translatedCategoryTree;
console.log("mutex unlocked and returning new value");
resolve(response.translatedCategoryTree);
} else if (response.categoryTree) {
if (!window.categoryCache) { if (!window.categoryCache) {
window.categoryCache = {}; window.categoryCache = {};
} }