@rh-support/react-context 2.5.32 → 2.5.33

package/lib/esm/context/GlobalTranslationProvider.d.ts

@@ -2,10 +2,11 @@ import { CacheUtilsService } from '@rh-support/utils';
 import React from 'react';
 interface IProps {
     children: JSX.Element | JSX.Element[];
-    fetchTrans: (lang: string) => Promise<any>;
+    fetchTrans: (lang: string) => Promise<ITranslationResource>;
 }
+export type ITranslationResource = Record<string, Record<'translation', Record<string, string>>>;
 interface ITranslationContext {
-    setLang: React.Dispatch<React.SetStateAction<string>>;
+    setLang: (value: string) => void;
     fetchingTranslation: boolean;
 }
 export declare const SELECTED_TRANS_LANGUAGE = "selected_trans_language";

package/lib/esm/context/GlobalTranslationProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalTranslationProvider.d.ts","sourceRoot":"","sources":["../../../src/context/GlobalTranslationProvider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAA8B,MAAM,mBAAmB,CAAC;AAIlF,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,UAAU,MAAM;IACZ,QAAQ,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IACtC,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;CAC9C;AAED,UAAU,mBAAmB;IACzB,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;IACtD,mBAAmB,EAAE,OAAO,CAAC;CAChC;AAWD,eAAO,MAAM,uBAAuB,4BAA4B,CAAC;AAEjE,eAAO,MAAM,UAAU,2BAA4E,CAAC;AAEpG,eAAO,MAAM,wBAAwB,oCAAiD,CAAC;AAEvF,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,MAAM,qBAwEtD"}
+{"version":3,"file":"GlobalTranslationProvider.d.ts","sourceRoot":"","sources":["../../../src/context/GlobalTranslationProvider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAA8B,MAAM,mBAAmB,CAAC;AAGlF,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D,UAAU,MAAM;IACZ,QAAQ,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IACtC,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,oBAAoB,CAAC,CAAC;CAC/D;AAED,MAAM,MAAM,oBAAoB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;AAEjG,UAAU,mBAAmB;IACzB,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,mBAAmB,EAAE,OAAO,CAAC;CAChC;AAWD,eAAO,MAAM,uBAAuB,4BAA4B,CAAC;AAEjE,eAAO,MAAM,UAAU,2BAA4E,CAAC;AAEpG,eAAO,MAAM,wBAAwB,oCAAiD,CAAC;AAEvF,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,MAAM,qBAsEtD"}

package/lib/esm/context/GlobalTranslationProvider.js

@@ -11,85 +11,83 @@ import { languageConst } from '@rh-support/components';
 import { CacheUtilsService, getCookieValue } from '@rh-support/utils';
 import i18n from 'i18next';
 import localForageCase from 'localforage';
-import isEmpty from 'lodash/isEmpty';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { I18nextProvider, initReactI18next } from 'react-i18next';
 function getRhLocaleLang() {
     const cookieVal = (getCookieValue('rh_locale') || 'en_US').split('_')[0];
     return cookieVal && languageConst[cookieVal] ? cookieVal : 'en';
 }
 const initialTranslationContext = {
-    setLang: undefined,
+    setLang: () => { },
     fetchingTranslation: false,
 };
 export const SELECTED_TRANS_LANGUAGE = 'selected_trans_language';
 export const cacheTrans = new CacheUtilsService(localForageCase, { name: SELECTED_TRANS_LANGUAGE });
 export const GlobalTranslationContext = React.createContext(initialTranslationContext);
 export function GlobalTranslationProvider(props) {
-    const [lang, setLang] = useState(getRhLocaleLang());
-    const [resources, setResource] = useState({ lang: '', translation: {} });
+    /*
+     * Using translation has never been this fun
+     * To use translation there are 2 way
+     * 1. Using <Trans /> component
+     * Let's try to translate "+3 more points"
+     * import { Trans } from 'react-i18next';
+     * <Trans>+{{more: props.more}} more points</Trans>
+     * Trans component allow you to use it with links and different tags inside it
+     * 2. You can also use t()
+     * t('+{{more}} more points', {more: props.more})
+     */
+    const { fetchTrans } = props;
     const [fetchingResources, setFetchingResource] = useState(false);
+    const initializedRef = useRef(false);
+    const setLang = (selectedLanguage) => __awaiter(this, void 0, void 0, function* () {
+        setFetchingResource(true);
+        try {
+            const resources = yield fetchTrans(selectedLanguage);
+            yield i18n.use(initReactI18next).init({
+                resources,
+                lng: selectedLanguage,
+                interpolation: {
+                    escapeValue: false,
+                },
+                react: {
+                    bindI18n: 'languageChanged loaded',
+                },
+                nsSeparator: ':::',
+                keySeparator: '::',
+                debug: false,
+            });
+        }
+        catch (error) {
+            console.error('Error in setting up new language');
+        }
+        finally {
+            setFetchingResource(false);
+        }
+    });
     useEffect(() => {
-        function getLang() {
+        function initialize() {
             return __awaiter(this, void 0, void 0, function* () {
+                let defaultLang = 'en';
                 try {
                     // Currently we give precedence to cookie value(rh_locale) that is set by portal team if it's not en_US,
                     // i.e if user selects the either ja or ko or zh_cn that particular language will be loaded
                     // our stored language will be ignored even if that user has some stored language
                     const value = yield cacheTrans.getWithFullKey(window.sessionjs.getUserInfo().username);
-                    if (getRhLocaleLang() === 'en' && (value === null || value === void 0 ? void 0 : value.value) !== 'en') {
-                        value && setLang(value.value);
+                    if (getRhLocaleLang() === 'en' && (value === null || value === void 0 ? void 0 : value.value) !== 'en' && !!value) {
+                        defaultLang = value.value;
                     }
                 }
                 catch (error) {
                     console.error(error);
                 }
+                if (!initializedRef.current) {
+                    yield setLang(defaultLang);
+                }
             });
         }
-        getLang();
+        initialize();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    i18n.use(initReactI18next).init({
-        lng: lang || 'en',
-        interpolation: {
-            escapeValue: false,
-        },
-        resources: resources && resources.translation,
-        react: {
-            bindI18n: 'languageChanged loaded',
-        },
-        nsSeparator: ':::',
-        keySeparator: '::',
-        debug: false,
-    });
-    /*
-     * Using translation has never been this fun
-     * To use translation there are 2 way
-     * 1. Using <Trans /> component
-     * Let's try to translate "+3 more points"
-     * import { Trans } from 'react-i18next';
-     * <Trans>+{{more: props.more}} more points</Trans>
-     * Trans component allow you to use it with links and different tags inside it
-     * 2. You can also use t()
-     * t('+{{more}} more points', {more: props.more})
-     */
-    const { fetchTrans } = props;
-    useEffect(() => {
-        if (resources && resources.translation[lang] && !isEmpty(resources.translation[lang].translation)) {
-            return;
-        }
-        const setTranslationResource = (selectedLang) => __awaiter(this, void 0, void 0, function* () {
-            setFetchingResource(true);
-            try {
-                const response = yield fetchTrans(selectedLang);
-                setResource(response);
-            }
-            catch (error) {
-                console.error('Error in setting up new language');
-            }
-            setFetchingResource(false);
-        });
-        setTranslationResource(lang);
-    }, [lang, resources, fetchTrans]);
     return (React.createElement(GlobalTranslationContext.Provider, { value: { setLang, fetchingTranslation: fetchingResources } },
         React.createElement(I18nextProvider, { i18n: i18n }, props.children)));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rh-support/react-context",
-    "version": "2.5.32",
+    "version": "2.5.33",
     "publishConfig": {
         "access": "public",
         "registry": "https://registry.npmjs.org"
@@ -40,7 +40,7 @@
         "@cee-eng/hydrajs": "4.18.57",
         "@patternfly/react-core": "6.2.1",
         "@patternfly/react-icons": "6.2.1",
-        "@rh-support/components": "2.5.30",
+        "@rh-support/components": "2.5.31",
         "@rh-support/types": "2.0.5",
         "@rh-support/user-permissions": "2.5.20",
         "@rh-support/utils": "2.5.19",
@@ -93,5 +93,5 @@
         "defaults and supports es6-module",
         "maintained node versions"
     ],
-    "gitHead": "9b66078ef07566416643fd8f268a34735cc622fb"
+    "gitHead": "1987aef1be6d63188e3313e7f8a6d5d563f6aae4"
 }