l-min-components 1.0.753 → 1.0.761

package/package.json

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

package/src/components/header/index.jsx

@@ -363,7 +363,9 @@ const HeaderComponent = (props) => {
     handleGetUnreadNotification();
     handleGeneralNotificationCount();
   }, [notificationMarkReadData?.response]);
-
+  const value = JSON?.parse(localStorage.getItem("defaultLang"));
+  const currentFlag = value?.flag;
+  
   return (
     <Navbar>
       <img src={logo} alt="Learngual logo" />
@@ -455,7 +457,7 @@ const HeaderComponent = (props) => {
               setLanguageDropdown(!languageDropdown);
               setIsOpen();
             }}>
-            <img src={usFlag} alt="" />
+            <img src={currentFlag || usFlag} alt="" />
             <ArrowDownIcon />
           </div>
           {languageDropdown && (

package/src/components/header/languageDropdown.jsx

@@ -21,13 +21,25 @@ import { DebounceInput } from "react-debounce-input";
  *
  */
 const LanguageDropdown = ({ languageDropdown, setLanguageDropdown }) => {
-  const { setGeneralData, generalData, setDefaultLang, findText } =
+  const { setGeneralData, generalData, defaultLang, setDefaultLang, findText } =
     useContext(OutletContext);
+  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 sampleSuggestions = ["English", "Spanish"];
+  const value = JSON?.parse(localStorage.getItem("defaultLang"));
+  const currentFlag = value?.flag;
 
   const handleFilter = (event) => {
     const searchWord = event.target.value;
@@ -62,19 +74,6 @@ const LanguageDropdown = ({ languageDropdown, setLanguageDropdown }) => {
     };
   }, [setLanguageDropdown]);
 
-  const languagesData = [
-    {
-      name: "English",
-      flag: usFlag,
-      slug: "en",
-    },
-    {
-      name: "Korean",
-      flag: koreanFlag,
-      slug: "ko",
-    },
-  ];
-
   return (
     <LanguageDropdownContainer ref={containerRef}>
       <div className="ldc_header">
@@ -109,7 +108,7 @@ const LanguageDropdown = ({ languageDropdown, setLanguageDropdown }) => {
               onClick={() => {
                 setLanguageDropdown();
                 setDefaultLang(item?.slug);
-                localStorage.setItem("defaultLang", item?.slug);
+                localStorage.setItem("defaultLang", JSON.stringify(item));
               }}
             >
               <img src={item?.flag} alt="" /> <span>{item?.name}</span>
@@ -124,7 +123,7 @@ const LanguageDropdown = ({ languageDropdown, setLanguageDropdown }) => {
                 onClick={() => {
                   setLanguageDropdown();
                   setDefaultLang(item?.slug);
-                  localStorage.setItem("defaultLang", item?.slug);
+                  localStorage.setItem("defaultLang", JSON.stringify(item));
                 }}
               >
                 <img src={item?.flag} alt="" />{" "}

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

@@ -6,6 +6,7 @@ import { ArrowDownIcon } from "./assets/svg/arrow-down";
 import ButtonComponent from "../button";
 import { useLocation, useNavigate } from "react-router-dom";
 import usFlag from "../../assets/images/usFlag.png";
+import koreanFlag from "../../assets/images/koreaFlag.png";
 import { OutletContext } from "..";
 
 /**
@@ -24,6 +25,8 @@ 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 navigate = useNavigate();
   const location = useLocation();
@@ -103,7 +106,7 @@ const HeaderComponentTwo = (props) => {
             className="drop_holder"
             onClick={() => setLanguageDropdown(!languageDropdown)}
           >
-            <img src={usFlag} alt="" />
+            <img src={currentFlag || usFlag} alt="" />
             <ArrowDownIcon />
           </div>
           {languageDropdown && (
@@ -113,7 +116,7 @@ const HeaderComponentTwo = (props) => {
                   onClick={() => {
                     setLanguageDropdown();
                     setDefaultLang(item?.slug);
-                    localStorage.setItem("defaultLang", item?.slug);
+                    localStorage.setItem("defaultLang", JSON.stringify(item));
                   }}
                 >
                   <img src={item?.flag} alt="" /> <span>{item?.name}</span>

package/src/hooks/useTranslation.jsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import loadTranslations from "./utils/translation";
 
 const useTranslation = () => {