MM-35384 Add country variant localization support (#5397)

app/components/root/root.js

@@ -6,13 +6,12 @@ import PropTypes from 'prop-types';
 import {IntlProvider} from 'react-intl';
 import {Platform} from 'react-native';
 
+import {resetToTeams} from '@actions/navigation';
 import {Client4} from '@client/rest';
+import {NavigationTypes} from '@constants';
+import {getTranslations, getLocaleFromLanguage} from '@i18n';
 import EventEmitter from '@mm-redux/utils/event_emitter';
 
-import {resetToTeams} from 'app/actions/navigation';
-import {NavigationTypes} from 'app/constants';
-import {getTranslations} from 'app/i18n';
-
 export default class Root extends PureComponent {
     static propTypes = {
         children: PropTypes.node,
@@ -102,7 +101,7 @@ export default class Root extends PureComponent {
     }
 
     render() {
-        const locale = this.props.locale;
+        const locale = getLocaleFromLanguage(this.props.locale);
 
         return (
             <IntlProvider

app/i18n/index.js

@@ -8,6 +8,8 @@ import moment from 'moment';
 
 import en from '@assets/i18n/en.json';
 
+import availableLanguages from './languages';
+
 export const DEFAULT_LOCALE = 'en';
 
 addLocaleData(enLocaleData);
@@ -130,6 +132,12 @@ function loadTranslation(locale) {
     }
 }
 
+export function getLocaleFromLanguage(lang) {
+    const languageCode = lang.split('-')[0];
+    const locale = availableLanguages[lang] || languageCode;
+    return locale;
+}
+
 export function resetMomentLocale() {
     moment.locale(DEFAULT_LOCALE);
 }
@@ -138,7 +146,8 @@ export function getTranslations(locale) {
     return loadTranslation(locale);
 }
 
-export function getLocalizedMessage(locale, id) {
+export function getLocalizedMessage(lang, id) {
+    const locale = getLocaleFromLanguage(lang);
     const translations = getTranslations(locale);
 
     return translations[id];

app/i18n/languages.ts

@@ -0,0 +1,28 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import keyMirror from '@mm-redux/utils/key_mirror';
+
+const languages: Record<string, string> = keyMirror({
+    bg: null,
+    de: null,
+    en: null,
+    es: null,
+    fr: null,
+    hu: null,
+    it: null,
+    ja: null,
+    ko: null,
+    nl: null,
+    pl: null,
+    'pt-BR': null,
+    ro: null,
+    ru: null,
+    sv: null,
+    tr: null,
+    uk: null,
+    'zh-CN': null,
+    'zh-TW': null,
+});
+
+export default languages;

app/init/global_event_handler.js

@@ -291,7 +291,7 @@ class GlobalEventHandler {
                 },
                 views: {
                     i18n: {
-                        locale: getLocales()[0].languageCode,
+                        locale: getLocales()[0].languageTag,
                     },
                     root: {
                         hydrationComplete: true,

app/reducers/views/i18n.js

@@ -6,7 +6,7 @@ import {getLocales} from 'react-native-localize';
 
 import {UserTypes} from '@mm-redux/action_types';
 
-const defaultLocale = getLocales()[0].languageCode;
+const defaultLocale = getLocales()[0].languageTag;
 
 function locale(state = defaultLocale, action) {
     switch (action.type) {

app/selectors/i18n.js

@@ -8,7 +8,7 @@ import {getCurrentUserLocale} from '@mm-redux/selectors/entities/i18n';
 
 // Not a proper selector since the device locale isn't in the redux store
 export function getCurrentLocale(state) {
-    const deviceLocale = getLocales()[0].languageCode;
+    const deviceLocale = getLocales()[0].languageTag;
     const defaultLocale = deviceLocale || DEFAULT_LOCALE;
 
     return getCurrentUserLocale(state, defaultLocale);