l-min-components 1.7.1507 → 1.7.1508

package/package.json

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

package/src/components/AppMainLayout/index.jsx

@@ -384,6 +384,210 @@ const AppMainLayout = ({ children }) => {
     "Build the future with Learngual!",
     "Choose our custom plans for more calls and better flexibility.",
     "We know it's inconvenient. For better user accessibility, login with a desktop device.",
+    // Additional text from codebase analysis
+    "Student",
+    "Instructor account",
+    "Enterprise account",
+    "Student account",
+    "Personal Account",
+    "Dashboard",
+    "Courses",
+    "My courses",
+    "Manage courses",
+    "Manage report",
+    "Manage teams",
+    "Manage student",
+    "Messages",
+    "Announcements",
+    "File manager",
+    "Library",
+    "Add on",
+    "Contracts",
+    "Demo",
+    "Explore",
+    "Connect",
+    "Log out",
+    "profile",
+    "account photo",
+    "Active",
+    "Expired",
+    "Pending",
+    "Loading",
+    "Error",
+    "Success",
+    "Warning",
+    "Info",
+    "Confirm",
+    "Yes",
+    "No",
+    "OK",
+    "Cancel",
+    "Continue",
+    "Back",
+    "Next",
+    "Submit",
+    "Close",
+    "Open",
+    "View",
+    "Edit",
+    "Delete",
+    "Save",
+    "Create",
+    "Update",
+    "Name",
+    "Email",
+    "Password",
+    "Username",
+    "Login",
+    "Logout",
+    "Register",
+    "Signup",
+    "Signin",
+    "User",
+    "Admin",
+    "Account",
+    "Profile",
+    "Preferences",
+    "Configuration",
+    "Options",
+    "Language",
+    "Translation",
+    "Text",
+    "File",
+    "Document",
+    "Folder",
+    "Upload",
+    "Download",
+    "Share",
+    "Copy",
+    "Move",
+    "Rename",
+    "Filter",
+    "Sort",
+    "Search",
+    "Results",
+    "Total",
+    "Count",
+    "Date",
+    "Time",
+    "Status",
+    "Type",
+    "Category",
+    "Priority",
+    "Level",
+    "Progress",
+    "Score",
+    "Grade",
+    "Free",
+    "Premium",
+    "Basic",
+    "Advanced",
+    "Pro",
+    "Enterprise",
+    "Personal",
+    "Public",
+    "Private",
+    "Online",
+    "Offline",
+    "Available",
+    "Unavailable",
+    "Enabled",
+    "Disabled",
+    "Required",
+    "Optional",
+    "Popular",
+    "Featured",
+    "Latest",
+    "Recent",
+    "New",
+    "Updated",
+    "Completed",
+    "In Progress",
+    "Approved",
+    "Rejected",
+    "Cancelled",
+    "Scheduled",
+    "Valid",
+    "Invalid",
+    "Correct",
+    "Incorrect",
+    "Start",
+    "Stop",
+    "Play",
+    "Pause",
+    "Resume",
+    "Record",
+    "Volume",
+    "Speed",
+    "Quality",
+    "Size",
+    "Format",
+    "Original",
+    "Source",
+    "Target",
+    "Input",
+    "Output",
+    "Audio",
+    "Video",
+    "Image",
+    "Button",
+    "Menu",
+    "Page",
+    "Section",
+    "Header",
+    "Footer",
+    "Content",
+    "Navigation",
+    "List",
+    "Table",
+    "Row",
+    "Column",
+    "Field",
+    "Value",
+    "Option",
+    "Selection",
+    "Modal",
+    "Dialog",
+    "Alert",
+    "Notification",
+    "Message",
+    "Card",
+    "Item",
+    "Entry",
+    "Record",
+    "Data",
+    "Information",
+    "Details",
+    "Summary",
+    "Overview",
+    "Preview",
+    "Icon",
+    "Avatar",
+    "Theme",
+    "Style",
+    "Color",
+    "Font",
+    "Mobile",
+    "Desktop",
+    "Tablet",
+    "Device",
+    "Browser",
+    "Application",
+    "System",
+    "Network",
+    "Internet",
+    "Connection",
+    "Server",
+    "Database",
+    "Storage",
+    "Session",
+    "Token",
+    "Key",
+    "Permission",
+    "Role",
+    "Member",
+    "Customer",
+    "Visitor",
   ];
 
   const {

package/src/components/header/languages.js

@@ -7,11 +7,11 @@ export const languagesData = [
     flag: usFlag,
     slug: "en",
   },
-  // {
-  //   name: "Korean",
-  //   flag: koreanFlag,
-  //   slug: "ko",
-  // },
+  {
+    name: "Korean",
+    flag: koreanFlag,
+    slug: "ko",
+  },
 ];
 
 export const selectedLanguageData = {

package/src/hooks/useTranslation.jsx

@@ -1,6 +1,15 @@
 import React, { useCallback, useContext, useEffect, useState } from "react";
 import useAxios from "axios-hooks";
 
+// Global cache for master translations
+if (!window.translationCache) {
+  window.translationCache = {};
+}
+
+const CACHE_DURATION = 60 * 60 * 1000; // 1 hour in milliseconds
+const S3_BASE_URL =
+  "https://learngual-bucket.sfo3.digitaloceanspaces.com/media/media/";
+
 const useTranslation = (initialSentences = []) => {
   const value = localStorage?.getItem("defaultLang");
 
@@ -14,7 +23,7 @@ const useTranslation = (initialSentences = []) => {
   }, [value]);
 
   const [defaultLang, setDefaultLang] = useState(value ?? "en");
-  const [translations, setTranslations] = useState({}); // returned translation from backend
+  const [translations, setTranslations] = useState({}); // returned translation from S3
   const [isTranslationsLoading, setIsTranslationsLoading] = useState(true);
 
   const findText = useCallback(
@@ -24,7 +33,7 @@ const useTranslation = (initialSentences = []) => {
     [translations]
   );
 
-  // api request for sending data to backend
+  // api request for sending data to backend (fire-and-forget)
   const [{ ...translateData }, translate] = useAxios(
     {
       method: "POST",
@@ -34,14 +43,17 @@ const useTranslation = (initialSentences = []) => {
     }
   );
 
-  const handleTranslate = async (language, words) => {
+  /**
+   * Send translation request to backend (fire-and-forget)
+   */
+  const sendTranslationRequestToBackend = async (language, words) => {
     try {
-      await translate({
+      // Fire-and-forget - don't await or use response
+      translate({
         url: `/iam/v1/utils/translate/`,
         data: {
           language,
           sentences: words,
-          // kwargs,
         },
         params: {
           _account: "",
@@ -51,38 +63,135 @@ const useTranslation = (initialSentences = []) => {
         },
       });
     } catch (err) {
-      console.log(err);
+      console.warn("Translation request failed:", err);
     }
   };
 
-  useEffect(() => {
-    handleTranslate(defaultLang, initialSentences);
-  }, [defaultLang]);
+  /**
+   * Fetch master translations from S3 with caching
+   */
+  const getMasterTranslationsWithCache = async () => {
+    const now = Date.now();
+    const cached = window.translationCache.master;
 
-  useEffect(() => {
-    if (translateData?.data) {
-      const newTranslations = {};
-      initialSentences.map((word, index) => {
-        newTranslations[word] = translateData?.data?.result[index];
+    // Check if cache is valid and not expired
+    if (cached && cached.data && cached.expires > now) {
+      return cached.data;
+    }
+
+    try {
+      // Fetch from S3 - master JSON contains all languages
+      const response = await fetch(
+        `${S3_BASE_URL}qFpINMa05DrgUgzO0PEboReejximpq2r3VL2AmFZAwIq6fTN3A.json`
+      );
+
+      if (!response.ok) {
+        throw new Error(`Failed to fetch translations: ${response.status}`);
+      }
+
+      const masterTranslations = await response.json();
+
+      console.log(masterTranslations, "MASTER");
+
+      // Cache in memory (single cache for all languages since JSON contains all)
+      window.translationCache.master = {
+        data: masterTranslations,
+        timestamp: now,
+        expires: now + CACHE_DURATION,
+      };
+
+      return masterTranslations;
+    } catch (error) {
+      console.error("Failed to fetch master translations:", error);
+
+      // Fallback to cached data if available (even if expired)
+      if (cached && cached.data) {
+        return cached.data;
+      }
+
+      throw error;
+    }
+  };
+
+  /**
+   * Extract relevant translations for specific texts
+   */
+  const extractRelevantTranslations = (masterTranslations, words, language) => {
+    const relevantTranslations = {};
+    const languageCode = language.toUpperCase(); // ko -> KO, fr -> FR
+
+    words.forEach((word) => {
+      if (masterTranslations[word] && masterTranslations[word][languageCode]) {
+        const translation = masterTranslations[word][languageCode];
+        // Only use translation if it's not empty
+        relevantTranslations[word] = translation.trim() || word;
+      } else {
+        // Return original text if translation not found
+        relevantTranslations[word] = word;
+      }
+    });
+
+    return relevantTranslations;
+  };
+
+  const handleTranslate = async (language, words) => {
+    if (!words || words.length === 0) {
+      setIsTranslationsLoading(false);
+      return;
+    }
+
+    try {
+      // Step 1: Fire-and-forget translation request to backend
+      sendTranslationRequestToBackend(language, words);
+
+      // Step 2: Get master translations (cached or fresh from S3)
+      const masterTranslations = await getMasterTranslationsWithCache();
+
+      // Step 3: Extract only the translations we need
+      const relevantTranslations = extractRelevantTranslations(
+        masterTranslations,
+        words,
+        language
+      );
+
+      // Step 4: Update state
+      setTranslations((prevTranslations) => ({
+        ...prevTranslations,
+        ...relevantTranslations,
+      }));
+
+      setIsTranslationsLoading(false);
+    } catch (error) {
+      console.error("Failed to load translations:", error);
+
+      // Fallback: return original texts
+      const fallbackTranslations = {};
+      words.forEach((word) => {
+        fallbackTranslations[word] = word;
       });
+
       setTranslations((prevTranslations) => ({
         ...prevTranslations,
-        ...newTranslations,
+        ...fallbackTranslations,
       }));
+
+      setIsTranslationsLoading(false);
     }
-  }, [translateData?.data]);
+  };
 
   useEffect(() => {
-    if (Object.keys(translations)?.length > 0) {
+    if (initialSentences && initialSentences.length > 0) {
+      handleTranslate(defaultLang, initialSentences);
+    } else {
       setIsTranslationsLoading(false);
     }
-  }, [translations]);
-  console.log("translateData", translateData);
+  }, [defaultLang]);
 
+  // Remove the old useEffect that processed translateData.data since we don't use API response anymore
   return {
     defaultLang,
     setDefaultLang,
-    translateData,
+    translateData, // Keep for backward compatibility (though not used anymore)
     handleTranslate,
     translations,
     findText,

package/src/utils/translation.js

@@ -1,6 +1,142 @@
 import { db } from "./db";
 import axios from "./axiosConfig";
 
+// Global cache for master translations
+if (!window.translationCache) {
+  window.translationCache = {};
+}
+
+const CACHE_DURATION = 60 * 60 * 1000; // 1 hour in milliseconds
+const S3_BASE_URL =
+  "https://learngual-bucket.sfo3.digitaloceanspaces.com/media/media/";
+
+/**
+ * Send translation request to backend (fire-and-forget)
+ */
+async function sendTranslationRequest(texts, kwargs, language) {
+  try {
+    axios({
+      url: "/iam/v1/utils/translate/",
+      method: "POST",
+      data: {
+        language,
+        sentences: texts,
+        kwargs,
+      },
+      params: {
+        _account: "",
+      },
+      authRequired: false,
+    });
+  } catch (error) {
+    // Fire-and-forget, ignore errors
+    console.warn("Translation request failed:", error);
+  }
+}
+
+/**
+ * Fetch master translations from S3 with caching
+ * Since the JSON contains all languages, we cache it once regardless of language
+ */
+async function getMasterTranslationsWithCache() {
+  const now = Date.now();
+  const cached = window.translationCache.master;
+
+  // Check if cache is valid and not expired
+  if (cached && cached.data && cached.expires > now) {
+    return cached.data;
+  }
+
+  try {
+    // Fetch from S3 - master JSON contains all languages
+    const response = await fetch(
+      `${S3_BASE_URL}qFpINMa05DrgUgzO0PEboReejximpq2r3VL2AmFZAwIq6fTN3A.json`
+    );
+
+    if (!response.ok) {
+      throw new Error(`Failed to fetch translations: ${response.status}`);
+    }
+
+    const masterTranslations = await response.json();
+
+    // Cache in memory (single cache for all languages since JSON contains all)
+    window.translationCache.master = {
+      data: masterTranslations,
+      timestamp: now,
+      expires: now + CACHE_DURATION,
+    };
+
+    console.log(masterTranslations, "master");
+
+    return masterTranslations;
+  } catch (error) {
+    console.error("Failed to fetch master translations:", error);
+
+    // Fallback to cached data if available (even if expired)
+    if (cached && cached.data) {
+      return cached.data;
+    }
+
+    throw error;
+  }
+}
+
+/**
+ * Extract relevant translations for specific texts
+ * Supports multiple languages: ko -> KO, fr -> FR, etc.
+ */
+function extractRelevantTranslations(masterTranslations, texts, language) {
+  const relevantTranslations = {};
+  const languageCode = language.toUpperCase(); // ko -> KO, fr -> FR
+
+  texts.forEach((text) => {
+    if (masterTranslations[text] && masterTranslations[text][languageCode]) {
+      const translation = masterTranslations[text][languageCode];
+      // Only use translation if it's not empty
+      relevantTranslations[text] = translation.trim() || text;
+    } else {
+      // Return original text if translation not found
+      relevantTranslations[text] = text;
+    }
+  });
+
+  return relevantTranslations;
+}
+
+/**
+ * Cache screen-specific translations in IndexedDB
+ */
+async function cacheScreenTranslations(translations, screenId, language) {
+  try {
+    const translationEntries = Object.keys(translations).map((key) => ({
+      key,
+      value: translations[key],
+      screenId,
+      updatedAt: new Date().toDateString(),
+    }));
+
+    await db[language].bulkPut(translationEntries);
+  } catch (error) {
+    console.error("Failed to cache translations:", error);
+  }
+}
+
+/**
+ * Get cached translations from IndexedDB as fallback
+ */
+async function getCachedTranslations(screenId, language) {
+  try {
+    const cached = await db[language].where({ screenId }).toArray();
+    return cached.reduce((acc, item) => {
+      acc[item.key] = item.value;
+      return acc;
+    }, {});
+  } catch (error) {
+    console.error("Failed to get cached translations:", error);
+    return {};
+  }
+}
+
 async function loadTranslations(language = "ko") {
   await new Promise((resolve) => {
     //check if loading else resolve
@@ -25,38 +161,42 @@ async function loadTranslations(language = "ko") {
    */
   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[]} }}
-   */
-  const res = await axios({
-    url: "/iam/v1/utils/translate/",
-    method: "POST",
-    data: {
-      language,
-      sentences: texts,
-      kwargs,
-    },
-    params: {
-      _account: "",
-    },
-    authRequired: false,
-  });
-  // 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;
+  // Step 1: Fire-and-forget translation request to backend
+  sendTranslationRequest(texts, kwargs, language);
+
+  try {
+    // Step 2: Get master translations (cached or fresh from S3)
+    const masterTranslations = await getMasterTranslationsWithCache();
+
+    // Step 3: Extract only the translations we need
+    const relevantTranslations = extractRelevantTranslations(
+      masterTranslations,
+      texts,
+      language
+    );
+
+    // Step 4: Cache the extracted translations in IndexedDB
+    await cacheScreenTranslations(relevantTranslations, screenId, language);
+
+    return relevantTranslations;
+  } catch (error) {
+    console.error("Failed to load translations:", error);
+
+    // Step 5: Fallback to cached translations from IndexedDB
+    const cachedTranslations = await getCachedTranslations(screenId, language);
+
+    // If we have cached translations, return them
+    if (Object.keys(cachedTranslations).length > 0) {
+      return cachedTranslations;
+    }
+
+    // Last resort: return original texts
+    return texts.reduce((acc, text) => {
+      acc[text] = text;
+      return acc;
+    }, {});
+  }
 }
 
 export function extractBracedText(text) {