l-min-components 1.0.876 → 1.0.883

package/package.json

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

package/src/components/AdminAppMainLayout/index.jsx

@@ -1,9 +1,6 @@
 import React, {
   useState,
-  useEffect,
   createContext,
-  useRef,
-  useContext,
 } from 'react';
 import { Outlet, useLocation } from 'react-router-dom';
 import {

package/src/components/AdminResetPassword/change-password.jsx

@@ -2,10 +2,9 @@ import React from "react";
 import { AdminResetPasswordContainer } from "./index.styled";
 import bg from "./assets/images/reset_password_bg.png";
 import logo from "./assets/images/logo.png";
-import { Link, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import ButtonComponent from "../button";
 import InputComponent from "../input";
-import { BackArrow } from "./assets/svg/back-arrow";
 
 const AdminResetPassword = () => {
   const navigate = useNavigate();

package/src/components/AdminResetPassword/index.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import { AdminResetPasswordContainer } from "./index.styled";
 import bg from "./assets/images/reset_password_bg.png";
 import logo from "./assets/images/logo.png";
-import { Link, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import ButtonComponent from "../button";
 import InputComponent from "../input";
 import { BackArrow } from "./assets/svg/back-arrow";

package/src/components/AdminSecuritySettings/modals/success-modal.jsx

@@ -5,7 +5,6 @@ import {
   ModalCardContainer,
   CloseModalButton,
 } from "./index.styled";
-import { IoMdClose } from "react-icons/io";
 import Modal from "react-modal";
 import ButtonComponent from "../../button";
 import img from "../assets/images/subtract.png"

package/src/components/AdminSidebar/index.jsx

@@ -1,16 +1,13 @@
 import React, { useState, useRef } from 'react';
 import { NavLink } from 'react-router-dom';
 import {
-  NavigationContainer,
   SideMenuContainer,
-  SideMenuDropdownBody,
-  SideMenuDropdownHeader,
   NavWrapper,
 } from './index.styled';
-import { adminSideMenuOptions } from '../../hooks/adminSideMenuItems';
+// import { adminSideMenuOptions } from '../../hooks/adminSideMenuItems';
 import logo from './assets/images/logo.png';
-import { ChevronIconActive } from './assets/svg/chevronIcon';
-import cx from 'classnames';
+// import { ChevronIconActive } from './assets/svg/chevronIcon';
+// import cx from 'classnames';
 import { LogoutIcon } from './assets/svg/logoutIcon';
 import {
   adminCMSItems,

package/src/components/AppMainLayout/index.jsx

@@ -2,8 +2,6 @@ import React, {
   useState,
   useEffect,
   createContext,
-  useRef,
-  useContext,
 } from "react";
 import { Outlet, useLocation } from "react-router-dom";
 import {
@@ -29,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);
@@ -100,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";
@@ -159,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

@@ -1,8 +1,5 @@
 import React, { useContext } from "react";
 import {
-  AbsoluteSVG,
-  ArrowIcon,
-  BannerCTA,
   BannerImage,
   BannerSubtitle,
   BannerTitle,
@@ -11,14 +8,12 @@ import {
 import BannerImg from "./assets/banner.png";
 import Button from "../button";
 import { FaArrowRight } from "react-icons/fa";
-import { OutletContext } from "../AppMainLayout";
 import useTranslation from "../../hooks/useTranslation";
 
 const Banner = () => {
-  const { textSchema, findText } = useTranslation();
+  const { findText } = useTranslation();
 
   return (
-    textSchema && (
       <BannerWrapper>
         <BannerTitle>
           {" "}
@@ -43,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/datePicker/index.jsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import DatePicker from 'react-datepicker';
 import { CalendarIcon } from './svg/calendar';
-import { DownloadIcon } from './svg/download';
 import CustomDatePickerHeader from './dateNavigation';
 import { DatePickerWrapper, DateCont } from './style';
 import moment from 'moment';

package/src/components/deactivated/modal/subscription-expired-modal.jsx

@@ -1,10 +1,7 @@
 import { useState, useEffect } from "react";
 import {
-  CardContainer,
   CardBody,
-  CardHeader,
   ModalCardContainer,
-  CloseModalButton,
   ExpiryCardContainer,
 } from "./index.styled";
 import Modal from "react-modal";
@@ -12,7 +9,7 @@ import ButtonComponent from "../../button";
 import RemoveUser from "./img/removeUser.png";
 import { ErrorBookIcon } from "./img/book";
 import moment from "moment";
-import { toast, ToastContainer } from "react-toastify";
+import { toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import { useNavigate } from "react-router-dom";
 
@@ -103,13 +100,6 @@ const SubscriptionExpiredModal = ({
 
   const isWithin10Days = moment().add(10, "days").isSameOrBefore(expiryDate);
 
-  if (isWithin10Days) {
-    //console.log('Expiry date is within 10 days');
-  } else {
-    //console.log('Expiry date is more than 10 days away');
-  }
-  //console.log(isWithin10Days)
-
   const [daysLeft, setDaysLeft] = useState(null);
 
   useEffect(() => {

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/errorPage/index.jsx

@@ -1,4 +1,4 @@
-import React, { useContext, useLayoutEffect } from "react";
+import React from "react";
 import { Container } from "./style";
 import ErrorImage from "./errorPage.png";
 import ButtonComponent from "../button";

package/src/components/fileRightBar/enterpriseRightBar/index.jsx

@@ -4,16 +4,8 @@ import {
   InstructorContainer,
   NewLanguage,
   RecentAdded,
-  Container,
-  Upgrade,
-  Users,
-  UploadProgressContainer,
 } from "../styles";
 import Button from "../../button";
-import CircularProgressBar from "../components/progressBar";
-import UpgradeIcon from "../assets/Feature.png";
-import { UploadProgress } from "../assets/uploadProgressIcon";
-import ProgressBar from "../../progressBar";
 import UpgradeComponent from "./upgrade";
 import LessonIcon from "../assets/lession";
 import LessonFlag from "../assets/lessonflag";

package/src/components/fileRightBar/instructorRightBar.jsx

@@ -4,16 +4,8 @@ import {
   InstructorContainer,
   NewLanguage,
   RecentAdded,
-  Container,
-  Upgrade,
-  Users,
-  UploadProgressContainer
 } from "./styles";
 import Button from "../button";
-import CircularProgressBar from "./components/progressBar";
-import UpgradeIcon from "./assets/Feature.png";
-import { UploadProgress } from "./assets/uploadProgressIcon";
-import ProgressBar from "../progressBar";
 import UpgradeComponent from "./components/ugradeLock";
 import LessonIcon from "./assets/lession";
 import LessonFlag from "./assets/lessonflag";

package/src/components/fileRightBar/managerPageRight.jsx

@@ -2,13 +2,10 @@ import React from "react";
 import {
   BannerWrapper,
   Container,
-  Upgrade,
-  Users,
   UploadProgressContainer
 } from "./styles";
 import Button from "../button";
 import CircularProgressBar from "./components/progressBar";
-import UpgradeIcon from "./assets/Feature.png";
 import { UploadProgress } from "./assets/uploadProgressIcon";
 import ProgressBar from "../progressBar";
 import UpgradeComponent from "./components/ugradeLock";

package/src/components/fileRightBar/personalRightBar/index.jsx

@@ -4,16 +4,7 @@ import {
   InstructorContainer,
   NewLanguage,
   RecentAdded,
-  Container,
-  Upgrade,
-  Users,
-  UploadProgressContainer
 } from "../styles";
-import Button from "../../button";
-import CircularProgressBar from "../components/progressBar";
-import UpgradeIcon from "../assets/Feature.png";
-import { UploadProgress } from "../assets/uploadProgressIcon";
-import ProgressBar from "../../progressBar";
 import UpgradeComponent from "../components/ugradeLock";
 import LessonIcon from "../assets/lession";
 import LessonFlag from "../assets/lessonflag";
@@ -33,7 +24,7 @@ import LibraryAdImage from "../assets/libraryAd.png"
 *
 */
 
-const PersonalRightBar = ({UpgradeClick, CourseClick, personalReport, personalLibrary }) => {
+const PersonalRightBar = ({ personalReport, personalLibrary }) => {
 
   return (
     <InstructorContainer>  

package/src/components/fileRightBar/upgrade.jsx

@@ -1,23 +1,11 @@
 import React from "react";
 import {
-  AbsoluteSVG,
-  ArrowIcon,
-  BannerCTA,
-  BannerImage,
-  BannerSubtitle,
-  BannerTitle,
   BannerWrapper,
   Container,
-  Upgrade,
-  Users,
   UploadProgressContainer
 } from "./styles";
-import BannerImg from "./assets/banner.png";
 import Button from "../button";
-import { FaArrowRight } from "react-icons/fa";
 import CircularProgressBar from "./components/progressBar";
-import UpgradeIcon from "./assets/Feature.png";
-import UploadOwner from "./assets/uploadOwner.png";
 import { UploadProgress } from "./assets/uploadProgressIcon";
 import ProgressBar from "../progressBar";
 import UsersList from "./components/users";

package/src/components/fileRightBar/uploadRight.jsx

@@ -1,25 +1,9 @@
 import React from "react";
 import {
-  AbsoluteSVG,
-  ArrowIcon,
-  BannerCTA,
-  BannerImage,
-  BannerSubtitle,
-  BannerTitle,
   BannerWrapper,
   Container,
-  Upgrade,
-  Users,
-  UploadProgressContainer
 } from "./styles";
-import BannerImg from "./assets/banner.png";
-import Button from "../button";
-import { FaArrowRight } from "react-icons/fa";
 import CircularProgressBar from "./components/progressBar";
-import UpgradeIcon from "./assets/Feature.png";
-import UploadOwner from "./assets/uploadOwner.png";
-import { UploadProgress } from "./assets/uploadProgressIcon";
-import ProgressBar from "../progressBar";
 import UpgradeComponent from "./components/ugradeLock";
 
 

package/src/components/fileRightBar/users.jsx

@@ -1,23 +1,10 @@
 import React from "react";
 import {
-  AbsoluteSVG,
-  ArrowIcon,
-  BannerCTA,
-  BannerImage,
-  BannerSubtitle,
-  BannerTitle,
   BannerWrapper,
   Container,
-  Upgrade,
-  Users,
-  UploadProgressContainer
 } from "./styles";
-import BannerImg from "./assets/banner.png";
 import Button from "../button";
-import { FaArrowRight } from "react-icons/fa";
 import CircularProgressBar from "./components/progressBar";
-import UpgradeIcon from "./assets/Feature.png";
-import UploadOwner from "./assets/uploadOwner.png";
 import UsersList from "./components/users";
 
 

package/src/components/friendRequest/friendRequestList/index.jsx

@@ -2,7 +2,6 @@ import React, { useState } from "react";
 import PropTypes from "prop-types";
 import FriendRequestCard from "../friendRequestCard";
 import { Container, Header, RequestList, SeeLessButton } from "./styles";
-import FriendImg from "../../../assets/friendrequest.png"
 
 const FriendRequestList = ({ friendRequests, onAdd, onDecline }) => {
   const [expanded, setExpanded] = useState(false);

package/src/components/fullPageLoader/index.jsx

@@ -1,8 +1,5 @@
 import React from 'react';
 import styled, { css } from 'styled-components';
-import loaderGif from './assets/first.gif';
-import Lottie from 'react-lottie';
-import defaultLoaderAnimation from './loader_3.json'; 
 import Loader from './loader';
 
 /**

package/src/components/graph/index.jsx

@@ -7,7 +7,6 @@ import {
 } from "./index.styled";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
-import moment from "moment";
 import { CalendarIcon } from "../../assets/svg/calendar";
 import { DownloadIcon } from "../../assets/svg/download";
 import GraphChart from "./graphData";

package/src/components/header/index.jsx

@@ -1,9 +1,6 @@
 import React, { useState, useEffect, useRef, useContext } from "react";
-import ReactFlagsSelect from "react-flags-select";
 import logo from "./assets/images/logo.png";
 import { BookIcon } from "./assets/svg/book";
-import { PeopleIcon } from "./assets/svg/people";
-import { MessageIcon } from "./assets/svg/message";
 import { SettingIcon } from "./assets/svg/setting";
 import { SearchIcon } from "./assets/svg/search";
 import {
@@ -20,7 +17,6 @@ import {
   SearchInputGroup,
   SearchInput,
   UserProfile,
-  CountryFlagGroup,
 } from "./index.styled";
 import useHeader from "./getHeaderDetails";
 import { FullPageLoader, OutletContext } from "..";
@@ -28,9 +24,9 @@ import { useLocation } from "react-router-dom";
 import usFlag from "../../assets/images/usFlag.png";
 import LanguageDropdown from "./languageDropdown";
 import { getCookie } from "./getCookies";
-import { data } from "../GraphMap/data";
+// import { data } from "../GraphMap/data";
 import { languagesData } from "./languages";
-import loadTranslations, { preLoadWords } from "../../hooks/utils/translation";
+import useTranslation from "../../hooks/useTranslation";
 /**
  * @param {{
  *  type: string,
@@ -71,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);
@@ -185,7 +193,6 @@ const HeaderComponent = (props) => {
         if (nextValidAccount) {
           setSelectedAccount(nextValidAccount);
         }
-        // If there is no valid developer account, do nothing (do not set a new selected account)
       }
     }
   }, [generalData?.selectedAccount, userAccountsDetail?.data]);
@@ -407,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/header/login-header.jsx

@@ -3,18 +3,16 @@ import React, {
   useEffect,
   useRef,
   useCallback,
-  useContext,
 } from "react";
-import ReactFlagsSelect from "react-flags-select";
 import logo from "./assets/images/logo.png";
-import { Navbar2, NavGroup2, Nav2, CountryFlagGroup2 } from "./index.styled";
+import { Navbar2, NavGroup2, } from "./index.styled";
 import { ArrowDownIcon } from "./assets/svg/arrow-down";
 import ButtonComponent from "../button";
 import { useLocation, useNavigate } from "react-router-dom";
 import usFlag from "../../assets/images/usFlag.png";
 import koreanFlag from "../../assets/images/koreaFlag.png";
-import { FullPageLoader, OutletContext } from "..";
-import useTranslation from "../../hooks/useTranslation";
+import { FullPageLoader } from "..";
+// import useTranslation from "../../hooks/useTranslation";
 
 /**
  * @param {{

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

@@ -1,6 +1,5 @@
 import React, { useState, useEffect, useContext } from "react";
 import { Input, Label, ErrorMsg } from "./index.styled";
-import { OutletContext } from "../AppMainLayout";
 import useTranslation from "../../hooks/useTranslation";
 
 /**
@@ -19,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) {
@@ -38,7 +37,6 @@ const InputComponent = (props) => {
   };
 
   return (
-    textSchema && (
       <div style={props.style}>
         <Label htmlFor={props.in} style={props.customLabelStyle}>
           {findText(props.label)}
@@ -66,7 +64,6 @@ const InputComponent = (props) => {
           </ErrorMsg>
         )}
       </div>
-    )
   );
 };
 

package/src/components/mobileLayout/index.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from "react";
 import { MobileLayoutContainer } from "./index.styled";
-import BackArrow from "./assets/svg/backArrow";
+// import BackArrow from "./assets/svg/backArrow";
 import img from "./assets/images/bg_img.png";
 import play from "./assets/images/play_store.png";
 import apple from "./assets/images/apple_store.png";

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/searchBar/index.jsx

@@ -8,8 +8,6 @@ import {
   SuggestionList,
   SuggestionItem,
   Container,
-  OptionIcon,
-  OptionIconSearch,
 } from "./styles";
 import { SearchFilterIcon } from "./svg/searchFilter";
 import { SearchSvg } from "./svg/search-normal";

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

@@ -10,12 +10,12 @@ import {
   NavigationContainer,
 } from "./styles";
 import { IoIosArrowBack, IoIosArrowForward } from "react-icons/io";
-import { CiLogout } from "react-icons/ci";
 import UserCard from "../userCard";
 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,
@@ -32,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);
   };
@@ -49,6 +50,7 @@ const SideMenu = ({
     generalData?.selectedAccount?.type === "PERSONAL" &&
     window.location.hostname.includes("staging");
 
+    // When pending delete and on staging
   const isPendingDelete =
     generalData?.selectedAccount?.pending_delete === true &&
     window.location.hostname.includes("staging");

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) {
@@ -58,7 +60,7 @@ const UserCard = ({ user, isOpen }) => {
       }
     }
   }, [generalData]);
-  console.log(generalData, "data");
+  // console.log(generalData, "data");
 
   return (
     <UserCardContainer isOpen={isOpen}>

package/src/components/sideNav/index.jsx

@@ -7,15 +7,14 @@ import {
   NavWrapper,
   IconContainer,
 } from "./styles";
-import { CiLogout } from "react-icons/ci";
-import { HiOutlineLogout } from "react-icons/hi";
 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/components/textEditor/index.jsx

@@ -2,7 +2,7 @@ import { useCallback, useMemo, useEffect, useRef, useState } from "react";
 import BinWhite from "./assets/binWhite";
 import MoveUpDownWhite from "./assets/moveUppDownWhite";
 import "./style.scss";
-import { createEditor, Editor, Transforms } from "slate";
+import { createEditor, Editor, } from "slate";
 import { Slate, Editable, withReact } from "slate-react";
 import DropDownComponent from "../dropdown component";
 import ButtonComponent from "../button";

package/src/hooks/leftNavMenu.jsx

@@ -1,10 +1,6 @@
 // import { useState } from "react";
 import React from "react";
 import {
-  FaSmile,
-  FaMicrophone,
-  FaHeadphonesAlt,
-  FaLanguage,
   FaChartLine,
   FaFileAlt,
   FaBook,
@@ -13,25 +9,24 @@ import {
   FaUser,
   FaCog,
   FaQuestion,
-  FaCode,
 } from "react-icons/fa";
 // import { HiOutlineBookOpen } from "react-icons/hi";
-import { BsChatSquareText } from "react-icons/bs";
-import { MdOutlineBook } from "react-icons/md";
+// import { BsChatSquareText } from "react-icons/bs";
+// import { MdOutlineBook } from "react-icons/md";
 import UserImage from "../assets/images/dashboardImage.png";
 import Learning from "../assets/svg/learning";
 import { AwardIcon, AwardIconActive } from "../assets/svg/award";
 import { DocumentIcon, DocumentIconActive } from "../assets/svg/document";
 import { TeamsIcon, TeamsIconActive } from "../assets/svg/teams";
-import { VolumeIcon } from "../assets/svg/volume";
-import { BookIcon, CoursesIcon, CoursesIconActive } from "../assets/svg/book";
+// import { VolumeIcon } from "../assets/svg/volume";
+import { CoursesIcon, CoursesIconActive } from "../assets/svg/book";
 import { DashboardIcon, DashboardIconActive } from "../assets/svg/dashboard";
 import CommunityIcon from "../components/sideNav/svg/commIcon";
 import FunIcon from "../components/sideNav/svg/fun";
 import DuetIcon from "../components/sideNav/svg/duetIcon";
 import SpeechIcon from "../components/sideNav/svg/speechIcon";
 import DictionaryIcon from "../components/sideNav/svg/dictionaryIcon";
-import { MessageIcon } from "../assets/svg/message";
+// import { MessageIcon } from "../assets/svg/message";
 import { MessagesIcon, MessagesIconActive } from "../assets/svg/messagesIcon";
 import {
   AnnouncementsIcon,

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;