Refactor localized countries hook to use commons-ui's useLocalizedCountries (#3137)

Signed-off-by: achour94 <[email protected]>

Author: achour94

src/components/app.jsx

@@ -26,6 +26,7 @@ import {
     NotificationsUrlKeys,
     useNotificationsListener,
     useSnackMessage,
+    getComputedLanguage,
 } from '@gridsuite/commons-ui';
 import PageNotFound from './page-not-found';
 import { FormattedMessage } from 'react-intl';
@@ -37,7 +38,6 @@ import {
     PARAM_THEME,
     PARAM_USE_NAME,
 } from '../utils/config-params';
-import { getComputedLanguage } from '../utils/language';
 import AppTopBar from './app-top-bar';
 import { StudyContainer } from './study-container';
 import { fetchDefaultParametersValues, fetchIdpSettings } from '../services/utils';

src/components/utils/localized-countries-hook.ts

@@ -6,43 +6,12 @@
  */
 
 import { PARAM_LANGUAGE } from '../../utils/config-params';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { getComputedLanguage } from '../../utils/language';
-import localizedCountries from 'localized-countries';
-import countriesFr from 'localized-countries/data/fr.json';
-import countriesEn from 'localized-countries/data/en.json';
 import { useParameterState } from 'components/dialogs/parameters/use-parameters-state';
+import { useLocalizedCountries as useLocalizedCountriesCUI } from '@gridsuite/commons-ui';
 
 export const useLocalizedCountries = () => {
     const [languageLocal] = useParameterState(PARAM_LANGUAGE);
-    const [localizedCountriesModule, setLocalizedCountriesModule] = useState<localizedCountries.LocalizedCountries>();
-
-    //TODO FM this is disgusting, can we make it better ?
-    useEffect(() => {
-        const lang = getComputedLanguage(languageLocal).substr(0, 2);
-        let localizedCountriesResult: localizedCountries.LocalizedCountries;
-        // vite does not support ESM dynamic imports on node_modules, so we have to imports the languages before and do this
-        // https://github.com/vitejs/vite/issues/14102
-        if (lang === 'fr') {
-            localizedCountriesResult = localizedCountries(countriesFr);
-        } else if (lang === 'en') {
-            localizedCountriesResult = localizedCountries(countriesEn);
-        } else {
-            console.warn('Unsupported language "' + lang + '" for countries translation, we use english as default');
-            localizedCountriesResult = localizedCountries(countriesEn);
-        }
-        setLocalizedCountriesModule(localizedCountriesResult);
-    }, [languageLocal]);
-
-    const countryCodes = useMemo(
-        () => (localizedCountriesModule ? Object.keys(localizedCountriesModule.object()) : []),
-        [localizedCountriesModule]
-    );
-
-    const translate = useCallback(
-        (countryCode: string) => (localizedCountriesModule ? localizedCountriesModule.get(countryCode) : ''),
-        [localizedCountriesModule]
-    );
+    const { translate, countryCodes } = useLocalizedCountriesCUI(languageLocal);
 
     return { translate, countryCodes };
 };

src/redux/session-storage/local-storage.ts

@@ -5,8 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { DARK_THEME, GsLang, GsTheme, LANG_SYSTEM } from '@gridsuite/commons-ui';
-import { getComputedLanguage } from '../../utils/language';
+import { DARK_THEME, getComputedLanguage, GsLang, GsTheme, LANG_SYSTEM } from '@gridsuite/commons-ui';
 import { APP_NAME } from '../../utils/config-params';
 import { StudyDisplayMode } from 'components/network-modification.type';
 import { UUID } from 'crypto';