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 Typography from "@mui/material/Typography";
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 CategoryBox from "./CategoryBox.js";
import { withTranslation } from 'react-i18next';
import { withLanguage } from '../i18n/withTranslation.js';
const ITEM_WIDTH = 130 + 16; // 130px width + 16px gap
const AUTO_SCROLL_SPEED = 0.5; // px per frame (~60fps, so ~30px/sec)
@@ -45,7 +46,7 @@ class SharedCarousel extends React.Component {
componentDidMount() {
this._isMounted = true;
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) {
this.originalCategories = response.children;
// 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() {
this._isMounted = false;
this.stopAutoScroll();
@@ -386,4 +404,4 @@ class SharedCarousel extends React.Component {
}
}
export default withTranslation()(SharedCarousel);
export default withTranslation()(withLanguage(SharedCarousel));