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

Refine language-specific category fallback in SharedCarousel: Updated the fallback logic to only use the old cache format for German language requests, preventing incorrect category displays for English users. Enhanced language state management to ensure synchronization with i18n initialization.

Browse Source
This commit is contained in:
sebseb7
2025-07-18 17:20:51 +02:00
parent 8bc80c872d
commit 65ffc1542f
1 changed files with 15 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/SharedCarousel.js
View File

@@ -48,8 +48,9 @@ const initializeCategories = (language = 'en') => {
} }
} }
// Fallback to old cache format if language-specific cache doesn't exist // Only fallback to old cache format if we're looking for German (default language)
if (productCache && productCache["categoryTree_209"]) { // This prevents showing German categories when user wants English categories
if (language === 'de' && productCache && productCache["categoryTree_209"]) {
const cached = productCache["categoryTree_209"]; const cached = productCache["categoryTree_209"];
if (cached.categoryTree) { if (cached.categoryTree) {
return processCategoryTree(cached.categoryTree); return processCategoryTree(cached.categoryTree);
@@ -64,13 +65,20 @@ const SharedCarousel = () => {
const context = useContext(SocketContext); const context = useContext(SocketContext);
const { t, i18n } = useTranslation(); const { t, i18n } = useTranslation();
const [rootCategories, setRootCategories] = useState([]); const [rootCategories, setRootCategories] = useState([]);
const [currentLanguage, setCurrentLanguage] = useState(i18n.language); const [currentLanguage, setCurrentLanguage] = useState(i18n.language || 'de');
useEffect(() => { useEffect(() => {
const initialCategories = initializeCategories(currentLanguage); const initialCategories = initializeCategories(currentLanguage);
setRootCategories(initialCategories); setRootCategories(initialCategories);
}, [currentLanguage]); }, [currentLanguage]);
// Also listen for i18n ready state
useEffect(() => {
if (i18n.isInitialized && i18n.language !== currentLanguage) {
setCurrentLanguage(i18n.language);
}
}, [i18n.isInitialized, i18n.language, currentLanguage]);
// Listen for language changes // Listen for language changes
useEffect(() => { useEffect(() => {
const handleLanguageChange = (lng) => { const handleLanguageChange = (lng) => {
@@ -108,7 +116,8 @@ const SharedCarousel = () => {
} catch (err) { } catch (err) {
console.error(err); console.error(err);
} }
setRootCategories(categoryTreeToUse.children || []); const newCategories = categoryTreeToUse.children || [];
setRootCategories(newCategories);
} }
} else if (response && response.categoryTree) { } else if (response && response.categoryTree) {
// Fallback for old response format // Fallback for old response format
@@ -122,7 +131,8 @@ const SharedCarousel = () => {
} catch (err) { } catch (err) {
console.error(err); console.error(err);
} }
setRootCategories(response.categoryTree.children || []); const newCategories = response.categoryTree.children || [];
setRootCategories(newCategories);
} }
}); });
} }