l-min-components 1.0.891 → 1.0.895

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.0.891",
+  "version": "1.0.895",
   "type": "module",
   "files": [
     "src/assets",

package/src/components/AppMainLayout/index.jsx

@@ -170,6 +170,7 @@ const AppMainLayout = () => {
     findText,
     translations,
     isTranslationsLoading,
+    setIsTranslationsLoading,
     translateData
   } = useTranslation(wordBank);
 
@@ -179,6 +180,8 @@ const AppMainLayout = () => {
         findText,
         wordBank,
         defaultLang,
+        isTranslationsLoading,
+        setIsTranslationsLoading,
         setDefaultLang,
         setRightComponent,
         setRightLayout,
@@ -215,7 +218,7 @@ const AppMainLayout = () => {
       ) : (
         <>
           {isTranslationsLoading && Object.keys(translations)?.length === 0 ? (
-            <h1> LOADING </h1>
+            <>  </>
           ) : (
             <Layout
               coming={coming}

package/src/components/header/index.jsx

@@ -67,7 +67,8 @@ const HeaderComponent = (props) => {
     setGeneralData,
     generalData,
     notificationMarkReadData,
-    findText
+    findText,
+    isTranslationsLoading
   } = useContext(OutletContext);
   const [selectedAccount, setSelectedAccount] = useState();
   const { setDefaultAccount, handleSetDefaultAccount } = useHeader();
@@ -417,7 +418,7 @@ const HeaderComponent = (props) => {
 
   return (
     <Navbar>
-      {translateData?.loading && <FullPageLoader hasBackground={true} />}
+      {isTranslationsLoading && <FullPageLoader hasBackground={true} />}
 
       <img src={logo} alt="Learngual logo" />
       <Nav

package/src/components/header/languageDropdown.jsx

@@ -25,9 +25,12 @@ const LanguageDropdown = ({ languageDropdown, setLanguageDropdown }) => {
     setGeneralData,
     generalData,
     wordBank,
+    findText,
     defaultLang,
     setDefaultLang,
+    setIsTranslationsLoading
   } = useContext(OutletContext);
+  
   const {
     retrieveUserDetailsData,
     handleRetrieveUserDetails,
@@ -35,9 +38,7 @@ const LanguageDropdown = ({ languageDropdown, setLanguageDropdown }) => {
     handleUpdateUserAccount,
   } = useHeader();
   const {
-    findText,
     translateData,
- 
     handleTranslate,
   } = useTranslation();
   
@@ -101,11 +102,13 @@ const LanguageDropdown = ({ languageDropdown, setLanguageDropdown }) => {
     setLanguageDropdown();
     setDefaultLang(item?.slug);
     // handleTranslate(item?.slug, wordBank)
-    // item?.slug === defaultLang
-    //   ? setIsLoading(false)
-    //   : setIsLoading(true);
+    item?.slug === defaultLang
+      ? setIsTranslationsLoading(false)
+      : setIsTranslationsLoading(true);
     localStorage.setItem("defaultLang", JSON.stringify(item));
     console.log("general id", generalData?.defaultAccount?.id)
+    console.log("🚀 ~ handleLanguageChange ~ item?.slug:", item?.slug, defaultLang)
+
 
   }
 

package/src/hooks/useTranslation.jsx

@@ -4,14 +4,14 @@ import useAxios from "axios-hooks";
 const useTranslation = (initialSentences = []) => {
   const value = JSON?.parse(localStorage.getItem("defaultLang"));
 
-  const [defaultLang, setDefaultLang] = useState(value?.slug ?? "ko");
+  const [defaultLang, setDefaultLang] = useState(value?.slug ?? "en");
   const [translations, setTranslations] = useState({}); // returned translation from backend
   const [isTranslationsLoading, setIsTranslationsLoading] = useState(true)
 
 
   const findText = useCallback(
     (word, kwargs = {}) => {
-      return formatSentence(translations[word], kwargs); // Return translated word or original word if not yet translated
+      return formatSentence(translations[word] || word, kwargs); // Return translated word or original word if not yet translated
     },
     [translations]
   );
@@ -78,6 +78,7 @@ const useTranslation = (initialSentences = []) => {
     translations,
     findText,
     isTranslationsLoading,
+    setIsTranslationsLoading
   };
 };