From 65ffc1542f6ac0e9a23ec43edb6656a905db4486 Mon Sep 17 00:00:00 2001
From: sebseb7 <sebgreenbus@gmail.com>
Date: Fri, 18 Jul 2025 17:20:51 +0200
Subject: [PATCH] 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.

---
 src/components/SharedCarousel.js | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

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