Fix multiple language

src/Components/ConsentHeader.tsx

@@ -1,17 +1,19 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import bg from '../Assets/bg.png';
 import privacy from '../Assets/privacy.svg';
 import { useTranslation } from 'react-i18next';
 import { useI18nextContext } from '../utils/I18nextProvider';
 import Select, { StylesConfig } from 'react-select';
 import i18n from 'i18next';
+import { ConsentContext } from '../utils/ConsentContextProvider';
 
 const ConsentHeader = ({ isRejectedLayout, languageSwitcher }: any) => {
   const { t } = useTranslation();
   const { listLanguages } = useI18nextContext();
   const currentLanguage = listLanguages.filter(
     (lang: any) => lang.value == i18n.language || i18n.language?.includes(lang.value)
   );
+  const consentContext = useContext(ConsentContext);
   const customStyles: StylesConfig = {
     menuList: (base) => ({
       ...base,
@@ -44,7 +46,10 @@ const ConsentHeader = ({ isRejectedLayout, languageSwitcher }: any) => {
             options={listLanguages}
             className="shadow-none"
             onChange={(data: any) => {
+              console.log('i18n', i18n);
+              console.log('data.value', data.value);
               i18n.changeLanguage(data.value);
+              consentContext.forceUpdate('Language changed');
             }}
             defaultValue={
               currentLanguage?.length ? currentLanguage : [{ label: 'English', value: 'en' }]

src/consent.tsx

@@ -58,21 +58,19 @@ const ConsentPopup = () => {
   );
 };
 let rootElement: any = {};
-window.addEventListener('DOMContentLoaded', function () {
-  const container = document.body?.appendChild(document.createElement('DIV'));
-  rootElement = createRoot(container);
-});
 
 const AesirConsent = () => {
   const update = async () => {
     if (document.readyState === 'complete') {
+      const container = document.body?.appendChild(document.createElement('DIV'));
+      rootElement = createRoot(container);
       const isOptInReplaceAnalytics = window['optInConsentData']
         ? JSON.parse(window?.optInConsentData)?.some((obj: any) =>
             Object.keys(obj).includes('replaceAnalyticsConsent')
           )
         : false;
       if (window['disableAnalyticsConsent'] !== 'true' || !isOptInReplaceAnalytics) {
-        rootElement.render(
+        rootElement?.render(
           <>
             {!isOptInReplaceAnalytics ? (
               <>

src/utils/ConsentContextProvider.tsx

@@ -3,7 +3,15 @@
  * @license     GNU General Public License version 3, see LICENSE.
  */
 
-import React, { Dispatch, ReactNode, SetStateAction, useEffect, useRef, useState } from 'react';
+import React, {
+  Dispatch,
+  ReactNode,
+  SetStateAction,
+  useEffect,
+  useReducer,
+  useRef,
+  useState,
+} from 'react';
 import { appLanguages } from '../translations';
 import { AesirXI18nextProvider } from './I18nextProvider';
 
@@ -15,17 +23,20 @@ interface ConsentContextType {
   visitor_uuid: string;
   setUUID: Dispatch<SetStateAction<string>>;
   ref: any;
+  forceUpdate: Dispatch<SetStateAction<string>>;
 }
 
 export const ConsentContext = React.createContext<ConsentContextType>({
   visitor_uuid: undefined,
   setUUID: undefined,
   ref: undefined,
+  forceUpdate: undefined,
 });
 
 const ConsentContextProvider: React.FC<Props> = ({ children }) => {
   const [UUID, setUUID] = useState();
   const ref = useRef();
+  const [_, forceUpdate] = useReducer((x) => x + 1, 0);
 
   useEffect(() => {
     const uuid: any = sessionStorage.getItem('aesirx-analytics-uuid');
@@ -38,6 +49,7 @@ const ConsentContextProvider: React.FC<Props> = ({ children }) => {
         visitor_uuid: UUID,
         setUUID: setUUID,
         ref: ref,
+        forceUpdate: forceUpdate,
       }}
     >
       <AesirXI18nextProvider appLanguages={appLanguages}>{children}</AesirXI18nextProvider>

src/utils/I18nextProvider.tsx

@@ -84,7 +84,7 @@ const AesirXI18nextProvider = ({
     i18n.addResourceBundle(key, 'translation', resource);
     listLanguages.push({ label: defaultLanguages[key].title, value: key });
   });
-
+  console.log('AesirXI18nextProvider rerender');
   return (
     <I18NextContext.Provider value={{ listLanguages }}>
       <I18nextProvider i18n={i18n}>{children}</I18nextProvider>