l-min-components 1.0.879 → 1.0.883

package/package.json

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

package/src/components/AppMainLayout/index.jsx

@@ -27,7 +27,6 @@ import useHeader from "../header/getHeaderDetails";
 import GracePeriod from "../deactivated";
 import MobileLayout from "../mobileLayout";
 import useTranslation from "../../hooks/useTranslation";
-import { preLoadWords } from "../../hooks/utils/translation";
 
 const AppMainLayout = () => {
   const [isOpen, setIsOpen] = useState(true);
@@ -98,11 +97,6 @@ const AppMainLayout = () => {
   // set access token from cookie to context
 
   useEffect(() => {
-    try {
-      preLoadWords();
-    } catch (err) {
-      console.error("Error preloading translations::", err);
-    }
 
     let cookieValue = null;
     const cookieName = "access";
@@ -157,26 +151,38 @@ const AppMainLayout = () => {
   const currentPlan = userPlanData?.data?.current_plan;
   const planState = userPlanData?.data?.state;
 
+  const wordBank = [
+    "Sign Out",
+    "Learning",
+    "Community",
+    "Fun",
+    "Duet",
+    "Speech",
+    "Settings",
+    "Notifications",
+    "Hello",
+    "API",
+    "Documentation",
+    "Report",
+    "Created",
+    "Report",
+  ];
+
   const {
-    textSchema,
     setDefaultLang,
     defaultLang,
     findText,
-    isLoading,
-    setIsLoading,
-    textSchemaLoading
-  } = useTranslation();
-  // //console.log(findText());
+    translateData,
+    isTranslationsComplete
+  } = useTranslation(wordBank);
+  
   return (
-    !textSchemaLoading && (
+    !translateData?.loading && !isTranslationsComplete && (
       <OutletContext.Provider
         value={{
-          textSchema,
           findText,
           defaultLang,
           setDefaultLang,
-          isLoading,
-          setIsLoading,
           setRightComponent,
           setRightLayout,
           generalData,

package/src/components/banner/index.jsx

@@ -11,10 +11,9 @@ import { FaArrowRight } from "react-icons/fa";
 import useTranslation from "../../hooks/useTranslation";
 
 const Banner = () => {
-  const { textSchema, findText } = useTranslation();
+  const { findText } = useTranslation();
 
   return (
-    textSchema && (
       <BannerWrapper>
         <BannerTitle>
           {" "}
@@ -39,7 +38,6 @@ const Banner = () => {
           }}
         />
       </BannerWrapper>
-    )
   );
 };
 

package/src/components/button/index.jsx

@@ -20,7 +20,7 @@ import useTranslation from "../../hooks/useTranslation";
  *
  */
 const ButtonComponent = (props) => {
-  const { textSchema, findText } = useTranslation();
+  const { findText } = useTranslation();
 
   const handleClick = useCallback((e) => {
     props.onClick && props.onClick(e);
@@ -29,7 +29,6 @@ const ButtonComponent = (props) => {
   switch (props.type) {
     case "primary":
       return (
-        textSchema && (
           <Button
             disabled={props.disabled}
             onClick={handleClick}
@@ -75,10 +74,8 @@ const ButtonComponent = (props) => {
             )}
           </Button>
         )
-      );
     case "secondary":
       return (
-        textSchema && (
           <SecondaryButton
             disabled={props.disabled}
             onClick={handleClick}
@@ -123,7 +120,6 @@ const ButtonComponent = (props) => {
               )
             )}
           </SecondaryButton>
-        )
       );
     case "tertiary":
       return (
@@ -174,7 +170,6 @@ const ButtonComponent = (props) => {
       );
     default:
       return (
-        textSchema && (
           <Button
             disabled={props.disabled}
             onClick={handleClick}
@@ -219,7 +214,6 @@ const ButtonComponent = (props) => {
               )
             )}
           </Button>
-        )
       );
   }
 };

package/src/components/dropdown component/dropdown.jsx

@@ -81,10 +81,9 @@ const DropDownComponent = (props) => {
     }
   }, [props.dropdownData]);
 
-  const { textSchema, findText } = useTranslation();
+  const { findText } = useTranslation();
 
   return (
-    textSchema && (
       <DropDownContainer
         className={props?.className}
         ref={dropdownRef}
@@ -165,7 +164,6 @@ const DropDownComponent = (props) => {
           )}
         </DropDownControls>
       </DropDownContainer>
-    )
   );
 };
 export default DropDownComponent;

package/src/components/header/index.jsx

@@ -26,7 +26,7 @@ import LanguageDropdown from "./languageDropdown";
 import { getCookie } from "./getCookies";
 // import { data } from "../GraphMap/data";
 import { languagesData } from "./languages";
-import loadTranslations, { preLoadWords } from "../../hooks/utils/translation";
+import useTranslation from "../../hooks/useTranslation";
 /**
  * @param {{
  *  type: string,
@@ -67,14 +67,26 @@ const HeaderComponent = (props) => {
     setGeneralData,
     generalData,
     notificationMarkReadData,
-    findText,
-    defaultLang,
-    isLoading,
-    setIsLoading,
-    setDefaultLang
   } = useContext(OutletContext);
   const [selectedAccount, setSelectedAccount] = useState();
   const { setDefaultAccount, handleSetDefaultAccount } = useHeader();
+  const wordBank = [
+    "Sign Out",
+    "Learning",
+    "Community",
+    "Fun",
+    "Duet",
+    "Speech",
+    "Settings",
+    "Notifications",
+    "Hello",
+    "API",
+    "Documentation",
+    "Report",
+    "Created",
+    "Report",
+  ];
+  const { findText, translateData, defaultLang, setDefaultLang } = useTranslation(wordBank);
 
   useEffect(() => {
     setIsOpen(false);
@@ -402,7 +414,7 @@ const HeaderComponent = (props) => {
 
   return (
     <Navbar>
-      {isLoading && <FullPageLoader hasBackground={true} />}
+      {translateData?.loading && <FullPageLoader hasBackground={true} />}
 
       <img src={logo} alt="Learngual logo" />
       <Nav

package/src/components/header/languageDropdown.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef, useContext } from "react";
 import ReactFlagsSelect from "react-flags-select";
 import useHeader from "./getHeaderDetails";
-import { OutletContext } from "..";
+import { OutletContext, useTranslation } from "..";
 import { useLocation } from "react-router-dom";
 import usFlag from "../../assets/images/usFlag.png";
 import koreanFlag from "../../assets/images/koreaFlag.png";
@@ -24,11 +24,6 @@ const LanguageDropdown = ({ languageDropdown, setLanguageDropdown }) => {
   const {
     setGeneralData,
     generalData,
-    defaultLang,
-    setDefaultLang,
-    findText,
-    isLoading,
-    setIsLoading,
   } = useContext(OutletContext);
   const {
     retrieveUserDetailsData,
@@ -36,6 +31,7 @@ const LanguageDropdown = ({ languageDropdown, setLanguageDropdown }) => {
     updateUserAccountData,
     handleUpdateUserAccount,
   } = useHeader();
+  const { findText, translateData, defaultLang, setDefaultLang, handleTranslate, wordsToTranslate } = useTranslation();
 
   const languagesData = [
     {
@@ -96,9 +92,10 @@ const LanguageDropdown = ({ languageDropdown, setLanguageDropdown }) => {
     }
     setLanguageDropdown();
     setDefaultLang(item?.slug);
-    item?.slug === defaultLang
-      ? setIsLoading(false)
-      : setIsLoading(true);
+    handleTranslate(item?.slug, wordsToTranslate)
+    // item?.slug === defaultLang
+    //   ? setIsLoading(false)
+    //   : setIsLoading(true);
     localStorage.setItem("defaultLang", JSON.stringify(item));
     console.log("general id", generalData?.defaultAccount?.id)
 

package/src/components/index.js

@@ -51,6 +51,5 @@ 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";
-export { default as preLoadWords } from "../hooks/utils/translation";
 export { default as ImageComponent } from "./ImageComponent";
 

package/src/components/input/index.jsx

@@ -18,7 +18,7 @@ import useTranslation from "../../hooks/useTranslation";
 const InputComponent = (props) => {
   const [value, setValue] = useState("");
   const [formErrors, setFormErrors] = useState(false);
-  const { textSchema, findText } = useTranslation();
+  const { findText } = useTranslation();
 
   const validate = (e) => {
     if (!e.target.value) {
@@ -37,7 +37,6 @@ const InputComponent = (props) => {
   };
 
   return (
-    textSchema && (
       <div style={props.style}>
         <Label htmlFor={props.in} style={props.customLabelStyle}>
           {findText(props.label)}
@@ -65,7 +64,6 @@ const InputComponent = (props) => {
           </ErrorMsg>
         )}
       </div>
-    )
   );
 };
 

package/src/components/radio/index.jsx

@@ -23,9 +23,8 @@ const Radio = ({
     setValue(newValue);
     onChange && onChange(newValue);
   };
-  const { textSchema, findText } = useTranslation();
+  const { findText } = useTranslation();
   return (
-    textSchema && 
     <Container direction={direction} {...props}>
       {options.map((option) => (
         <RadioWrapper key={option.value}>

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

@@ -15,6 +15,7 @@ import cx from "classnames";
 import InstructorRightBar from "../../fileRightBar/instructorRightBar";
 import EnterpriseRightBar from "../../fileRightBar/enterpriseRightBar";
 import { OutletContext } from "../../AppMainLayout";
+import useTranslation from "../../../hooks/useTranslation";
 
 const SideMenu = ({
   user,
@@ -31,7 +32,8 @@ const SideMenu = ({
   // const [isOpen, setIsOpen] = useState(false);
   const [gracePeriod, setGracePeriod] = useState(true);
 
-  const { setGeneralData, generalData, findText } = useContext(OutletContext);
+  const { setGeneralData, generalData } = useContext(OutletContext);
+  const { findText } = useTranslation();
   const onToggle = () => {
     setIsOpen(!isOpen);
   };

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

@@ -11,12 +11,14 @@ import useHeader from "../../header/getHeaderDetails";
 import Loader from "../../loader";
 import avatar from "../../../assets/images/avatar.png";
 import { OutletContext } from "../../AppMainLayout";
+import useTranslation from "../../../hooks/useTranslation";
 
 const UserCard = ({ user, isOpen }) => {
   const { handleGetUserDetails, userDetails, handleSetDefaultAccount } =
     useHeader();
   const [organizationName, setOrganizationName] = useState();
-  const { generalData, findText } = useContext(OutletContext);
+  const { generalData } = useContext(OutletContext);
+  const { findText } = useTranslation();
   useEffect(() => {
     handleGetUserDetails();
     if (generalData?.selectedAccount) {

package/src/components/sideNav/index.jsx

@@ -11,9 +11,10 @@ import LogoutIcon from "./svg/logout";
 // import deleteCookies from "../../utils/deleteCookies";
 import Cookies from "js-cookie";
 import { OutletContext } from "../AppMainLayout";
+import useTranslation from "../../hooks/useTranslation";
 
 const SideBar = ({ routes }) => {
-  const { findText } = useContext(OutletContext);
+  const { findText } = useTranslation();
   
   const deleteCookies = (name) => {
     const date = new Date();

package/src/hooks/useTranslation.jsx

@@ -1,82 +1,108 @@
-import React, { useCallback, useContext, useEffect, useState } from "react";
-import loadTranslations from "./utils/translation";
-import { db } from "./utils/db";
-import { useLiveQuery } from "dexie-react-hooks";
-import { OutletContext } from "../components";
+import React, { useCallback, useEffect, useState } from "react";
+import useAxios from "axios-hooks";
 
-const useTranslation = () => {
-  const screenId = btoa(window.location.href);
+const useTranslation = (initialSentences = []) => {
   const value = JSON?.parse(localStorage.getItem("defaultLang"));
-  const { generalData } = useContext(OutletContext);
 
   const [defaultLang, setDefaultLang] = useState(value?.slug ?? "en");
-  const [isLoading, setIsLoading] = useState(false);
-  const [textSchemaLoading, setTextSchemaLoading] = useState(true);
+  const [translations, setTranslations] = useState({}); // returned translation from backend
+  const [wordsToTranslate, setWordsToTranslate] = useState([]); // sent translations to backend
+  const isTranslationsComplete = Object.keys(translations)?.length === 0;
 
-  /**
-   * @type {{key: string; value: string; updatedAt: string; screenId: string}[]}
-   */
-  const textSchema =
-    useLiveQuery(
-      async () => db[defaultLang?.toLowerCase()]?.toArray(),
-      [defaultLang]
-    ) ?? [];
-
-    useEffect(() => {
-      if (textSchema.length) {
-        setTextSchemaLoading(false); // textSchema has been loaded, so stop loading
+  const findText = useCallback(
+    (word, kwargs = {}) => {
+      // Check if the word is not already translated and not already in the list to avoid duplicates
+      if (!translations[word] && !wordsToTranslate.includes(word)) {
+        setWordsToTranslate((prevWords) => {
+          // Ensure the word is only added if it's not already in the list
+          if (!prevWords.includes(word)) {
+            return [...prevWords, word];
+          }
+          return prevWords;
+        });
       }
-    }, [textSchema]);
+      return formatSentence(translations[word] || word, kwargs); // Return translated word or original word if not yet translated
+    },
+    [translations, wordsToTranslate]
+  );
 
-  const findText = useCallback(
-    (str, kwarg = {}) => {
-      if (!str) return "";
-      // add text to db if not exist
-      db.words.add({
-        text: str,
-        screenId,
-        updatedAt: new Date().toDateString(),
+  // api request for sending data to backend
+  const [{ ...translateData }, translate] = useAxios(
+    {
+      method: "POST",
+    },
+    {
+      manual: true,
+    }
+  );
+
+  const handleTranslate = async (language, words) => {
+    try {
+      await translate({
+        url: `/iam/v1/utils/translate/`,
+        data: {
+          language,
+          sentences: words,
+          // kwargs,
+        },
+        params: {},
       });
+    } catch (err) {
+      console.log(err);
+    }
+  };
 
-      if (Object.keys(kwarg).length) {
-        db.kwarg.bulkPut(
-          Object.keys(kwarg).map((x) => ({ key: x, value: kwarg[x], screenId }))
-        );
-      }
-      const schema = textSchema?.reduce(
-        (x, y) => ({ ...x, [y.key]: y.value }),
-        {}
+  useEffect(() => {
+    if (initialSentences.length > 0) {
+      // Add initial sentences while ensuring no duplicates
+      const uniqueSentences = initialSentences.filter(
+        (word, index) => initialSentences.indexOf(word) === index
       );
-      if (schema[str]) {
-        return schema[str];
-      } else {
-        return formatSentence(str, kwarg);
-      }
-    },
-    [textSchema, defaultLang]
-  );
+      setWordsToTranslate((prevWords) => [
+        ...prevWords,
+        ...uniqueSentences.filter((word) => !prevWords.includes(word)),
+      ]);
+    }
+  }, []);
 
   useEffect(() => {
-    loadTranslations(defaultLang, setIsLoading);
-  }, [defaultLang]);
+    if (wordsToTranslate?.length > 0) {
+      handleTranslate(defaultLang, wordsToTranslate);
+      // setWordsToTranslate([]); // Clear the list after translating
+    }
+  }, [defaultLang, wordsToTranslate]);
+
+  useEffect(() => {
+    if (translateData?.response) {
+
+      const newTranslations = {};
+      wordsToTranslate.forEach((word, index) => {
+        newTranslations[word] = translateData?.data?.result[index];
+      });
+      setTranslations((prevTranslations) => ({
+        ...prevTranslations,
+        ...newTranslations,
+      }));
+    }
+  }, [translateData?.response]);
+
 
   return {
-    textSchema,
-    // setTextSchema,
-    setDefaultLang,
     defaultLang,
+    setDefaultLang,
+    translateData,
+    handleTranslate,
+    translations,
     findText,
-    isLoading,
-    setIsLoading,
-    textSchemaLoading,
-    setTextSchemaLoading
+    wordsToTranslate,
+    isTranslationsComplete,
   };
 };
 
 export function formatSentence(sentence, kwargs) {
   // console.log(sentence);
   // Use replace with a regular expression and a callback function
-  const finalSentence = sentence.replace(/\{(\w+)\}/g, (match, key) => {
+  const finalSentence = sentence?.replace(/\{(\w+)\}/g, (match, key) => {
     // If the key exists in kwargs, replace it with the corresponding value
     // Otherwise, keep the original placeholder
     return kwargs[key] !== undefined ? kwargs[key] : match;
@@ -84,4 +110,5 @@ export function formatSentence(sentence, kwargs) {
 
   return finalSentence;
 }
+
 export default useTranslation;

package/src/hooks/utils/db.js

@@ -1,13 +0,0 @@
-import Dexie from "dexie";
-import locale from "iso-639-1";
-export const db = new Dexie("translations");
-
-const languages = locale.getAllCodes();
-db.version(2).stores({
-  kwarg: "&key, value, screenId",
-  ...languages.reduce(
-    (x, y) => ({ ...x, [y]: "&key, value, screenId, updatedAt" }),
-    {}
-  ),
-  words: "&text, screenId, updatedAt",
-});

package/src/hooks/utils/translation.js

@@ -1,89 +0,0 @@
-import { db } from "./db";
-import axios from "./axiosConfig";
-
-async function loadTranslations(language = "en", setIsLoading) {
-  await new Promise((resolve) => {
-    //check if loading else resolve
-    if (document.readyState === "complete") {
-      return resolve();
-    }
-    window.addEventListener("load", resolve);
-  });
-
-  const screenId = btoa(window.location.href);
-
-  /**
-   * @typedef {{text: string; screenId: string; updatedAt: string}} WORDS
-   * @type {WORDS[]}
-   */
-  const words = await db.words.toArray();
-  const texts = words.map((x) => x.text.trim() !== "" && x.text).filter((x) => x); // list of texts
-
-  /**
-   * @typedef {{ key: string; value: string; screenId: string }} Kwarg
-   * @type {Kwarg[]} kwargList
-   */
-  const kwargList = await db.kwarg.where({ screenId }).toArray();
-  const kwargs = kwargList.reduce((x, t) => ({ ...x, [t.key]: t.value }), {});
-  /**
-   * @type {{ data: {has_translated: boolean; result: string[]} }}
-   */
-
-  try {
-    const res = await axios({
-      url: "/iam/v1/utils/translate/",
-      method: "POST",
-      data: {
-        language,
-        sentences: texts,
-        kwargs,
-      },
-      // params: {},
-    });
-    // build an object using texts as key and results from request as value
-    if (!res.data) return {}; // somehow data was not found
-    const translations = texts.reduce(
-      (x, y, z) => ({ ...x, [y]: res.data.result[z] }),
-      {}
-    );
-    db[language].bulkPut(
-      Object.keys(translations).map((x, i) => ({
-        key: texts[i],
-        value: translations[x],
-        screenId,
-        updatedAt: new Date().toDateString(),
-      }))
-    );
-
-    return translations;
-  } catch (error) {
-    console.error("clg Error fetching data:", error);
-  } finally {
-    setIsLoading(false);
-  }
-}
-
-export function extractBracedText(text) {
-  const pattern = /\{([^}]+)\}/g; // Match all occurrences of text within {}
-  const matches = text.match(pattern);
-  return matches ? matches.map((match) => match.slice(1, -1)) : []; // Remove braces
-}
-
-export async function preLoadWords(cb) {
-  const screenId = btoa(window.location.href);
-  const updatedAt = new Date().toDateString();
-  const response = await axios({
-    url: "iam/v1/utils/translations/",
-  });
-  /**
-   * @type {{[key: string]: string }}
-   */
-  const data = response.data;
-  db.words.bulkPut(
-    Object?.keys(data).map((x) => ({ text: x, screenId, updatedAt }))
-  );
-  if (typeof cb === "function") cb(data);
-  return true;
-}
-
-export default loadTranslations;