chore: cleanup language settings and language selector (#337)

Co-authored-by: dq18 <>
openfoodfacts · Mar 5, 2024 · 396c808 · 396c808
1 parent f701df8
commit 396c808
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 22 deletions.
diff --git a/src/i18n/index.js b/src/i18n/index.js
@@ -9,9 +9,4 @@ const i18n = createI18n({
   messages: { en },
 })
 
-// React to language changes
-i18n.onLanguageChanged = (newLocale, oldLocale) => {
-    console.log(`Language changed from ${oldLocale} to ${newLocale}`)
-    // You can perform additional actions here if needed
-}
 export default i18n
diff --git a/src/i18n/localeManager.js b/src/i18n/localeManager.js
@@ -1,6 +1,7 @@
 import i18n from '@/i18n'
 import { nextTick } from 'vue'
 import languageData from '@/i18n/data/languages.json'
+import { useAppStore } from '@/store'
 
 const localeManager = {
   get defaultLocale() {
@@ -28,8 +29,8 @@ const localeManager = {
     await localeManager.loadLocaleMessages(newLocale)
     localeManager.currentLocale = newLocale
     document.querySelector('html').setAttribute('lang', newLocale)
-    localStorage.setItem('user-locale', newLocale)
-
+    const store = useAppStore()
+    store.setLanguage(newLocale)
   },
 
   /**
@@ -74,7 +75,8 @@ const localeManager = {
    * @returns {string|null} The persisted locale if it is supported, or null otherwise.
    */
   getPersistedLocale() {
-    const persistedLocale = localStorage.getItem('user-locale')
+    const store = useAppStore()
+    const persistedLocale = store.getUserLanguage
 
     if(localeManager.isLocaleSupported(persistedLocale)) {
       return persistedLocale

diff --git a/src/router.js b/src/router.js
@@ -39,10 +39,9 @@ const router = createRouter({
  */
  router.beforeEach(async (to, from, next) => {
   const store = useAppStore()
-  const fromLocale = from.params.locale
-  const toLocale = to.params.locale || localeManager.guessDefaultLocale()
-  if (fromLocale !== toLocale) {  
-    await localeManager.changeLanguage(toLocale)
+  const locale = localeManager.guessDefaultLocale()
+  if (locale !== store.user.language) {
+    await localeManager.changeLanguage(locale)
   }
   if (to.meta.requiresAuth && !store.user.token) {
     console.log('checkAuth')

diff --git a/src/store.js b/src/store.js
@@ -9,7 +9,7 @@ export const useAppStore = defineStore('app', {
       last_product_mode_used: 'barcode',
       last_currency_used: import.meta.env.VITE_DEFAULT_CURRENCY,  // 'EUR'
       recent_locations: [],
-      language: localStorage.getItem('user-locale') || import.meta.env.VITE_DEFAULT_LOCALE,  // 'en'
+      language: import.meta.env.VITE_DEFAULT_LOCALE, // 'en'
       country: import.meta.env.VITE_DEFAULT_COUNTRY,  // 'FR',
       proofs: [],
       proofTotal: null,
@@ -25,10 +25,6 @@ export const useAppStore = defineStore('app', {
       }
     },
     getUserLanguage: (state) => {
-      // manage edge-case where some user languages were stored as objects instead of strings
-      if (typeof state.user.language === 'object') {
-        return state.user.language.code
-      }
       return state.user.language
     },
     getUserCountry: (state) => {

diff --git a/src/views/UserSettings.vue b/src/views/UserSettings.vue
@@ -21,7 +21,7 @@
               :label="$t('UserSettings.LanguageLabel')"
               :items="languageList"
               item-title="native"
-              return-object
+              item-value="code"
               hide-details="auto"
             ></v-autocomplete>
 
@@ -91,7 +91,7 @@ export default {
   watch:{
     'userSettingsForm.selectedLanguage': async function () {
       if (this.userSettingsForm.selectedLanguage !== null) {
-        this.languageTranslationCompletion = await localeManager.calculateTranslationCompletion(this.userSettingsForm.selectedLanguage.code)
+        this.languageTranslationCompletion = await localeManager.calculateTranslationCompletion(this.userSettingsForm.selectedLanguage)
       }
     },
     'userSettingsForm.selectedCountry': function (newValue, oldValue) {
@@ -138,12 +138,12 @@ export default {
   methods: {
     initUserSettingsForm() {
       this.userSettingsForm.currency = this.appStore.user.last_currency_used
-      this.userSettingsForm.selectedLanguage = this.languageList.find(lang => lang.code === localeManager.guessDefaultLocale()) || this.languageList.find(lang => lang.code === 'en')
+      this.userSettingsForm.selectedLanguage = this.languageList.find(lang => lang.code === localeManager.guessDefaultLocale()).code
       this.userSettingsForm.selectedCountry = countryData.find(country => country.code === this.appStore.user.country).code  
     },
     async updateSettings() {
-      await localeManager.changeLanguage(this.userSettingsForm.selectedLanguage.code)
-      this.appStore.setLanguage(this.userSettingsForm.selectedLanguage.code)
+      await localeManager.changeLanguage(this.userSettingsForm.selectedLanguage)
+      this.appStore.setLanguage(this.userSettingsForm.selectedLanguage)
       this.appStore.setCountry(this.userSettingsForm.selectedCountry)
       this.appStore.setLastCurrencyUsed(this.userSettingsForm.currency)
       this.$router.push({ path: '/', query: { settingsSuccess: 'true' } })