From 37b8fd8fe37557c4d863d80a3b59be87370983de Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Wed, 24 May 2017 01:34:28 +0700 Subject: [PATCH] Simplify i18n + fallback to default language --- client/coral-embed-stream/src/index.js | 4 -- client/coral-framework/index.js | 3 - client/coral-framework/services/i18n.js | 84 ++++++++++--------------- 3 files changed, 34 insertions(+), 57 deletions(-) diff --git a/client/coral-embed-stream/src/index.js b/client/coral-embed-stream/src/index.js index ec4865d5c..0306079f3 100644 --- a/client/coral-embed-stream/src/index.js +++ b/client/coral-embed-stream/src/index.js @@ -12,10 +12,6 @@ import localStore, {injectReducers} from 'coral-framework/services/store'; import AppRouter from './AppRouter'; import {pym} from 'coral-framework'; -import {loadTranslations} from 'coral-framework/services/i18n'; - -loadTranslations(); - injectReducers(reducers); const store = (window.opener && window.opener.coralStore) ? window.opener.coralStore : localStore; diff --git a/client/coral-framework/index.js b/client/coral-framework/index.js index 35ccefc5c..5cd9d6174 100644 --- a/client/coral-framework/index.js +++ b/client/coral-framework/index.js @@ -1,11 +1,8 @@ import pym from './services/PymConnection'; import actions from './actions'; -import {loadTranslations} from '../coral-framework/services/i18n'; // TODO (bc): Deprecate old actions. Spreading actions is now needed. -loadTranslations(); - export default { pym, actions, diff --git a/client/coral-framework/services/i18n.js b/client/coral-framework/services/i18n.js index c7e7010b1..e3b729932 100644 --- a/client/coral-framework/services/i18n.js +++ b/client/coral-framework/services/i18n.js @@ -1,6 +1,7 @@ -import time from 'timeago.js'; +import ta from 'timeago.js'; import has from 'lodash/has'; import get from 'lodash/get'; +import merge from 'lodash/merge'; import esTA from '../../../node_modules/timeago.js/locales/es'; import en from '../../../locales/en.yml'; @@ -9,65 +10,46 @@ import es from '../../../locales/es.yml'; // Translations are happening at https://www.transifex.com/the-coral-project/talk-1/dashboard/. const defaultLanguage = 'en'; +const translations = {...en, ...es}; -const locales = [en, es]; - -let translations = {}; +let lang; let timeagoInstance; -const fetchTranslations = (lang) => { - translations = locales[lang]; -}; - -const setLocale = (locale) => { +function setLocale(locale) { try { localStorage.setItem('locale', locale); } catch (err) { console.error(err); } -}; +} -const getLocale = () => (localStorage.getItem('locale') || navigator.language || defaultLanguage).split('-')[0]; +function getLocale() { + return (localStorage.getItem('locale') || navigator.language || defaultLanguage).split('-')[0]; +} -const extend = (obj, src) => { +function init() { + const locale = getLocale(); + setLocale(locale); - for (let key in src) { - if (src.hasOwnProperty(key)) { - obj[key] = src[key]; - } + // Extract language key. + lang = locale.split('-')[0]; + + // Check if we have a translation in this language. + if (!(lang in translations)) { + lang = defaultLanguage; } - return obj; -}; -export const loadTranslations = (new_translations) => { - try { - const locale = getLocale(); - setLocale(locale); + ta.register('es', esTA); + timeagoInstance = ta(); +} - // ToDo: Get this into the load translations to not load everything the whole time ->> - // Add es timeago locale for the timeago registration. - time.register('es', esTA); - timeagoInstance = time(); +export function loadTranslations(newTranslations) { + merge(translations, newTranslations); +} - // If we have a translations file, let's use that one. - // Otherwise get the core translations. - if (new_translations !== undefined) { - translations = extend(translations, new_translations[locale]); - - return translations; - } - - return fetchTranslations(locale); - - } catch (err) { - console.error(err); - return fetchTranslations(defaultLanguage); - } -}; - -export const timeago = (time) => { +export function timeago(time) { return timeagoInstance.format(new Date(time), getLocale()); -}; +} /** * Expose the translation function @@ -78,10 +60,10 @@ export const timeago = (time) => { * * any extra parameters are optional and replace a variable marked by {0}, {1}, etc in the translation. */ -const t = (key, ...replacements) => { - - if (has(translations, key)) { - let translation = get(translations, key); +export function t(key, ...replacements) { + const fullKey = `${lang}.${key}`; + if (has(translations, fullKey)) { + let translation = get(translations, fullKey); // replace any {n} with the arguments passed to this method replacements.forEach((str, i) => { @@ -89,9 +71,11 @@ const t = (key, ...replacements) => { }); return translation; } else { - console.warn(`${key} language key not set`); + console.warn(`${fullKey} language key not set`); return key; } -}; +} export default t; + +init();