l-min-components 1.0.968 → 1.0.979

package/package.json

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

package/src/components/header/index.jsx

@@ -17,7 +17,7 @@ import {
   SearchInputGroup,
   SearchInput,
   UserProfile,
-  Help
+  Help,
 } from "./index.styled";
 import useHeader from "./getHeaderDetails";
 import { FullPageLoader, OutletContext } from "..";
@@ -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";
 
 /**
@@ -62,14 +62,11 @@ const HeaderComponent = (props) => {
     retrieveUserDetailsData,
     handleRetrieveUserDetails,
     updateUserAccountData,
-    handleUpdateUserAccount
+    handleUpdateUserAccount,
   } = useHeader();
   const { pathname } = useLocation();
-  const {
-    setGeneralData,
-    generalData,
-    notificationMarkReadData,
-  } = useContext(OutletContext);
+  const { setGeneralData, generalData, notificationMarkReadData } =
+    useContext(OutletContext);
   const [selectedAccount, setSelectedAccount] = useState();
   const { setDefaultAccount, handleSetDefaultAccount } = useHeader();
 
@@ -81,7 +78,6 @@ const HeaderComponent = (props) => {
     handleGetUnreadNotification();
   }, []);
 
-
   // Merge the notification_count into the results data using find
 
   const allUserAccountsDetail = userAccountsDetail?.data?.results.map(
@@ -263,6 +259,10 @@ const HeaderComponent = (props) => {
             : ".learngual.com"
         }; path=/; expires=${date.toUTCString()};`;
 
+      localStorage.setItem(
+        "defaultLang", (getDefaultAccount?.data?.language)
+      );
+
       setSelectedAccount(getDefaultAccount?.data);
     }
   }, [getDefaultAccount?.data]);
@@ -373,7 +373,7 @@ const HeaderComponent = (props) => {
     websocket2.addEventListener("message", handler, { passive: true });
 
     return () => {
-    websocket2.removeEventListener("message", handler);
+      websocket2.removeEventListener("message", handler);
       //console.log("room websocket closed");
     };
   }, []);
@@ -391,25 +391,12 @@ const HeaderComponent = (props) => {
   const isPendingDelete =
     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>
-
       <img src={logo} alt="Learngual logo" />
       <Nav
         onClick={() => {
@@ -483,20 +470,21 @@ const HeaderComponent = (props) => {
             {props.findText("Notifications")}
           </a>
         </li>
-        <li style={{marginLeft: "20%", cursor: "pointer"}}>
-          <a 
-     onClick={() => {
-      window.location.href =
-        "https://559staging.learngual.com/help-center";
-    }}
-           className={
+        <li style={{ marginLeft: "20%", cursor: "pointer" }}>
+          <a
+            onClick={() => {
+              window.location.href =
+                "https://559staging.learngual.com/help-center";
+            }}
+            className={
               window.location.pathname.includes("help-center") ? "active" : ""
-            }>
-          <QuestionMark /> {props?.findText("Help")}
+            }
+          >
+            <QuestionMark /> {props?.findText("Help")}
           </a>
         </li>
       </Nav>
-{/* 
+      {/* 
       <Help>
          <QuestionMark />
       Help
@@ -539,7 +527,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

@@ -1,17 +1,13 @@
-import React, {
-  useState,
-  useEffect,
-  useRef,
-  useCallback,
-} from "react";
+import React, { useState, useEffect, useRef, useCallback } from "react";
 import logo from "./assets/images/logo.png";
-import { Navbar2, NavGroup2, } from "./index.styled";
+import { Navbar2, NavGroup2 } from "./index.styled";
 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 { FullPageLoader } from "..";
+import { languagesData, selectedLanguageData } from "./languages";
 
 /**
  * @param {{
@@ -23,14 +19,13 @@ import { FullPageLoader } from "..";
  *
  */
 const HeaderComponentTwo = (props) => {
-
   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 value = localStorage.getItem("defaultLang");
 
+  
   const navigate = useNavigate();
   const location = useLocation();
   useEffect(() => {
@@ -66,26 +61,14 @@ const HeaderComponentTwo = (props) => {
     };
   }, [setLanguageDropdown]);
 
-  const languagesData = [
-    {
-      name: "English",
-      flag: usFlag,
-      slug: "en",
-    },
-    {
-      name: "Korean",
-      flag: koreanFlag,
-      slug: "ko",
-    },
-  ];
 
   const handleLanguageChange = async (item) => {
     setLanguageDropdown();
     props.setDefaultLang(item?.slug);
     item?.slug === props.defaultLang
-      ? props.setIsTranslationsLoading(false)
-      : props.setIsTranslationsLoading(true);
-    localStorage.setItem("defaultLang", JSON?.stringify(item));
+      ? props?.setIsTranslationsLoading(false)
+      : props?.setIsTranslationsLoading(true);
+    localStorage.setItem("defaultLang", (item?.slug));
     window.location.reload();
   };
 
@@ -119,16 +102,13 @@ const HeaderComponentTwo = (props) => {
             className="drop_holder"
             onClick={() => setLanguageDropdown(!languageDropdown)}
           >
-            <img src={currentFlag || usFlag} alt="" />
+            <img src={selectedLanguageData[value] || usFlag} alt="" />
             <ArrowDownIcon />
           </div>
           {languageDropdown && (
             <ul className="dropdown_list" ref={containerRef}>
               {languagesData?.map((item, idx) => (
-                <li
-                  key={idx}
-                  onClick={() => handleLanguageChange(item)}
-                >
+                <li key={idx} onClick={() => handleLanguageChange(item)}>
                   <img src={item?.flag} alt="" /> <span>{item?.name}</span>
                 </li>
               ))}

package/src/components/sideBar/sideMenu/index.jsx

@@ -49,7 +49,7 @@ const SideMenu = ({
     generalData?.selectedAccount?.type === "PERSONAL" &&
     window.location.hostname.includes("staging");
 
-    // When pending delete and on staging
+  // When pending delete and on staging
   const isPendingDelete =
     generalData?.selectedAccount?.pending_delete === true &&
     window.location.hostname.includes("staging");
@@ -346,7 +346,7 @@ const SideMenu = ({
         <IconContainer>{/* <CiLogout /> */}</IconContainer>
         {/* <TextContainer minimal={isOpen}>Log out</TextContainer> */}
       </LogoutButtonContainer>
-      <div className="toggle" onClick={onToggle}>
+      <div className="toggle" onClick={onToggle} style={{ cursor: "pointer" }}>
         {isOpen ? <IoIosArrowBack /> : <IoIosArrowForward />}
       </div>
     </SideMenuContainer>

package/src/hooks/useTranslation.jsx

@@ -2,9 +2,9 @@ import React, { useCallback, 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 [defaultLang, setDefaultLang] = useState(value ?? "en");
   const [translations, setTranslations] = useState({}); // returned translation from backend
   const [isTranslationsLoading, setIsTranslationsLoading] = useState(true)