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

feat(i18n): enhance data fetching and caching with language support

Browse Source 
- Update data-fetching functions to include language and translation request parameters for improved internationalization.
- Modify caching logic in Content and GrowTentKonfigurator components to utilize language-aware cache keys.
- Ensure ProductDetailPage retrieves cached data based on the current language, enhancing user experience across different locales.
- Integrate language handling in various components to maintain consistency in data management and rendering.
This commit is contained in:
sebseb7
2025-11-15 08:51:23 +01:00
parent 8649408957
commit 8ea2e50432
5 changed files with 82 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/pages/GrowTentKonfigurator.js
View File

@@ -22,7 +22,7 @@ import { Link } from 'react-router-dom';
import IconButton from '@mui/material/IconButton';
import ZoomInIcon from '@mui/icons-material/ZoomIn';
function setCachedCategoryData(categoryId, data) {
function setCachedCategoryData(categoryId, data, language = 'de') {
if (!window.productCache) {
window.productCache = {};
}
@@ -31,9 +31,10 @@ function setCachedCategoryData(categoryId, data) {
}
try {
const cacheKey = `categoryProducts_${categoryId}`;
const cacheKey = `categoryProducts_${categoryId}_${language}`;
if(data.products) for(const product of data.products) {
window.productDetailCache[product.id] = product;
const productCacheKey = `product_${product.id}_${language}`;
window.productDetailCache[productCacheKey] = product;
}
window.productCache[cacheKey] = {
...data,
@@ -43,13 +44,13 @@ function setCachedCategoryData(categoryId, data) {
console.error('Error writing to cache:', err);
}
}
function getCachedCategoryData(categoryId) {
function getCachedCategoryData(categoryId, language = 'de') {
if (!window.productCache) {
window.productCache = {};
}
try {
const cacheKey = `categoryProducts_${categoryId}`;
const cacheKey = `categoryProducts_${categoryId}_${language}`;
const cachedData = window.productCache[cacheKey];
if (cachedData) {
@@ -167,7 +168,8 @@ class GrowTentKonfigurator extends Component {
}
}
fetchCategoryData(categoryId) {
const cachedData = getCachedCategoryData(categoryId);
const currentLanguage = this.props.languageContext?.currentLanguage || this.props.i18n?.language || 'de';
const cachedData = getCachedCategoryData(categoryId, currentLanguage);
if (cachedData) {
this.setState(prevState => ({
categoryLoadStatus: {
@@ -183,7 +185,7 @@ class GrowTentKonfigurator extends Component {
window.socketManager.off(`productList:${categoryId}`);
window.socketManager.on(`productList:${categoryId}`,(response) => {
setCachedCategoryData(categoryId, response);
setCachedCategoryData(categoryId, response, currentLanguage);
this.setState(prevState => ({
categoryLoadStatus: {
...prevState.categoryLoadStatus,
@@ -191,8 +193,6 @@ class GrowTentKonfigurator extends Component {
}
}));
});
const currentLanguage = this.props.languageContext?.currentLanguage || this.props.i18n?.language || 'de';
window.socketManager.emit(
"getCategoryProducts",
{ categoryId: categoryId, language: currentLanguage, requestTranslation: currentLanguage === 'de' ? false : true },
@@ -202,10 +202,11 @@ class GrowTentKonfigurator extends Component {
checkCacheValidity() {
const categories = ["Zelte", "Lampen", "Abluft-sets", "Set-zubehoer"];
const currentLanguage = this.props.languageContext?.currentLanguage || this.props.i18n?.language || 'de';
let needsUpdate = false;
const newStatus = { ...this.state.categoryLoadStatus };
for (const categoryId of categories) {
if (newStatus[categoryId] && !getCachedCategoryData(categoryId)) {
if (newStatus[categoryId] && !getCachedCategoryData(categoryId, currentLanguage)) {
console.log(`Refetching ${categoryId} due to cache miss/expiry`);
newStatus[categoryId] = false;
needsUpdate = true;
@@ -275,7 +276,8 @@ class GrowTentKonfigurator extends Component {
}
// Extras
const extrasData = getCachedCategoryData('Set-zubehoer');
const currentLanguage = this.props.languageContext?.currentLanguage || this.props.i18n?.language || 'de';
const extrasData = getCachedCategoryData('Set-zubehoer', currentLanguage);
if (extrasData && Array.isArray(extrasData.products)) {
this.state.selectedExtras.forEach(extraId => {
const extra = extrasData.products.find(e => e.id === extraId);
@@ -398,7 +400,8 @@ class GrowTentKonfigurator extends Component {
// Get lamps for selected tent shape
getLampsForTentShape(shapeId) {
const cachedData = getCachedCategoryData('Lampen');
const currentLanguage = this.props.languageContext?.currentLanguage || this.props.i18n?.language || 'de';
const cachedData = getCachedCategoryData('Lampen', currentLanguage);
if (!cachedData || !cachedData.products || !cachedData.attributes) {
return [];
}
@@ -408,7 +411,8 @@ class GrowTentKonfigurator extends Component {
// Get ventilation products for selected tent shape
getVentilationForTentShape(shapeId) {
const cachedData = getCachedCategoryData('Abluft-sets');
const currentLanguage = this.props.languageContext?.currentLanguage || this.props.i18n?.language || 'de';
const cachedData = getCachedCategoryData('Abluft-sets', currentLanguage);
if (!cachedData || !cachedData.products || !cachedData.attributes) {
return [];
}
@@ -523,7 +527,8 @@ class GrowTentKonfigurator extends Component {
// Get real tent products for the selected shape
getTentsForShape(shapeId) {
const cachedData = getCachedCategoryData('Zelte');
const currentLanguage = this.props.languageContext?.currentLanguage || this.props.i18n?.language || 'de';
const cachedData = getCachedCategoryData('Zelte', currentLanguage);
if (!cachedData || !cachedData.products || !cachedData.attributes) {
return [];
}
@@ -572,8 +577,9 @@ class GrowTentKonfigurator extends Component {
itemCount++;
}
}
const extrasData = getCachedCategoryData('Set-zubehoer');
const currentLanguage = this.props.languageContext?.currentLanguage || this.props.i18n?.language || 'de';
const extrasData = getCachedCategoryData('Set-zubehoer', currentLanguage);
if (!extrasData || !Array.isArray(extrasData.products)) {
console.warn('Extras data not available; skipping extras price in total calculation');
} else {
@@ -650,8 +656,9 @@ class GrowTentKonfigurator extends Component {
itemCount++;
}
}
const extrasData = getCachedCategoryData('Set-zubehoer');
const currentLanguage = this.props.languageContext?.currentLanguage || this.props.i18n?.language || 'de';
const extrasData = getCachedCategoryData('Set-zubehoer', currentLanguage);
if (!extrasData || !Array.isArray(extrasData.products)) {
console.warn('Extras data not available; skipping extras in savings calculation');
} else {
@@ -1156,7 +1163,8 @@ class GrowTentKonfigurator extends Component {
);
}
const extrasData = getCachedCategoryData('Set-zubehoer');
const currentLanguage = this.props.languageContext?.currentLanguage || this.props.i18n?.language || 'de';
const extrasData = getCachedCategoryData('Set-zubehoer', currentLanguage);
if (!extrasData) {
return (
@@ -1212,7 +1220,8 @@ class GrowTentKonfigurator extends Component {
const selectedLight = availableLamps.find(l => l.id === selectedLightType);
const availableVentilation = this.state.selectedTentShape ? this.getVentilationForTentShape(this.state.selectedTentShape) : [];
const selectedVentilation = availableVentilation.find(v => v.id === selectedVentilationType && v.isDeliverable);
const extrasData = getCachedCategoryData('Set-zubehoer');
const currentLanguage = this.props.languageContext?.currentLanguage || this.props.i18n?.language || 'de';
const extrasData = getCachedCategoryData('Set-zubehoer', currentLanguage);
const selectedExtrasItems = Array.isArray(extrasData?.products)
? extrasData.products.filter(e => selectedExtras.includes(e.id))
: [];