l-min-components 1.0.976 → 1.0.982

package/package.json

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

package/src/components/header/index.jsx

@@ -26,7 +26,7 @@ import usFlag from "../../assets/images/usFlag.png";
 import LanguageDropdown from "./languageDropdown";
 import { getCookie } from "./getCookies";
 // import { data } from "../GraphMap/data";
-import { languagesData } from "./languages";
+import { languagesData, selectedLanguageData } from "./languages";
 import { QuestionMark } from "./assets/svg/questionMark";
 
 /**
@@ -259,10 +259,7 @@ const HeaderComponent = (props) => {
             : ".learngual.com"
         }; path=/; expires=${date.toUTCString()};`;
 
-      localStorage.setItem(
-        "defaultLang",
-        JSON?.stringify(getDefaultAccount?.data?.language)
-      );
+      localStorage.setItem("defaultLang", getDefaultAccount?.data?.language);
 
       setSelectedAccount(getDefaultAccount?.data);
     }
@@ -393,20 +390,7 @@ const HeaderComponent = (props) => {
     generalData?.selectedAccount?.pending_delete === true &&
     window.location.hostname.includes("staging");
 
-  const [currentFlag, setCurrentFlag] = useState(usFlag);
-  const value = JSON?.parse(localStorage?.getItem("defaultLang"));
-  const currentFlagIcon = value?.flag;
-  const selectedLanguage = languagesData?.find(
-    (lang) => lang?.slug === props?.defaultLang
-  );
-
-  useEffect(() => {
-    if (currentFlagIcon) {
-      setCurrentFlag(currentFlagIcon);
-    } else {
-      setCurrentFlag(usFlag);
-    }
-  }, []);
+  const value = localStorage.getItem("defaultLang");
 
   return (
     <Navbar>
@@ -540,7 +524,7 @@ const HeaderComponent = (props) => {
               setIsOpen();
             }}
           >
-            <img src={currentFlag || usFlag} alt="" />
+            <img src={selectedLanguageData[value] || usFlag} alt="" />
             <ArrowDownIcon />
           </div>
           {languageDropdown && (

package/src/components/header/languageDropdown.jsx

@@ -10,6 +10,7 @@ import { RiCloseCircleFill } from "react-icons/ri";
 import { HiSearch } from "react-icons/hi";
 import { InputSearchIcon } from "./assets/svg/search";
 import { DebounceInput } from "react-debounce-input";
+import { languagesData } from "./languages";
 
 /**
  * @param {{
@@ -37,23 +38,9 @@ const LanguageDropdown = ({
     handleUpdateUserAccount,
   } = useHeader();
 
-  const languagesData = [
-    {
-      name: "English",
-      flag: usFlag,
-      slug: "en",
-    },
-    {
-      name: "Korean",
-      flag: koreanFlag,
-      slug: "ko",
-    },
-  ];
   const [filteredData, setFilteredData] = useState([]);
   const [isSearch, setIsSearch] = useState(false);
   const containerRef = useRef(null);
-  const value = JSON?.parse(localStorage.getItem("defaultLang"));
-  const currentFlag = value?.flag;
 
   const handleFilter = (event) => {
     const searchWord = event.target.value;
@@ -99,7 +86,7 @@ const LanguageDropdown = ({
     item?.slug === defaultLang
       ? setIsTranslationsLoading(false)
       : setIsTranslationsLoading(true);
-    localStorage.setItem("defaultLang", JSON?.stringify(item));
+    localStorage.setItem("defaultLang", (item?.slug));
     window.location.reload();
   };
   

package/src/components/header/languages.js

@@ -12,4 +12,9 @@ export const languagesData = [
       flag: koreanFlag,
       slug: "ko",
     },
-  ];
+  ];
+
+export const selectedLanguageData = {
+  en: usFlag,
+  ko: koreanFlag
+}

package/src/components/header/login-header.jsx

@@ -7,6 +7,7 @@ import { useLocation, useNavigate } from "react-router-dom";
 import usFlag from "../../assets/images/usFlag.png";
 import koreanFlag from "../../assets/images/koreaFlag.png";
 import { FullPageLoader } from "..";
+import { languagesData, selectedLanguageData } from "./languages";
 
 /**
  * @param {{
@@ -22,9 +23,9 @@ const HeaderComponentTwo = (props) => {
   const [isOpen, setIsOpen] = useState(false);
   const [searchResultOpen, setSearchResultOpen] = useState(false);
   const [languageDropdown, setLanguageDropdown] = useState();
-  const value = JSON?.parse(localStorage.getItem("defaultLang"));
-  const currentFlag = value?.flag;
+  const value = localStorage.getItem("defaultLang");
 
+  
   const navigate = useNavigate();
   const location = useLocation();
   useEffect(() => {
@@ -60,18 +61,6 @@ const HeaderComponentTwo = (props) => {
     };
   }, [setLanguageDropdown]);
 
-  const languagesData = [
-    {
-      name: "English",
-      flag: usFlag,
-      slug: "en",
-    },
-    {
-      name: "Korean",
-      flag: koreanFlag,
-      slug: "ko",
-    },
-  ];
 
   const handleLanguageChange = async (item) => {
     setLanguageDropdown();
@@ -79,7 +68,7 @@ const HeaderComponentTwo = (props) => {
     item?.slug === props.defaultLang
       ? props?.setIsTranslationsLoading(false)
       : props?.setIsTranslationsLoading(true);
-    localStorage.setItem("defaultLang", JSON?.stringify(item));
+    localStorage.setItem("defaultLang", (item?.slug));
     window.location.reload();
   };
 
@@ -113,7 +102,7 @@ const HeaderComponentTwo = (props) => {
             className="drop_holder"
             onClick={() => setLanguageDropdown(!languageDropdown)}
           >
-            <img src={currentFlag || usFlag} alt="" />
+            <img src={selectedLanguageData[value] || usFlag} alt="" />
             <ArrowDownIcon />
           </div>
           {languageDropdown && (

package/src/hooks/useTranslation.jsx

@@ -1,13 +1,21 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useContext, useEffect, useState } from "react";
 import useAxios from "axios-hooks";
 
 const useTranslation = (initialSentences = []) => {
-  const value = JSON?.parse(localStorage?.getItem("defaultLang"));
+  const value = localStorage?.getItem("defaultLang");
 
-  const [defaultLang, setDefaultLang] = useState(value?.slug ?? "en");
-  const [translations, setTranslations] = useState({}); // returned translation from backend
-  const [isTranslationsLoading, setIsTranslationsLoading] = useState(true)
+  useEffect(() => {
+    if (value) {
+      console.log("====================================");
+      console.log(value, "bfr");
+      console.log("====================================");
+      setDefaultLang(value);
+    }
+  }, [value]);
 
+  const [defaultLang, setDefaultLang] = useState(value ?? "en");
+  const [translations, setTranslations] = useState({}); // returned translation from backend
+  const [isTranslationsLoading, setIsTranslationsLoading] = useState(true);
 
   const findText = useCallback(
     (word, kwargs = {}) => {
@@ -47,9 +55,8 @@ const useTranslation = (initialSentences = []) => {
     }
   };
 
-
   useEffect(() => {
-      handleTranslate(defaultLang, initialSentences);
+    handleTranslate(defaultLang, initialSentences);
   }, [defaultLang]);
 
   useEffect(() => {
@@ -66,13 +73,11 @@ const useTranslation = (initialSentences = []) => {
   }, [translateData?.data]);
 
   useEffect(() => {
-
-    if(Object.keys(translations)?.length > 0){
-        setIsTranslationsLoading(false)
-      }
-  }, [translations])
-  console.log("translateData", translateData)
-
+    if (Object.keys(translations)?.length > 0) {
+      setIsTranslationsLoading(false);
+    }
+  }, [translations]);
+  console.log("translateData", translateData);
 
   return {
     defaultLang,
@@ -82,7 +87,7 @@ const useTranslation = (initialSentences = []) => {
     translations,
     findText,
     isTranslationsLoading,
-    setIsTranslationsLoading
+    setIsTranslationsLoading,
   };
 };