l-min-components 1.0.886 → 1.0.895

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.0.886",
+  "version": "1.0.895",
   "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,170 @@ const AppMainLayout = () => {
     setDefaultLang,
     defaultLang,
     findText,
-    translateData,
-    isTranslationsComplete
+    translations,
+    isTranslationsLoading,
+    setIsTranslationsLoading,
+    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,
+        isTranslationsLoading,
+        setIsTranslationsLoading,
+        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 ? (
+            <>  </>
+          ) : (
+            <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,8 @@ const HeaderComponent = (props) => {
     setGeneralData,
     generalData,
     notificationMarkReadData,
+    findText,
+    isTranslationsLoading
   } = useContext(OutletContext);
   const [selectedAccount, setSelectedAccount] = useState();
   const { setDefaultAccount, handleSetDefaultAccount } = useHeader();
@@ -85,8 +87,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);
@@ -415,7 +418,7 @@ const HeaderComponent = (props) => {
 
   return (
     <Navbar>
-      {translateData?.loading && <FullPageLoader hasBackground={true} />}
+      {isTranslationsLoading && <FullPageLoader hasBackground={true} />}
 
       <img src={logo} alt="Learngual logo" />
       <Nav
@@ -528,7 +531,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,7 +24,13 @@ const LanguageDropdown = ({ languageDropdown, setLanguageDropdown }) => {
   const {
     setGeneralData,
     generalData,
+    wordBank,
+    findText,
+    defaultLang,
+    setDefaultLang,
+    setIsTranslationsLoading
   } = useContext(OutletContext);
+  
   const {
     retrieveUserDetailsData,
     handleRetrieveUserDetails,
@@ -32,12 +38,8 @@ const LanguageDropdown = ({ languageDropdown, setLanguageDropdown }) => {
     handleUpdateUserAccount,
   } = useHeader();
   const {
-    findText,
     translateData,
-    defaultLang,
-    setDefaultLang,
     handleTranslate,
-    wordsToTranslate,
   } = useTranslation();
   
   const languagesData = [
@@ -99,12 +101,14 @@ const LanguageDropdown = ({ languageDropdown, setLanguageDropdown }) => {
     }
     setLanguageDropdown();
     setDefaultLang(item?.slug);
-    handleTranslate(item?.slug, wordsToTranslate)
-    // item?.slug === defaultLang
-    //   ? setIsLoading(false)
-    //   : setIsLoading(true);
+    // handleTranslate(item?.slug, wordBank)
+    item?.slug === defaultLang
+      ? setIsTranslationsLoading(false)
+      : setIsTranslationsLoading(true);
     localStorage.setItem("defaultLang", JSON.stringify(item));
     console.log("general id", generalData?.defaultAccount?.id)
+    console.log("🚀 ~ handleLanguageChange ~ item?.slug:", item?.slug, defaultLang)
+
 
   }
 

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

@@ -27,12 +27,13 @@ const SideMenu = ({
   affiliatesActive,
   setRightComponent,
   planState,
+  findText
 }) => {
   //console.log("user type", userType);
   // 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/hooks/useTranslation.jsx

@@ -6,27 +6,14 @@ const useTranslation = (initialSentences = []) => {
 
   const [defaultLang, setDefaultLang] = useState(value?.slug ?? "en");
   const [translations, setTranslations] = useState({}); // returned translation from backend
-  const [wordsToTranslate, setWordsToTranslate] = useState([]); // sent translations to backend
-  const isTranslationsComplete = Object.keys(translations)?.length === 0;
-  console.log("🚀 ~ useTranslation ~ translations:", translations)
-  console.log("🚀 ~ useTranslation ~ wordsToTranslate:", wordsToTranslate)
+  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
     },
-    [translations, wordsToTranslate]
+    [translations]
   );
 
   // api request for sending data to backend
@@ -55,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
-    }
+      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 {
@@ -97,8 +77,8 @@ const useTranslation = (initialSentences = []) => {
     handleTranslate,
     translations,
     findText,
-    wordsToTranslate,
-    isTranslationsComplete,
+    isTranslationsLoading,
+    setIsTranslationsLoading
   };
 };