l-min-components 1.0.883 → 1.0.891

package/package.json

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

package/src/components/AppMainLayout/index.jsx

@@ -1,8 +1,4 @@
-import React, {
-  useState,
-  useEffect,
-  createContext,
-} from "react";
+import React, { useState, useEffect, createContext } from "react";
 import { Outlet, useLocation } from "react-router-dom";
 import {
   Layout,
@@ -16,6 +12,7 @@ import {
   Banner,
   SideNav as SideBar,
   SideMenu,
+  FullPageLoader,
 } from "../";
 import { leftNavMenu, user, sideMenuOptions } from "../../hooks/leftNavMenu";
 import InstructorAccountSwitcher from "../instructorAccountSwitcher";
@@ -97,7 +94,6 @@ const AppMainLayout = () => {
   // set access token from cookie to context
 
   useEffect(() => {
-
     let cookieValue = null;
     const cookieName = "access";
 
@@ -172,156 +168,167 @@ const AppMainLayout = () => {
     setDefaultLang,
     defaultLang,
     findText,
-    translateData,
-    isTranslationsComplete
+    translations,
+    isTranslationsLoading,
+    translateData
   } = useTranslation(wordBank);
-  
+
   return (
-    !translateData?.loading && !isTranslationsComplete && (
-      <OutletContext.Provider
-        value={{
-          findText,
-          defaultLang,
-          setDefaultLang,
-          setRightComponent,
-          setRightLayout,
-          generalData,
-          setGeneralData,
-          coming,
-          hasLayoutBackgroundImage,
-          setHasLayoutBackgroundImage,
-          setSideMenuLayout,
-          activePage,
-          setActivePage,
-          studyTab,
-          setStudyTab,
-          page,
-          setPage,
-          selectedCourseId,
-          setSelectedCourseId,
-          centerLayoutStyle,
-          setCenterLayoutStyle,
-          // return true if instructor affiliates is Active
-          setHideAffilicates,
-          affiliatesActive,
-          accessToken,
-          envType,
-          newNotifications,
-          setNewNotifications,
-          notificationMarkReadData,
-          handleGetNotificationMarkRead,
-        }}>
-        {/* display mobile layout on device width*/}
-        {deviceWidth < 1200 ? (
-          <MobileLayout />
-        ) : (
-          <Layout
-            coming={coming}
-            hasLayoutBackgroundImage={hasLayoutBackgroundImage}>
-            <HeaderComponent setNewNotifications={setNewNotifications} />
-            <MainLayout coming={coming}>
-              <LeftLayout>
-                <SideBar routes={leftNavMenu} />
-                {!coming && (
-                  <>
-                    {sideMenuLayout && (
-                      <SideMenu
-                        user={user}
-                        routes={sideMenuOptions}
-                        affiliatesActive={affiliatesActive}
-                        userType={generalData?.selectedAccount?.type?.toLowerCase()}
-                        isOpen={isOpen}
-                        setIsOpen={setIsOpen}
-                        setRightComponent={setRightComponent}
-                        planState={planState}
+    <OutletContext.Provider
+      value={{
+        findText,
+        wordBank,
+        defaultLang,
+        setDefaultLang,
+        setRightComponent,
+        setRightLayout,
+        generalData,
+        setGeneralData,
+        coming,
+        hasLayoutBackgroundImage,
+        setHasLayoutBackgroundImage,
+        setSideMenuLayout,
+        activePage,
+        setActivePage,
+        studyTab,
+        setStudyTab,
+        page,
+        setPage,
+        selectedCourseId,
+        setSelectedCourseId,
+        centerLayoutStyle,
+        setCenterLayoutStyle,
+        // return true if instructor affiliates is Active
+        setHideAffilicates,
+        affiliatesActive,
+        accessToken,
+        envType,
+        newNotifications,
+        setNewNotifications,
+        notificationMarkReadData,
+        handleGetNotificationMarkRead,
+      }}
+    >
+      {/* display mobile layout on device width*/}
+      {deviceWidth < 1200 ? (
+        <MobileLayout />
+      ) : (
+        <>
+          {isTranslationsLoading && Object.keys(translations)?.length === 0 ? (
+            <h1> LOADING </h1>
+          ) : (
+            <Layout
+              coming={coming}
+              hasLayoutBackgroundImage={hasLayoutBackgroundImage}
+            >
+              <HeaderComponent setNewNotifications={setNewNotifications} />
+              <MainLayout coming={coming}>
+                <LeftLayout>
+                  <SideBar routes={leftNavMenu} />
+                  {!coming && (
+                    <>
+                      {sideMenuLayout && (
+                        <SideMenu
+                          user={user}
+                          routes={sideMenuOptions}
+                          affiliatesActive={affiliatesActive}
+                          userType={generalData?.selectedAccount?.type?.toLowerCase()}
+                          isOpen={isOpen}
+                          setIsOpen={setIsOpen}
+                          setRightComponent={setRightComponent}
+                          planState={planState}
+                          findText={findText}
+                        />
+                      )}
+                    </>
+                  )}
+                  {
+                    // window.location.pathname.includes("enterprise")
+                    //   ? "enterprise"
+                    //   : window.location.pathname.includes("personal")
+                    //   ? "personal"
+                    //   : window.location.pathname.includes("instructor")
+                    //   ? "instructor"
+                    //   : window.location.pathname.includes("developer") ||
+                    //     window.location.hostname.includes("developer")
+                    //   ? "developer"
+                    //   : "developer"
+                  }
+                </LeftLayout>
+                <CenterLayout isOpen={isOpen} style={centerLayoutStyle}>
+                  {window.location.pathname.includes("instructor") &&
+                    !window.location.pathname.includes("enterprise") &&
+                    !window.location.pathname.includes("manage-teams") &&
+                    !hideAffilicates && (
+                      <InstructorAccountSwitcher
+                        setAccountType={setAffiliatesActive}
                       />
                     )}
-                  </>
-                )}
-                {
-                  // window.location.pathname.includes("enterprise")
-                  //   ? "enterprise"
-                  //   : window.location.pathname.includes("personal")
-                  //   ? "personal"
-                  //   : window.location.pathname.includes("instructor")
-                  //   ? "instructor"
-                  //   : window.location.pathname.includes("developer") ||
-                  //     window.location.hostname.includes("developer")
-                  //   ? "developer"
-                  //   : "developer"
-                }
-              </LeftLayout>
-              <CenterLayout isOpen={isOpen} style={centerLayoutStyle}>
-                {window.location.pathname.includes("instructor") &&
-                  !window.location.pathname.includes("enterprise") &&
-                  !window.location.pathname.includes("manage-teams") &&
-                  !hideAffilicates && (
-                    <InstructorAccountSwitcher
-                      setAccountType={setAffiliatesActive}
+
+                  {window.location.pathname.includes("enterprise") &&
+                  planState === "GRACE PERIOD" ? (
+                    <GracePeriod
+                      getCurrentSubscriptionData={getCurrentSubscriptionData}
+                      handleCurrentSubscription={handleCurrentSubscription}
+                      gracePeriod={gracePeriod}
                     />
+                  ) : (
+                    <Outlet />
                   )}
+                </CenterLayout>
 
-                {window.location.pathname.includes("enterprise") &&
-                planState === "GRACE PERIOD" ? (
-                  <GracePeriod
-                    getCurrentSubscriptionData={getCurrentSubscriptionData}
-                    handleCurrentSubscription={handleCurrentSubscription}
-                    gracePeriod={gracePeriod}
-                  />
-                ) : (
-                  <Outlet />
-                )}
-              </CenterLayout>
-
-              {rightLayout && !coming && (
-                <RightLayout>
-                  {rightComponent ??
-                    (window.location.pathname.includes("enterprise") &&
-                    !window.location.pathname.includes("file-manager") ? (
-                      <EnterpriseRightBar
-                        gracePeriod={gracePeriod}
-                        setGracePeriod={setGracePeriod}
-                        planState={planState}
-                      />
-                    ) : window.location.pathname.includes(
-                        "personal/dashboard"
-                      ) ? (
-                      <PersonalRightBar />
-                    ) : window.location.pathname.includes("personal/addons") ? (
-                      <InstructorRightBar personal />
-                    ) : window.location.pathname.includes(
-                        "personal/courses"
-                      ) ? (
-                      <InstructorRightBar personal />
-                    ) : window.location.pathname.includes(
-                        "personal/library/selectlanguage"
-                      ) ? (
-                      <InstructorRightBar personal />
-                    ) : window.location.pathname.includes(
-                        "personal/library"
-                      ) ? (
-                      <PersonalRightBar personalLibrary />
-                    ) : window.location.pathname.includes(
-                        "personal/reports"
-                      ) ? (
-                      <PersonalRightBar personalReport />
-                    ) : window.location.pathname.includes("instructor") &&
-                      !window.location.pathname.includes("manage-teams") &&
+                {rightLayout && !coming && (
+                  <RightLayout>
+                    {rightComponent ??
+                      (window.location.pathname.includes("enterprise") &&
                       !window.location.pathname.includes("file-manager") ? (
-                      <InstructorRightBar />
-                    ) : window.location.pathname.includes("developer") ? (
-                      <Banner />
-                    ) : (
-                      <Banner />
-                    ))}
-                  {/* {rightComponent ?? <Banner />} */}
-                </RightLayout>
-              )}
-            </MainLayout>
-          </Layout>
-        )}
-      </OutletContext.Provider>
-    )
+                        <EnterpriseRightBar
+                          gracePeriod={gracePeriod}
+                          setGracePeriod={setGracePeriod}
+                          planState={planState}
+                        />
+                      ) : window.location.pathname.includes(
+                          "personal/dashboard"
+                        ) ? (
+                        <PersonalRightBar />
+                      ) : window.location.pathname.includes(
+                          "personal/addons"
+                        ) ? (
+                        <InstructorRightBar personal />
+                      ) : window.location.pathname.includes(
+                          "personal/courses"
+                        ) ? (
+                        <InstructorRightBar personal />
+                      ) : window.location.pathname.includes(
+                          "personal/library/selectlanguage"
+                        ) ? (
+                        <InstructorRightBar personal />
+                      ) : window.location.pathname.includes(
+                          "personal/library"
+                        ) ? (
+                        <PersonalRightBar personalLibrary />
+                      ) : window.location.pathname.includes(
+                          "personal/reports"
+                        ) ? (
+                        <PersonalRightBar personalReport />
+                      ) : window.location.pathname.includes("instructor") &&
+                        !window.location.pathname.includes("manage-teams") &&
+                        !window.location.pathname.includes("file-manager") ? (
+                        <InstructorRightBar />
+                      ) : window.location.pathname.includes("developer") ? (
+                        <Banner />
+                      ) : (
+                        <Banner />
+                      ))}
+                    {/* {rightComponent ?? <Banner />} */}
+                  </RightLayout>
+                )}
+              </MainLayout>
+            </Layout>
+          )}
+        </>
+      )}
+    </OutletContext.Provider>
   );
 };
 

package/src/components/header/index.jsx

@@ -67,6 +67,7 @@ const HeaderComponent = (props) => {
     setGeneralData,
     generalData,
     notificationMarkReadData,
+    findText
   } = useContext(OutletContext);
   const [selectedAccount, setSelectedAccount] = useState();
   const { setDefaultAccount, handleSetDefaultAccount } = useHeader();
@@ -85,8 +86,9 @@ const HeaderComponent = (props) => {
     "Report",
     "Created",
     "Report",
+    "Password mismatch"
   ];
-  const { findText, translateData, defaultLang, setDefaultLang } = useTranslation(wordBank);
+  const { translateData, defaultLang, setDefaultLang } = useTranslation(wordBank);
 
   useEffect(() => {
     setIsOpen(false);
@@ -402,6 +404,7 @@ const HeaderComponent = (props) => {
   const value = JSON?.parse(localStorage.getItem("defaultLang"));
   const currentFlag = value?.flag;
   const selectedLanguage = languagesData?.find((lang) => lang?.slug === defaultLang);
+  console.log("🚀 ~ HeaderComponent ~ defaultLang:", defaultLang, selectedLanguage?.flag, currentFlag)
 
   // When Developer and on staging
   const isDeveloper =
@@ -527,7 +530,7 @@ const HeaderComponent = (props) => {
               setIsOpen();
             }}
           >
-            <img src={selectedLanguage?.flag || currentFlag || usFlag} alt="" />
+            <img src={ currentFlag || usFlag} alt="" />
             <ArrowDownIcon />
           </div>
           {languageDropdown && (

package/src/components/header/languageDropdown.jsx

@@ -24,6 +24,9 @@ const LanguageDropdown = ({ languageDropdown, setLanguageDropdown }) => {
   const {
     setGeneralData,
     generalData,
+    wordBank,
+    defaultLang,
+    setDefaultLang,
   } = useContext(OutletContext);
   const {
     retrieveUserDetailsData,
@@ -31,8 +34,13 @@ const LanguageDropdown = ({ languageDropdown, setLanguageDropdown }) => {
     updateUserAccountData,
     handleUpdateUserAccount,
   } = useHeader();
-  const { findText, translateData, defaultLang, setDefaultLang, handleTranslate, wordsToTranslate } = useTranslation();
-
+  const {
+    findText,
+    translateData,
+ 
+    handleTranslate,
+  } = useTranslation();
+  
   const languagesData = [
     {
       name: "English",
@@ -92,7 +100,7 @@ const LanguageDropdown = ({ languageDropdown, setLanguageDropdown }) => {
     }
     setLanguageDropdown();
     setDefaultLang(item?.slug);
-    handleTranslate(item?.slug, wordsToTranslate)
+    // handleTranslate(item?.slug, wordBank)
     // item?.slug === defaultLang
     //   ? setIsLoading(false)
     //   : setIsLoading(true);

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

@@ -27,13 +27,14 @@ const SideMenu = ({
   affiliatesActive,
   setRightComponent,
   planState,
+  findText
 }) => {
   //console.log("user type", userType);
   // const [isOpen, setIsOpen] = useState(false);
   const [gracePeriod, setGracePeriod] = useState(true);
 
   const { setGeneralData, generalData } = useContext(OutletContext);
-  const { findText } = useTranslation();
+  // const { findText } = useTranslation();
   const onToggle = () => {
     setIsOpen(!isOpen);
   };

package/src/hooks/useTranslation.jsx

@@ -4,26 +4,16 @@ import useAxios from "axios-hooks";
 const useTranslation = (initialSentences = []) => {
   const value = JSON?.parse(localStorage.getItem("defaultLang"));
 
-  const [defaultLang, setDefaultLang] = useState(value?.slug ?? "en");
+  const [defaultLang, setDefaultLang] = useState(value?.slug ?? "ko");
   const [translations, setTranslations] = useState({}); // returned translation from backend
-  const [wordsToTranslate, setWordsToTranslate] = useState([]); // sent translations to backend
-  const isTranslationsComplete = Object.keys(translations)?.length === 0;
+  const [isTranslationsLoading, setIsTranslationsLoading] = useState(true)
+
 
   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;
-        });
-      }
-      return formatSentence(translations[word] || word, kwargs); // Return translated word or original word if not yet translated
+      return formatSentence(translations[word], kwargs); // Return translated word or original word if not yet translated
     },
-    [translations, wordsToTranslate]
+    [translations]
   );
 
   // api request for sending data to backend
@@ -52,39 +42,32 @@ const useTranslation = (initialSentences = []) => {
     }
   };
 
-  useEffect(() => {
-    if (initialSentences.length > 0) {
-      // Add initial sentences while ensuring no duplicates
-      const uniqueSentences = initialSentences.filter(
-        (word, index) => initialSentences.indexOf(word) === index
-      );
-      setWordsToTranslate((prevWords) => [
-        ...prevWords,
-        ...uniqueSentences.filter((word) => !prevWords.includes(word)),
-      ]);
-    }
-  }, []);
 
   useEffect(() => {
-    if (wordsToTranslate?.length > 0) {
-      handleTranslate(defaultLang, wordsToTranslate);
-      // setWordsToTranslate([]); // Clear the list after translating
-    }
-  }, [defaultLang, wordsToTranslate]);
+      handleTranslate(defaultLang, initialSentences);
+  }, [defaultLang]);
 
   useEffect(() => {
-    if (translateData?.response) {
-
+    if (translateData?.data) {
       const newTranslations = {};
-      wordsToTranslate.forEach((word, index) => {
+      initialSentences.map((word, index) => {
         newTranslations[word] = translateData?.data?.result[index];
+        console.log(translateData?.data?.result, "result")
       });
       setTranslations((prevTranslations) => ({
         ...prevTranslations,
         ...newTranslations,
       }));
     }
-  }, [translateData?.response]);
+  }, [translateData?.data]);
+
+  useEffect(() => {
+
+    if(Object.keys(translations)?.length > 0){
+        setIsTranslationsLoading(false)
+      }
+  }, [translations])
+  
 
 
   return {
@@ -94,8 +77,7 @@ const useTranslation = (initialSentences = []) => {
     handleTranslate,
     translations,
     findText,
-    wordsToTranslate,
-    isTranslationsComplete,
+    isTranslationsLoading,
   };
 };