1  // src/index.js
 2  import { i18n } from '@lingui/core';
 3  import { I18nProvider } from '@lingui/react';
 4  import React, { PropsWithChildren, useEffect } from 'react';
 5  
 6  import { messages } from '../locales/en/messages.js';
 7  
 8  i18n.load('en', messages);
 9  i18n.activate('en');
10  
11  export const DEFAULT_LOCALE = 'en';
12  
13  export const SUPPORTED_LANGUAGES = ['en', 'es', 'fr', 'el'];
14  export const LANG_MAP = {
15    en: 'English',
16    es: 'Spanish',
17    fr: 'French',
18    el: 'Greek',
19  };
20  
21  /**
22   * We do a dynamic import of just the catalog that we need
23   * @param locale any locale string
24   */
25  export async function dynamicActivateLanguage(locale: string) {
26    const { messages } = await import(`../locales/${locale}/messages.js`);
27    i18n.load(locale, messages);
28    i18n.activate(locale);
29    localStorage.setItem('LOCALE', locale);
30  }
31  
32  export const LanguageProvider: React.FC<PropsWithChildren> = ({ children }) => {
33    useEffect(() => {
34      // With this method we dynamically load the catalogs
35      const savedLocale = localStorage.getItem('LOCALE') || DEFAULT_LOCALE;
36      if (i18n.locale !== savedLocale) dynamicActivateLanguage(savedLocale);
37    }, []);
38  
39    return <I18nProvider i18n={i18n}>{children}</I18nProvider>;
40  };