l-min-components 1.0.757 → 1.0.765

package/package.json

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

package/src/components/AppMainLayout/index.jsx

@@ -153,7 +153,7 @@ const AppMainLayout = () => {
   const currentPlan = userPlanData?.data?.current_plan;
   const planState = userPlanData?.data?.state;
 
-  const { textSchema, setDefaultLang, findText } = useTranslation();
+  const { textSchema, setDefaultLang, defaultLang, findText } = useTranslation();
   // console.log(findText());
   return (
     textSchema && (
@@ -161,6 +161,7 @@ const AppMainLayout = () => {
         value={{
           textSchema,
           findText,
+          defaultLang,
           setDefaultLang,
           setRightComponent,
           setRightLayout,

package/src/components/header/index.jsx

@@ -61,7 +61,7 @@ const HeaderComponent = (props) => {
     handleGetNotification,
   } = useHeader();
   const { pathname } = useLocation();
-  const { setGeneralData, generalData, notificationMarkReadData, findText } =
+  const { setGeneralData, generalData, notificationMarkReadData, findText, defaultLang } =
     useContext(OutletContext);
   const [selectedAccount, setSelectedAccount] = useState();
   const { setDefaultAccount, handleSetDefaultAccount } = useHeader();
@@ -363,7 +363,9 @@ const HeaderComponent = (props) => {
     handleGetUnreadNotification();
     handleGeneralNotificationCount();
   }, [notificationMarkReadData?.response]);
-
+  const value = JSON?.parse(localStorage.getItem("defaultLang"));
+  const currentFlag = value?.flag;
+console.log("defaultLang", defaultLang)
   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

@@ -23,11 +23,23 @@ import { DebounceInput } from "react-debounce-input";
 const LanguageDropdown = ({ languageDropdown, setLanguageDropdown }) => {
   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);
-
-  console.log("object", defaultLang)
+  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

@@ -1,4 +1,10 @@
-import React, { useState, useEffect, useRef, useCallback, useContext } from "react";
+import React, {
+  useState,
+  useEffect,
+  useRef,
+  useCallback,
+  useContext,
+} from "react";
 import ReactFlagsSelect from "react-flags-select";
 import logo from "./assets/images/logo.png";
 import { Navbar2, NavGroup2, Nav2, CountryFlagGroup2 } from "./index.styled";
@@ -8,6 +14,7 @@ import { useLocation, useNavigate } from "react-router-dom";
 import usFlag from "../../assets/images/usFlag.png";
 import koreanFlag from "../../assets/images/koreaFlag.png";
 import { OutletContext } from "..";
+import useTranslation from "../../hooks/useTranslation";
 
 /**
  * @param {{
@@ -19,16 +26,17 @@ import { OutletContext } from "..";
  *
  */
 const HeaderComponentTwo = (props) => {
-  const { setGeneralData, generalData, setDefaultLang, findText } =
-  useContext(OutletContext);
+  const { textSchema, setDefaultLang, defaultLang, findText } = useTranslation();
+
   const [selected, setSelected] = useState("ES");
   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();
-  // console.log(location);
   useEffect(() => {
     setIsOpen(false);
   }, []);
@@ -104,7 +112,7 @@ const HeaderComponentTwo = (props) => {
             className="drop_holder"
             onClick={() => setLanguageDropdown(!languageDropdown)}
           >
-            <img src={usFlag} alt="" />
+            <img src={currentFlag || usFlag} alt="" />
             <ArrowDownIcon />
           </div>
           {languageDropdown && (
@@ -114,7 +122,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

@@ -2,10 +2,10 @@ import React, { useCallback, useEffect, useState } from "react";
 import loadTranslations from "./utils/translation";
 
 const useTranslation = () => {
-  const value = localStorage.getItem("defaultLang");
+  const value = JSON?.parse(localStorage.getItem("defaultLang"));
   const [textSchema, setTextSchema] = useState(null);
 
-  const [defaultLang, setDefaultLang] = useState(value || "en");
+  const [defaultLang, setDefaultLang] = useState(value?.slug || "en");
   const findText = useCallback((str) => textSchema[str] ?? str, [textSchema]);
 
   useEffect(() => {