From 4a0d03e011789aa58e9dda46d9035bb3b95db06c Mon Sep 17 00:00:00 2001 From: Grzegorz Leoniec Date: Fri, 21 Dec 2018 15:11:51 +0100 Subject: [PATCH] Refactored i18n plugin and fixed several bugs --- components/LocaleSwitch.vue | 17 +++----------- plugins/i18n.js | 47 +++++++++++++++++++++++-------------- 2 files changed, 33 insertions(+), 31 deletions(-) diff --git a/components/LocaleSwitch.vue b/components/LocaleSwitch.vue index aa9a10eb3..88e7bdcb1 100644 --- a/components/LocaleSwitch.vue +++ b/components/LocaleSwitch.vue @@ -68,24 +68,13 @@ export default { }, computed: { current() { - console.log('current', this.$i18n.locale()) - return find(this.locales, ['code', this.$i18n.locale()]) + return find(this.locales, { code: this.$i18n.locale() }) } }, methods: { changeLanguage(locale) { - // TODO: move that logic to store!? - // check if the locale has already been loaded - if (this.$i18n.localeExists(locale)) { - this.$i18n.set(locale) - this.$refs.menu.toggleMenu() - return - } - import(`~/locales/${locale}.json`).then(res => { - this.$i18n.add(locale, res.default) - this.$i18n.set(locale) - this.$refs.menu.toggleMenu() - }) + this.$i18n.set(locale) + this.$refs.menu.toggleMenu() } } } diff --git a/plugins/i18n.js b/plugins/i18n.js index 500d4e7a5..345aa3641 100644 --- a/plugins/i18n.js +++ b/plugins/i18n.js @@ -11,33 +11,46 @@ export default ({ app, req, cookie, store }) => { const debug = app.$env.NODE_ENV !== 'production' const key = 'locale' - const changeHandler = debounce((mutation, store) => { + const changeHandler = async mutation => { if (process.server) return - const currentLocale = app.$cookies.get(mutation.payload.locale) - const isDifferent = mutation.payload.locale !== currentLocale - if (isDifferent) { - app.$cookies.set(key, mutation.payload.locale) + const newLocale = mutation.payload.locale + const currentLocale = await app.$cookies.get(key) + const isDifferent = newLocale !== currentLocale + + if (!isDifferent) { + return + } + + app.$cookies.set(key, newLocale) + if (!app.$i18n.localeExists(newLocale)) { + import(`~/locales/${newLocale}.json`).then(res => { + app.$i18n.add(newLocale, res.default) + }) } const user = store.getters['auth/user'] const token = store.getters['auth/token'] // persist language if it differs from last value - if (isDifferent && user && user._id && token) { + if (user && user._id && token) { // TODO: SAVE LOCALE // store.dispatch('usersettings/patch', { - // uiLanguage: mutation.payload.locale + // uiLanguage: newLocale // }, { root: true }) } - }, 500) + } - const i18nStore = new Vuex.Store({ - strict: debug - }) + // const i18nStore = new Vuex.Store({ + // strict: debug + // }) - Vue.use(vuexI18n.plugin, i18nStore, { + Vue.use(vuexI18n.plugin, store, { onTranslationNotFound: function(locale, key) { - console.warn(`vuex-i18n :: Key '${key}' not found for locale '${locale}'`) + if (debug) { + console.warn( + `vuex-i18n :: Key '${key}' not found for locale '${locale}'` + ) + } } }) @@ -75,15 +88,15 @@ export default ({ app, req, cookie, store }) => { Vue.i18n.set(locale) Vue.i18n.fallback('en') - if (process.client) { - i18nStore.subscribe((mutation, s) => { + if (process.browser) { + store.subscribe(mutation => { if (mutation.type === 'i18n/SET_LOCALE') { - changeHandler(mutation, store) + changeHandler(mutation) } }) } app.$i18n = Vue.i18n - return i18nStore + return store }