l-min-components 1.0.814 → 1.0.820

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.0.814",
+  "version": "1.0.820",
   "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, defaultLang, findText } =
+  const { textSchema, setDefaultLang, defaultLang, findText, isLoading, setIsLoading } =
     useTranslation();
   // //console.log(findText());
   return (
@@ -164,6 +164,8 @@ const AppMainLayout = () => {
           findText,
           defaultLang,
           setDefaultLang,
+          isLoading,
+          setIsLoading,
           setRightComponent,
           setRightLayout,
           generalData,

package/src/components/banner/index.jsx

@@ -25,8 +25,7 @@ const Banner = () => {
           {findText("Learn languages, anytime, anywhere.")}
         </BannerTitle>
         <BannerSubtitle>
-          {findText(`Join millions of users from all over the world to learn foreign
-          languages`)}
+          {findText(`Join millions of users from all over the world to learn foreign languages`)}
         </BannerSubtitle>
         <BannerImage src={BannerImg} alt="Banner" />
         <Button

package/src/components/header/index.jsx

@@ -23,7 +23,7 @@ import {
   CountryFlagGroup,
 } from "./index.styled";
 import useHeader from "./getHeaderDetails";
-import { OutletContext } from "..";
+import { FullPageLoader, OutletContext } from "..";
 import { useLocation } from "react-router-dom";
 import usFlag from "../../assets/images/usFlag.png";
 import LanguageDropdown from "./languageDropdown";
@@ -67,6 +67,8 @@ const HeaderComponent = (props) => {
     notificationMarkReadData,
     findText,
     defaultLang,
+    isLoading,
+    setIsLoading,
   } = useContext(OutletContext);
   const [selectedAccount, setSelectedAccount] = useState();
   const { setDefaultAccount, handleSetDefaultAccount } = useHeader();
@@ -391,12 +393,15 @@ const HeaderComponent = (props) => {
 
   return (
     <Navbar>
+      {isLoading && <FullPageLoader hasBackground={true} />}
+
       <img src={logo} alt="Learngual logo" />
       <Nav
         onClick={() => {
           setLanguageDropdown();
           setIsOpen();
-        }}>
+        }}
+      >
         <li>
           <a className={isHomePage() ? "active" : ""}>
             <BookIcon /> {getNavLinkLabel()}
@@ -421,7 +426,8 @@ const HeaderComponent = (props) => {
             className={
               window.location.pathname.includes("settings") ? "active" : ""
             }
-            style={{ cursor: "pointer" }}>
+            style={{ cursor: "pointer" }}
+          >
             <SettingIcon /> {findText("Settings")}
           </a>
         </li>
@@ -435,7 +441,8 @@ const HeaderComponent = (props) => {
             className={
               window.location.pathname.includes("notifications") ? "active" : ""
             }
-            style={{ cursor: "pointer" }}>
+            style={{ cursor: "pointer" }}
+          >
             {unreadNotificationData?.data?.count > 0 ? (
               <NotificationIcon />
             ) : (
@@ -450,7 +457,8 @@ const HeaderComponent = (props) => {
         onClick={() => {
           setLanguageDropdown();
           setIsOpen();
-        }}>
+        }}
+      >
         {!isDeveloper && ( // when developer and on staging, don't show
           <SearchInputGroup>
             <SearchIcon />
@@ -479,7 +487,8 @@ const HeaderComponent = (props) => {
             onClick={() => {
               setLanguageDropdown(!languageDropdown);
               setIsOpen();
-            }}>
+            }}
+          >
             <img src={currentFlag || usFlag} alt="" />
             <ArrowDownIcon />
           </div>
@@ -497,7 +506,8 @@ const HeaderComponent = (props) => {
               setIsOpen(!isOpen);
               setLanguageDropdown();
             }}
-            ref={secondContainerRef}>
+            ref={secondContainerRef}
+          >
             <div className="user-img-container">
               <img
                 src={selectedAccount?.profile_photo?.url || avatar}

package/src/components/header/languageDropdown.jsx

@@ -21,8 +21,15 @@ import { DebounceInput } from "react-debounce-input";
  *
  */
 const LanguageDropdown = ({ languageDropdown, setLanguageDropdown }) => {
-  const { setGeneralData, generalData, defaultLang, setDefaultLang, findText } =
-    useContext(OutletContext);
+  const {
+    setGeneralData,
+    generalData,
+    defaultLang,
+    setDefaultLang,
+    findText,
+    isLoading,
+    setIsLoading,
+  } = useContext(OutletContext);
   const languagesData = [
     {
       name: "English",
@@ -104,12 +111,17 @@ const LanguageDropdown = ({ languageDropdown, setLanguageDropdown }) => {
           filteredData.length > 0 &&
           filteredData?.map((item, index) => (
             <p
+              key={index}
               className="language_dropdown_item"
               onClick={() => {
                 setLanguageDropdown();
                 setDefaultLang(item?.slug);
+                item?.slug === defaultLang
+                  ? setIsLoading(false)
+                  : setIsLoading(true);
                 localStorage.setItem("defaultLang", JSON.stringify(item));
-              }}>
+              }}
+            >
               <img src={item?.flag} alt="" /> <span>{item?.name}</span>
             </p>
           ))}
@@ -118,12 +130,17 @@ const LanguageDropdown = ({ languageDropdown, setLanguageDropdown }) => {
           <>
             {languagesData?.map((item, idx) => (
               <p
+                key={idx}
                 className="language_dropdown_item"
                 onClick={() => {
                   setLanguageDropdown();
                   setDefaultLang(item?.slug);
+                  item?.slug === defaultLang
+                    ? setIsLoading(false)
+                    : setIsLoading(true);
                   localStorage.setItem("defaultLang", JSON.stringify(item));
-                }}>
+                }}
+              >
                 <img src={item?.flag} alt="" />{" "}
                 <span>{findText(`${item?.name}`)}</span>
               </p>

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

@@ -13,7 +13,7 @@ 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 "..";
+import { FullPageLoader, OutletContext } from "..";
 import useTranslation from "../../hooks/useTranslation";
 
 /**
@@ -88,6 +88,7 @@ const HeaderComponentTwo = (props) => {
         setLanguageDropdown();
       }}
     >
+      {props?.isLoading && <FullPageLoader hasBackground={true} />}
       <img src={logo} alt="Learngual logo" onClick={handleLogoClick} />
       {/* <Nav2>
         <li>
@@ -119,8 +120,13 @@ const HeaderComponentTwo = (props) => {
             <ul className="dropdown_list" ref={containerRef}>
               {languagesData?.map((item, idx) => (
                 <li
+                  key={idx}
                   onClick={() => {
                     setLanguageDropdown();
+                    props.setIsLoading(true)
+                    item?.slug === props?.defaultLang
+                    ? props?.setIsLoading(false)
+                    : props?.setIsLoading(true);
                     props?.setDefaultLang(item?.slug);
                     localStorage.setItem("defaultLang", JSON.stringify(item));
                   }}

package/src/components/index.js

@@ -50,4 +50,4 @@ export { default as GraphMap } from './GraphMap';
 export { default as AdminRolesPermissions } from './AdminRolesPermission';
 export { default as AdminCreateRolesPermissions } from './AdminRolesPermission/create';
 export { default as MobileLayout } from './mobileLayout';
-
+export { default as useTranslation } from '../hooks/useTranslation'

package/src/hooks/useTranslation.jsx

@@ -7,18 +7,16 @@ const useTranslation = () => {
   const screenId = btoa(window.location.href);
   const value = JSON?.parse(localStorage.getItem("defaultLang"));
 
-  const [defaultLang, setDefaultLang] = useState(value?.slug ?? "en");
+  const [defaultLang, setDefaultLang] = useState(value?.slug);
+  const [isLoading, setIsLoading] = useState(false);
   /**
    * @type {{key: string; value: string; updatedAt: string; screenId: string}[]}
    */
   const textSchema = useLiveQuery(
     async () =>
-      db[defaultLang.toLowerCase()]
-        .where("screenId")
-        .equals(screenId)
-        .toArray(),
+      db[defaultLang?.toLowerCase()]?.toArray(),
     [defaultLang]
-  );
+  ) ?? []
   const findText = useCallback(
     (str, kwarg = {}) => {
       // add text to db if not exist
@@ -37,13 +35,13 @@ const useTranslation = () => {
         (x, y) => ({ ...x, [y.key]: y.value }),
         {}
       );
-      return schema[str] ?? str;
+      return schema[str];
     },
     [textSchema, defaultLang]
   );
 
   useEffect(() => {
-    loadTranslations(defaultLang);
+    loadTranslations(defaultLang, setIsLoading);
   }, [defaultLang]);
 
   return {
@@ -52,6 +50,8 @@ const useTranslation = () => {
     setDefaultLang,
     defaultLang,
     findText,
+    isLoading,
+    setIsLoading
   };
 };
 

package/src/hooks/utils/translation.js

@@ -1,7 +1,7 @@
 import { db } from "./db";
 import axios from "./axiosConfig";
 
-async function loadTranslations(language = "ko") {
+async function loadTranslations(language = "ko", setIsLoading) {
   await new Promise((resolve) => {
     //check if loading else resolve
     if (document.readyState === "complete") {
@@ -16,7 +16,7 @@ async function loadTranslations(language = "ko") {
    * @typedef {{text: string; screenId: string; updatedAt: string}} WORDS
    * @type {WORDS[]}
    */
-  const words = await db.words.where({ screenId }).toArray();
+  const words = await db.words.toArray();
   const texts = words.map((x) => x.text); // list of texts
 
   /**
@@ -28,6 +28,8 @@ async function loadTranslations(language = "ko") {
   /**
    * @type {{ data: {has_translated: boolean; result: string[]} }}
    */
+
+  try {
   const res = await axios({
     url: "/iam/v1/utils/translate/",
     method: "POST",
@@ -54,6 +56,12 @@ async function loadTranslations(language = "ko") {
   );
 
   return translations;
+  
+  } catch (error) {
+    console.error("clg Error fetching data:", error);
+  } finally {
+    setIsLoading(false);
+  }
 }
 
 export function extractBracedText(text) {