l-min-components 1.0.820 → 1.0.828

package/package.json

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

package/src/components/AppMainLayout/index.jsx

@@ -29,6 +29,7 @@ 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);
@@ -99,11 +100,16 @@ 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";
 
     // Retrieve the value of the cookie
-
     const cookies = document.cookie.split(";");
     for (let i = 0; i < cookies.length; i++) {
       const cookie = cookies[i].trim();
@@ -153,11 +159,18 @@ const AppMainLayout = () => {
   const currentPlan = userPlanData?.data?.current_plan;
   const planState = userPlanData?.data?.state;
 
-  const { textSchema, setDefaultLang, defaultLang, findText, isLoading, setIsLoading } =
-    useTranslation();
+  const {
+    textSchema,
+    setDefaultLang,
+    defaultLang,
+    findText,
+    isLoading,
+    setIsLoading,
+    textSchemaLoading
+  } = useTranslation();
   // //console.log(findText());
   return (
-    textSchema && (
+    !textSchemaLoading && (
       <OutletContext.Provider
         value={{
           textSchema,

package/src/components/header/languageDropdown.jsx

@@ -142,7 +142,7 @@ const LanguageDropdown = ({ languageDropdown, setLanguageDropdown }) => {
                 }}
               >
                 <img src={item?.flag} alt="" />{" "}
-                <span>{findText(`${item?.name}`)}</span>
+                <span>{findText(item?.name)}</span>
               </p>
             ))}
           </>

package/src/components/index.js

@@ -51,3 +51,4 @@ 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"

package/src/hooks/useTranslation.jsx

@@ -7,18 +7,27 @@ const useTranslation = () => {
   const screenId = btoa(window.location.href);
   const value = JSON?.parse(localStorage.getItem("defaultLang"));
 
-  const [defaultLang, setDefaultLang] = useState(value?.slug);
+  const [defaultLang, setDefaultLang] = useState(value?.slug ?? "en");
   const [isLoading, setIsLoading] = useState(false);
+  const [textSchemaLoading, setTextSchemaLoading] = useState(true);
   /**
    * @type {{key: string; value: string; updatedAt: string; screenId: string}[]}
    */
-  const textSchema = useLiveQuery(
-    async () =>
-      db[defaultLang?.toLowerCase()]?.toArray(),
-    [defaultLang]
-  ) ?? []
+  const textSchema =
+    useLiveQuery(
+      async () => db[defaultLang?.toLowerCase()]?.toArray(),
+      [defaultLang]
+    ) ?? [];
+
+    useEffect(() => {
+      if (textSchema.length) {
+        setTextSchemaLoading(false); // textSchema has been loaded, so stop loading
+      }
+    }, [textSchema]);
+
   const findText = useCallback(
     (str, kwarg = {}) => {
+      if (!str) return "";
       // add text to db if not exist
       db.words.add({
         text: str,
@@ -35,7 +44,11 @@ const useTranslation = () => {
         (x, y) => ({ ...x, [y.key]: y.value }),
         {}
       );
-      return schema[str];
+      if (schema[str]) {
+        return schema[str];
+      } else {
+        return formatSentence(str, kwarg);
+      }
     },
     [textSchema, defaultLang]
   );
@@ -51,8 +64,21 @@ const useTranslation = () => {
     defaultLang,
     findText,
     isLoading,
-    setIsLoading
+    setIsLoading,
+    textSchemaLoading,
+    setTextSchemaLoading
   };
 };
 
+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) => {
+    // If the key exists in kwargs, replace it with the corresponding value
+    // Otherwise, keep the original placeholder
+    return kwargs[key] !== undefined ? kwargs[key] : match;
+  });
+
+  return finalSentence;
+}
 export default useTranslation;

package/src/hooks/utils/translation.js

@@ -1,7 +1,7 @@
 import { db } from "./db";
 import axios from "./axiosConfig";
 
-async function loadTranslations(language = "ko", setIsLoading) {
+async function loadTranslations(language = "en", setIsLoading) {
   await new Promise((resolve) => {
     //check if loading else resolve
     if (document.readyState === "complete") {
@@ -17,7 +17,7 @@ async function loadTranslations(language = "ko", setIsLoading) {
    * @type {WORDS[]}
    */
   const words = await db.words.toArray();
-  const texts = words.map((x) => x.text); // list of texts
+  const texts = words.map((x) => x.text !== "" && x.text).filter((x) => x); // list of texts
 
   /**
    * @typedef {{ key: string; value: string; screenId: string }} Kwarg
@@ -30,33 +30,32 @@ async function loadTranslations(language = "ko", setIsLoading) {
    */
 
   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(),
-    }))
-  );
+    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;
-  
+    return translations;
   } catch (error) {
     console.error("clg Error fetching data:", error);
   } finally {
@@ -70,4 +69,21 @@ export function extractBracedText(text) {
   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;